web的几种轮播

我们在开发当中经常用到轮播。我在这里总结了一下几种，仅供参考：

第一种：

　　1、jQuery：用display ：none/block控制的一种轮播；

// CSS部分
#igs {
    margin: 30px auto;
    width: 1200px;
    height: 460px;
    position: relative;
}
         
.ig {
    position: absolute;
}
         
#tabs {
    position: absolute;
    list-style: none;
    background-color: rgba(255,255,255,.5);
    left: 500px;
    bottom: 10px;
    border-radius: 10px;
    padding: 5px 0 5px 5px;
}
         
.tab{
    float: left;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    overflow: hidden;
    margin-right: 4px;
    border-radius: 100%;
    background-color: rgb(200,100,150);
}
        
.tab.active{
    background-color: red;
    color: #fff;
}

.btn{
    position: absolute;
    top: 200px;
    width: 40px;
    color: #fff;
    height: 100px;
    background-color: rgba(255,255,255,.3);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    margin: 0 5px;
}
         
.btn2{
    position: absolute;
    right: 0px;
}
         
.btn:hover{
    background-color: rgba(0,0,0,.7);
}

// HTML部分
        <div id="igs">
              <a class="ig" href="#">1<img src="images/slider-1.jpg"/></a>
              <a class="ig" href="#">2<img src="images/slider-2.jpg"/></a>
              <a class="ig" href="#">3<img src="images/slider-3.jpg"/></a>
              <a class="ig" href="#">4<img src="images/slider-4.jpg"/></a>
              <a class="ig" href="#">5<img src="images/slider-5.jpg"/></a>
              <div class="btn btn1"><</div>
              <div class="btn btn2">></div>
              <ul id="tabs">
                  <li class="tab active">1</li>
                  <li class="tab">2</li>
                  <li class="tab">3</li>
                  <li class="tab">4</li>
                  <li class="tab">5</li>
              </ul>
        </div>

