有焦点有左右按钮的自动图片轮播

2019年05月19日| 作者:策策| 浏览:191次


请假了,但是在家也不能闲着,所以就用纯 Js 做了一个有焦点、有左右按钮的自动图片轮播,之前用JQ做起来还是比较简单的,但是呢,我感觉用纯 js 代码做起来更锻炼大脑,更丰富思路,需要的人,就拿去学习吧。


效果图:


无标题.png


HTML:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
    <div id="box">
        <ul id="oul">
            <li><a href="#"><img src="images/img1.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/img2.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/img4.jpeg" alt=""></a></li>
            <li><a href="#"><img src="images/img5.jpeg" alt=""></a></li>
        </ul>
        <ol id="ool">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <a href="javascript:vary('-')" id="left_btn">&lt;</a>
        <a href="javascript:vary('+')" id="right_btn">&gt;</a>
    </div>
    <script src="js/script.js"></script>
</body>
</html>


CSS:

*{
    box-sizing: border-box;
    margin: 0;
    padding:0;}
a{
    color:inherit;
    text-decoration:none;
}
ul,ol{
    list-style-type:none;
}
#box{
    margin:80px auto;
    width:700px;
    height:440px;
    overflow:hidden;
    border-radius:20px;
    position: relative;
}
#oul li,#ool li{
    float:left;
}
#ool{
    width:220px;
    position: absolute;
    top:410px;
    left:50%;
    margin-left:-110px;
}
#ool li{
    cursor:pointer;
    width:45px;
    height:8px;
    margin:0 5px;
    background:#000;
    text-indent:-9999em;
}
#ool .bhys{
    background:#fff;
}
#box>a{
    position: absolute;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color:rgba(0,0,0,.5);
    top:50%;
    margin-top:-25px;
    font-size:20px;
    color:#fff;
}
#left_btn{
    left:0;
}
#right_btn{
    right:0;
}


Js:


//首先呢,获取一下元素。获取ul与ol下的li标签
var oli_u=document.querySelectorAll("#oul li");
var oli_o=document.querySelectorAll("#ool li");
//这里定义一个隐藏函数,为了方便实现哪个ul下的li隐藏,哪个ol下的li无类名。
function hide(i)
{
    oli_o[i].className="";
    oli_u[i].style.display="none";
}
//这里定义一个显示函数,为了方便实现哪个ul下的li显示,哪个ol下的li有类名。
function show(i)
{
    oli_u[i].style.display="block";
    oli_o[i].className="bhys";
}
//这里定义一个index可以看做是一下元素下标的参考数。
var weizi=0;

for(var i=0;i<oli_o.length;i++){
    //为每个下方的图标元素添加索引。
    oli_o[i].index=i;
    //为每个下方的图标元素添加事件
    oli_o[i].onmouseover=function()
    {   //事件发生时,所有ul下的Li元素隐藏并且所有ol下的li没有类名
        //但是呢,我们给调用这个事件的元素添加类名,并且对应的ul下的li也显示。
        for(var i=0;i<oli_o.length;i++){
            hide(i);
        }
        this.className="bhys";
        oli_u[this.index].style.display="block";
        //同时,将调用事件的元素索引赋值给index
        weizi=this.index;
        //这里如果不理解为什么index要加 1 的话,就往下读.
        weizi++;
    }
}
//在设计自动播放时,我们需要理清一下思路,由于我们一打开轮播时,显示的是第一张图片
//与第一个图标,他们的下标都是0;所以我们再第一次自动切换的时候,index需要变成1,
//这时候第一次自动切换时,所有元素的下标都是1了,但是自动切换完之后还要再加1 ,也就是说
//当index永远都要比下标多1,index等于5的时候,下标是0。
function move(){
    //所有ul下的Li元素隐藏并且所有ol下的li没有类名
for(var i=0;i<oli_u.length;i++){
    hide(i);
}
//这里我们把index作为下标,判断index是否小于图标的个数,如果满足条件,各个元素对应的下标显示与添加类名
if(weizi<oli_o.length){
    show(weizi);
}
//如果不小于图标个数的话,也就是index比图标多了,那么我们将index重新赋值为0;这时候显示第一张图片。
else{
    weizi=0;
    show(weizi);
}
//这里我们给index加  1,实现index总是比下标多1.
weizi++;
}
//先手动调用一次,实现第一次显示
move();
//然后就是自动切换了。
setInterval("move()",4000);
//为左右按钮添加切换
function vary(symbol)
{//如果是右按钮的话,就执行一次正序切换
    if(symbol=="+"){
        move();
    }
    //如果是左按钮,就执行一次倒序切换
    else{
        //因为index总是比下标多1,所以当index等于 1 的时候,也就是下标等于0的时候。
        if(weizi==1)
        {
            weizi=oli_o.length-1;
            move();
        }
        else{
        //因为我们切换函数中没执行一次就要给index加1 ,所以我们如果要显示当前图片的上一章就是-2;因为index总是比下标多1
        weizi=weizi-2;
        move();
        }
    }
}


在用的时候,除了修改自动播放时间外,其他的,js代码都不需要改正,在HTML中添加图片和图标就行。


文章标签:javascript CSS

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/24.html)

评论:




作者动态

在物资条件下,精神世界开始变得非常重要,心理水平的提升与顽强斗志的结合,是追梦的必要条件。

标签列表