简单轮播图2（左右）

最新推荐文章于 2019-01-19 20:19:48 发布

R_March

最新推荐文章于 2019-01-19 20:19:48 发布

阅读量278

点赞数

分类专栏： js简单轮播图2 文章标签： js轮播图片

本文链接：https://blog.csdn.net/cainiao_xiao_bai/article/details/77856870

版权

js简单轮播图2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图3</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/轮播图3.css" />
        <script type="text/javascript" src="../js/basics.js"></script>
        <script type="text/javascript" src="../js/轮播图3.js"></script>
    </head>
    <body>
        <div id="box">
            <ul class="clear" id="list">
                <li>
                    <img src="../img/1504579720226.jpg" />
                </li>
                <li>
                    <img src="../img/1504579756992.jpg" />
                </li>
                <li>
                    <img src="../img/1504579814977.jpg" />
                </li>
                <li>
                    <img src="../img/1504579832741.jpg" />
                </li>
                <li>
                    <img src="../img/1504579877857.jpg" />
                </li>
            </ul>
            <div id="toPrev">&lt;</div>
            <div id="toNext">&gt;</div>
            <div id="sortNum">
                <ul>
                    <li class="active">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>

    </body>
</html>

CSS部分

#box{
    width: 600px;
    height: 400px;
    margin: 100px auto;
    border: solid 1px #2AABD2;
    position: relative;
    overflow: hidden;
}
#box ul{
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
#box #list li{
    float: left;
}
#box #list li img{
    height: 400px;
    width: 600px;
    display: block;
}

#toPrev{
    height: 100px;
    width: 50px;
    background: black;
    opacity:  0.3;
    filter: alpha(opacity = 30);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
    color: #FFF;
    font-size: 40px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
#toNext{
    height: 100px;
    width: 50px;
    background: black;
    opacity:  0.3;
    filter: alpha(opacity = 30);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -50px;
    color: #FFF;
    font-size: 40px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}


#sortNum{
    position: absolute;
    right: -43px;
    bottom: 20px;
    width: 200px;
    height: 20px;
}
#sortNum ul li{
    float: left;
    height: 20px;
    width: 20px;
    background: black;
    opacity:  0.3;
    filter: alpha(opacity = 30);
    color: #FFFFFF;
    text-align: center;
    line-height: 20px;
    margin-right: 5px;
    cursor: default;
}

#sortNum ul .active{
    background: yellow;
    opacity:  1;
    filter: alpha(opacity = 100);
    color: black;
}

js部分

window.onload = function(){
    var box = $('box');
    var toPrevBtn = $('toPrev');
    var toNextBtn = $('toNext');
    var oUl = $('list');
    oUl.appendChild(oUl.children[0].cloneNode(true));

    var lis = oUl.getElementsByTagName('li');
    var liWidth = lis[0].offsetWidth;

    oUl.style.width = lis.length*liWidth + 'px';

    var sortNumDiv = $('sortNum');
    var nLis = sortNumDiv.getElementsByTagName('li');

    var i = 0;

    var timer = setInterval(function(){
        i++;
        move();
    },1000);

    function move(){
        if(i < 0){   //如果图片移动到第一张之前
            oUl.style.left = -liWidth*(lis.length-1)+'px';
            i = lis.length-2;
        }
        if(i == lis.length){  //如果图片移动到最后一张之后
            oUl.style.left = 0 + 'px';
            i = 1;
        }

        animate(oUl,'left',liWidth*-i);

        if(i == nLis.length){ 

            nLis[0].className = 'active';

            for(var j = 1;j < nLis.length;j++){
                nLis[j].className = '';
            }
        }else{
            for(var j = 0;j < nLis.length;j++){
                if(j != i){
                    nLis[j].className = '';
                }else{
                    nLis[j].className = 'active';
                }
            }
        }
    }
    toPrevBtn.onclick = function(){
        i--;
        move();
    };
    toNextBtn.onclick = function(){
        i++;
        move();
    };

    //鼠标放在数字键上
    for(var k = 0;k < nLis.length;k++){
        nLis[k].index = k;
        nLis[k].onmouseover = function(){
            i = this.index;
            move();
        };

    }
//  //鼠标放在数字键上二（不能让这样用因为排序和包含块的时间会子鼠标移除排序框时，多次触发，导致混乱）
//  for(var k = 0;k < nLis.length;k++){
//      nLis[k].index = k;
//      nLis[k].onmouseover = function(){
//          i = this.index;
//          move();
//          clearInterval(timer);
//      };
//      
//      nLis[k].onmouseout = function(){
//          
//          timer = setInterval(function(){
//              i++;
//              move();
//          },1000);
//      };
//  }
//  

    //鼠标放在盒子上停止运动，离开继续运动
    box.onmousemove = function(){
        clearInterval(timer);
    };
    box.onmouseout = function(){
        timer = setInterval(function(){
        i++;
        move();
        },1000);
    };
//  

};

效果
图片会轮播，点击序号框会滑到指定图片，点击向左向右可翻页

注意点：
1、克隆第一子节点，ul设置为相对定位，ul的宽度为所有li宽度之和
2、当图片被点击到第一张图片之前的位置，采用了非动画的方式直接将ul的left的值设置为-（图片的张数-1）*图片宽度，符号表示向右移动（既移动到最后一张图片的位置），然后将i的值设置为i-2既从倒数第二张图片

3、如果移动到最后一张图片之后则将ul的left值设为0，将i设置为1，既从第二张图片开始轮播
4、排序框的改变这里是通过设置元素的class名实现的
5、因为这里的向左和向右的div是设置在box上的，而在box上设置了鼠标移入就停止定时器，所以点击向左和向右时不需要再让定时器停止。如他们设置在box的外部，则需要设置停止定时器，并在离开时在开启
6、向左既将i的值减小，向右既将i的值增大，然后再继续执行

R_March

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图2（左右）

HTML部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮播图3</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> <link rel="styleshee
复制链接

扫一扫