// JavaScript部分
            //定义全局变量和定时器
            var i = 0 ;
            var timer;
             
            $(function(){
                  //用jquery方法设置第一张图片显示，其余隐藏
　　　　　　　　　　 // $("#igs a:not(:first-child)").hide()；这样操作的话可以把a链接里面的class取消掉
                  $('.ig').eq(0).show().siblings('.ig').hide();
                   
                  //调用showTime()函数（轮播函数）
                  showTime();
               
                  //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
                  $('.tab').hover(function(){
                      //首先清除时间函数
                    clearInterval(timer);
                    //获取当前i的值，调用轮播函数
                    i = $(this).index();
                    Show();
                  },function(){
                       //鼠标离开时开启时间函数
                    showTime();
                  });
               
                //鼠标点击左侧的箭头
                $('.btn1').click(function(){
                    clearInterval(timer);
　　　　　　　　　　　　i--;
                    if(i == 0){
                        //注意此时i的值
                          i = $('.ig').length;
                    }
                    Show();
                    showTime();
                });
               
                //鼠标点击右侧的箭头
                $('.btn2').click(function(){
                    clearInterval(timer);
　　　　　　　　　　　　i++;
                    if(i == $('.ig').length - 1){
                        //当图片是最后一张时，点击右箭头，
                          i = -1;
                    }
                    Show();
                    showTime();
                });
            });
             
             
            //创建一个showTime函数
            function showTime(){
                  //设置定时器
                  timer = setInterval(function(){
                    //调用一个Show()函数
                    Show();
                    i++;
                    //当图片是最后一张的后面时，设置图片为第一张
                    if(i == 5){
                          i = 0;
                    }
                  },2000);
            }
             
            //创建一个Show函数
            function Show(){
                  //在这里可以用其他jquery的动画
                  $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
               
                  //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
                  $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
            }

 　　2、Javascript：用display ：none/block控制的一种轮播；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    .container{
        width:1130px;
        height:500px;
        margin:0 auto;
        position:relative;
    }
    .inner{
        width:1130px;
        height:500px;
    }
    .inner-img{
        width:1130px;
        height:500px;
        display: none;
        position:absolute;
        top:0;
        left:0;
        z-index:1;
    }
    .inner-img.active{
        display: block;
    }
    .leftBtn,.rightBtn{
        position:absolute;
        width:40px;
        height:60px;
        background:rgba(0,0,0,0.3);
        font-size: 30px;
        color:#fff;
        text-align: center;
        line-height: 60px;
        cursor:pointer;
        z-index: 11;
        display:none;
    }
    .leftBtn{
        left:5px;
        top:200px;
    }
    .rightBtn{
        right:5px;
        top:200px;
    }
    .container ul{
        position:absolute;
        left:520px;
        bottom:10px;
        z-index: 11;
        list-style: none;
        width:100px;
        height:20px;
    }
    .container ul .page{
        float:left;
        width:18px;
        height:18px;
        border-radius:18px;
        background: black;
        margin-right: 6px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
    }
    .container ul .page.active{
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">
            <a href="#" class="inner-img active"><img src="images/TB1.Ez0IVXXXXcbXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a>
            <a href="#" class="inner-img"><img src="images/TB1dpJtJFXXXXXsXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a>
            <a href="#" class="inner-img"><img src="images/TB14aRbJFXXXXagXVXXXXXXXXXX-1130-500.jpg_q100.jpg" alt=""></a>
            <a href="#" class="inner-img"><img src="images/TB15AHZIVXXXXX7XFXXSutbFXXX.jpg_q100.jpg" alt=""></a>
        </div>
        <div class="leftBtn">&lt;</div>
        <div class="rightBtn">&gt;</div>
        <ul>
            <li class="page active">1</li>
            <li class="page">2</li>
            <li class="page">3</li>
            <li class="page">4</li>
        </ul>
    </div>
    <script>
    var container = document.getElementsByClassName('container')[0],
    // 获取所有包含图片的链接
        innerImg = document.getElementsByClassName('inner-img'),
    // 获取左右按钮
        btnL = document.getElementsByClassName('leftBtn')[0],
        btnR = document.getElementsByClassName('rightBtn')[0],
        // 获取分页器
        page = document.getElementsByClassName('page'),
        // 声明变量
        num = 0;
    // 声明时间控制函数
    var timer = setInterval(moveR, 1000);
    // 图片向右轮播
    function moveR() {
        // 变量每1000毫秒递增一次,图片向右轮播
        num++;
        // 如果是最后一张图片的时候从0开始显示
        if (num == innerImg.length) {
            num = 0;
        }
        move();
    };

    // 图片向左轮播
    function moveL() {
        // 每调用一次moveL(),变量递减一次
        num--;
        // 如果是第一张图片，则从最后一张图片开始显示
        if (num == -1) {
            num = innerImg.length - 1;
        };
        move();
    }
　　
　　 // 图片切换
　　 function move(){

 　　　　// 把所有的innerImg隐藏和page背景全部变成黑色
        for (var i = 0; i < innerImg.length; i++) {
            innerImg[i].style.display = 'none';
            page[i].style.background = 'black';
        }
        // 把当前num下标的innerImg显示和page背景变成red
        innerImg[num].style.display = 'block';
        page[num].style.background = 'red';

　　 }

    // 分页器鼠标滑过时图片切换
    for (var i = 0; i < page.length; i++) {
        // 用来保存下标，page[i].index == 0 / 1 / 2 / 3
        page[i].index = i; 
        // console.log(page[i].index);
        // 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3]
        page[i].onmouseover = function() {
            for (var j = 0; j < page.length; j++) {
                page[j].style.background = 'black';
                innerImg[j].style.display = 'none';
            }
            this.style.background = 'red';
　　　　　　　// console.log(this.index);可以查看是多少
            innerImg[this.index].style.display = 'block';
            num = this.index;
        }
    }
    btnL.onclick = function() {
        moveR();
    }
    btnR.onclick = function() {
        moveL();
    }

    // 鼠标划上container时让左右按钮显示
    container.onmouseover = function() {
        // 清除时间函数
        clearInterval(timer);
        btnR.style.display = 'block';
        btnL.style.display = 'block';
    }

    // 鼠标离开container时让左右按钮隐藏
    container.onmouseout = function() {
        // 开启时间函数
        timer = setInterval(moveR, 3000);
        btnR.style.display = 'none';
        btnL.style.display = 'none';
    }
    </script>
</body>
</html>

 

第二种：

　　1、用jQuery实现的跑马灯效果；

　　HTML：

    <div class="container">
        <div class="inner-img">
            <div class="img"><img src="img/1.jpg" height="100%" width="100%" alt="" /></div>
            <div class="img"><img src="img/2.jpg" height="100%" width="100%" alt="" /></div>
            <div class="img"><img src="img/3.jpg" height="100%" width="100%" alt="" /></div>
            <div class="img"><img src="img/4.jpg" height="100%" width="100%" alt="" /></div>
            <div class="img"><img src="img/5.jpg" height="100%" width="100%" alt="" /></div>
            <div class="img"><img src="img/6.jpg" height="100%" width="100%" alt="" /></div>
        </div>
        <div class="btn-left">&lt;</div>
        <div class="btn-right">&gt;</div>
    </div>

　　CSS：

.container{
    width: 1000px;
    height: 300px;
    border: 1px solid #666;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.inner-img{
    /*如果显示是五张图片，这里必须要等于 + 一张图片的width*/
    width: 1200px;
    height: 300px;
    background-color: #ccc;
    position: absolute;
    left: 0;
    top: 0;
}
.img{
    width: 200px;
    height: 100%;
    float: left;
    font-size: 50px;
    text-align: center;
    line-height: 300px;
    padding: 20px;
    box-sizing: border-box;
    /*overflow: hidden;*/
}
.btn-left,.btn-right{
    width: 30px;
    height: 60px;
    color: #fff;
    background: #000;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    opacity: 0.5;
    display: none;
}
.btn-left{
    position:absolute;
    left: 0px;
    top: 120px;
}
.btn-right{
    position:absolute;
    right: 0px;
    top: 120px;
}

　　JavaScript：

// 可以把整个代码封装成一个函数，后期可以传参，用来控制一次可以切换几张图片
$(document).ready(function() {
    // 获取包含图片的盒子的宽度
    var imgW = $(".img").outerWidth();
    // 指定计时器
    var t = setInterval(moveL, 2000);

    function moveL() {
        /*
         *.stop()：停止当前正在运行的动画，表示两个参数都是false；
         *.stop(true，true)：停止被选元素的所有加入队列的动画，但允许完成当前动画。
         */
        $(".inner-img").stop(true, true);
        /*
         *1、首先将inner-img的left: 0转换为left：-200px
         *2、将inner-img的第一个子元素appendTo()到inner-img里面
         *3、再次设置inner-img的left：-200px;
         */
        $(".inner-img").animate({
            left: -imgW
        }, function() {
            // 讲已经切换到-200px的第一张图片appendTo到父元素里面，这也是跑马灯效果的秘诀
            $(".inner-img > .img").first().appendTo($(".inner-img"));
            $(".inner-img").css({
                left: 0
            });
        })
    };
    // 向右的轮播
    function moveR() {
        $(".inner-img").stop(true, true);
        $(".inner-img").css({
            left: -imgW
        });
        $(".inner-img > .img").last().prependTo($(".inner-img"));
        $(".inner-img").animate({
            left: 0
        });
    };
    // 鼠标滑上，滑下效果
    $(".container").hover(function() {
        // 当鼠标滑过父容器时清除时间函数
        clearInterval(t);
        // 并且将左右按钮显示出来
        $(".btn-left").add(".btn-right").fadeIn(50);
    }, function() {
        // 当鼠标滑过父容器时开启时间函数
        t = setInterval(moveL, 2000);
        // 并且将左右按钮隐藏
        $(".btn-left").add(".btn-right").fadeOut(50);
    });
    // 点击左边的按钮向右切换图片
    $(".btn-left").click(function() {
        moveR();
    });
    // 点击右边的按钮向左切换图片
    $(".btn-right").click(function() {
        moveL();
    })
});

 

　　2、用JavaScript实现的跑马灯效果；

第三种：

　　1、用jQuery实现的无缝轮播

 　　HTML：

        <div class="banner">
            <ul class="img">
                <li><a href=""><img src="img/1.jpg" alt="" /></a></li>
                <li><a href=""><img src="img/2.jpg" alt="" /></a></li>
                <li><a href=""><img src="img/3.jpg" alt="" /></a></li>
                <li><a href=""><img src="img/4.jpg" alt="" /></a></li>
                <li><a href=""><img src="img/5.jpg" alt="" /></a></li>
            </ul>
            <ul class="page"></ul>
            <div class="btn btn_l">&lt;</div>
            <div class="btn btn_r">&gt;</div>
        </div>

　　CSS：　　

* {
    padding: 0px;
    margin: 0px;
    list-style: none;
    font-family: "微软雅黑";
}

.banner {
    width: 740px;
    height: 350px;
    margin: 100px auto;
    border: 1px solid #808080;
    position: relative;
    overflow: hidden;
}

.banner .img {
    width: 5000px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.banner .img li {
    width: 740px;
    height: 350px;
}

.banner .img li a {
    display: block;
    width: 100%;
    height: 100%;
}

.banner .img li {
    float: left;
}

.banner .page {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0px;
    text-align: center;
    font-size: 0px;
}

.banner .page li {
    width: 20px;
    height: 20px;
    background-color: #888;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 3px;
    cursor: pointer;
    color: #fff;
}

.banner .page li.active {
    background-color: #ff6a00;
}

.banner .btn {
    width: 30px;
    height: 50px;
    background-color: #808080;
    opacity: 0.5;
    filter: alpha(opacity:0.5);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    cursor: pointer;
    text-align: center;
    line-height: 50px;
    font-size: 40px;
    color: #fff;
    display: none;
}

.banner .btn_l {
    left: 0px;
}

.banner .btn_r {
    right: 0px;
}

.banner:hover .btn {
    display: block;
}

　　JavaScript：

            $(function() {
                //声明当前图片的索引值
                var num = 0;
                //克隆第一张图片
                var clone = $('.img li').first().clone();
                //获取图片的宽度
                var imgW = $('.img li').first().width();
                //将第一张图片插入到img容器里面里面
                $('.banner .img').append(clone);
                //获取插入之后li的个数
                var size = $('.img li').size();
                //动态的根据图片数量创建分页器并且插入到num里面
                for(var i = 0; i < size - 1; i++) {
                    $('.page').append('<li></li>');
                }
                //给创建的分页器的第一个添加active的类
                $('.page li').first().addClass('active');
                //创建一个时间函数用来控制图片切换的方式
                var timer = setInterval(function() {
                    num++;
                    move();
                }, 1000);

                //move函数
                function move() {
                    if(num == size) {
                        //当运动到最后一张图片时，重置整个img到left：0的位置
                        $('.banner .img').css({
                            left: 0
                        });
                        num = 1;
                    }

                    //点击右边按钮时
                    if(num == -1) {
                        $('.img').css({
                            left: -(size - 1) * imgW
                        })
                        num = size - 2;
                    }

                    //随着num的递增，img容器以animate的方式向左移动-imgW * num的距离
                    $('.banner .img').stop().animate({
                        left: -imgW * num
                    }, 500);

                    //当num等于图片数量时，选取第一个分页器设置样式，否则，等于当前按照num设置分页器的样式。
                    if(num == size - 1) {
                        $('.page li').eq(0).addClass('active').siblings().removeClass('active');
                    } else {
                        $('.page li').eq(num).addClass('active').siblings().removeClass('active');
                    }
                };
                
                //点击分页器
                $('.page li').click(function(){
                    //获取到当前分页器的下标并且赋值给当前图片的下标
                    num = $(this).index();
                    move();
                })
                
                //点击右按钮时向右切换图片
                $('.btn_r').click(function() {
                    num--;
                    move();
                })

                //点击左边按钮时切换图片
                $('.btn_l').click(function() {
                    num++;
                    move();
                })

                //鼠标滑过banner容器时
                $('.banner').hover(function() {
                    //首先清除时间函数
                    clearInterval(timer);
                }, function() {
                    //鼠标离开时调用时间函数
                    timer = setInterval(function() {
                        num++;
                        move();
                    }, 1000)
                })
            })

 

　　2、用js实现的无缝轮播

　　HTML：

        <div class="win">
            <a href="javascript:;"><img src="img/1.jpg" title=""></a>
            <a href="javascript:;"><img src="img/2.jpg" title=""></a>
            <a href="javascript:;"><img src="img/3.jpg" title=""></a>
            <a href="javascript:;"><img src="img/4.jpg" title=""></a>
            <a href="javascript:;"><img src="img/5.jpg" title=""></a>
            <div class="btn">
                <div class="btnL">&lt;</div>
                <div class="btnR">&gt;</div>
            </div>
            <ul class="circle">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

　　css：

.win{
    height: 350px;
    width: 740px;
    margin: 20px auto;
    position: relative;
     overflow: hidden; 
}
.win a{
    position: absolute;
    top: 0;
    left: 0;
}
.btn{
    width: 740px;
    height: 70px;
    font-size: 30px;
    line-height: 70px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -35px;
}
.btn .btnL, .btn .btnR{
    width: 35px;
    height: 70px;
    font-size: 30px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    float: left;
    background: black;
    opacity: 0.5;
    filter:alpha(opacity:50);
    cursor: pointer;
}
.btn .btnL{
    float: left;
}
.btn .btnR{
    float: right;
}  
.circle{
    height: 15px;
    width: 90px;
    margin-left: 5px;
    float: left;
    position: absolute;
    left: 50%;
    margin-left: -33px;
    bottom: 10px;
    z-index: 12;
}
.circle li{ 
    height: 15px;
    width: 15px;
    background: #ccc;
    opacity: 0.5;
    filter:aplha(opacity:50);
    border-radius: 50%;
    margin-left: 3px;
    float: left;
}
.circle li.active{
    background: #e40077;
}

　　JavaScript：

        <script type="text/javascript">
            window.onload = function(){
                // 最大的容器
                var win = document.getElementsByClassName('win')[0];
                // 包含图片的a链接
                var as = win.getElementsByTagName('a');
                // 分页器
                var lis = document.getElementsByClassName('circle')[0].getElementsByTagName('li');
                //获取图片的尺寸
                var widths = parseInt(as[0].clientWidth);
                // 左右的按钮
                var btnL = win.getElementsByClassName('btnL')[0];
                var btnR = win.getElementsByClassName('btnR')[0];
                //定义双下标
                var num = 0;
                var next = 0;
                // 设定开关，如果当前动画没有完成，则停止操作到当前动画完成
                var flag = true;

                // 首先初始化所有图片的位置，但是将第一张图片就位到left：0的位置
                for (var i = 0; i < as.length; i++) {
                    // 跳过本次循环
                    if (i == 0) {
                        continue;
                    };
                    as[i].style.left = widths + 'px';
                };

                // 设定时间函数，每隔两秒动画一次
                var timer = setInterval(moveL, 2000);

                // 向左切换的函数
                function moveL(){
                    next++;
                    // 如果是最后一张图片，从第一张图片开始
                    if(next == as.length){
                        next = 0;
                    }
                    // 让下一张图片到右边就为准备
                    as[next].style.left = widths + 'px';
                    // 将当前分页器的样式取消，加给下一张图片
                    lis[num].className = '';
                    lis[next].className = 'active';
                    //动画：让当前的图片到左边去
                    animate(as[num], {
                        left: -widths
                    });
                    // //动画：下一张图片放到当前的位置
                    animate(as[next], {
                        left: 0 
                    }, function(){
                        flag = true;
                    })
                    // 更新下标
                    num = next;
                }

                // 想左切换的函数
                function moveR(){
                    next--;
                    // 如果是第一张图片，从最后一张图片开始。
                    if(next == -1){
                        next = as.length - 1;
                    }
                    // 让下一张图片到左边定位边就为准备
                    as[next].style.left = -widths + 'px';
                    lis[num].className = '';
                    lis[next].className = 'active';
                    // 动画：让当前的图片到右边去
                    animate(as[num], {
                        left: widths
                    })
                    // 动画：让下一张图片到当前的位置
                    animate(as[next], {
                        left: 0
                    }, function(){
                        flag = true;
                    });
                    // 更新下标
                    num = next;
                }

                // 分页器切换图片
                for (var i = 0; i < lis.length; i++) {
                    // 保存下标lis[i].index == i，方便后期给每个lis添加点击事件
                    lis[i].index = i;
                    // 给每个lis添加点击事件
                    lis[i].onclick = function(){
                        for(var j = 0; j < lis.length; j++){
                            // 如果点击的是当前一张图片，即num == this.index；不能切换图片
                            if (num == this.index) {
                                return;
                            };
                            // 让当前的下标的图片就位到右边
                            as[this.index].style.left = widths + 'px';
                            lis[num].className = '';
                            lis[this.index].className = 'active';
                            // 将当前的一张移动到left：-width的位置
                            animate(as[num], {
                                left: -widths
                            });
                            // 将符合下标的一张图片移动到left：0的位置
                            animate(as[this.index], {
                                left: 0
                            })
                            // 更新下标
                            num = this.index;
                        }
                    }
                };

                // 点击右边向想左移动
                btnR.onclick = function(){
                    if (flag) {
                        flag = false;
                        moveL();
                    }
                }

                // 点击左边向想左移动
                btnL.onclick = function(){
                    if (flag) {
                        flag = false;
                        moveR();
                    }
                }

                // 鼠标滑过win时清除时间函数
                win.onmouseover = function() {
                    clearInterval(timer);
                };

                // 鼠标离开win时开启时间函数
                win.onmouseout = function() {
                    timer = setInterval(moveL, 2000);
                };
            }
        </script>

 

 

 

。