jQuery制作无缝轮播效果

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery制作无缝轮播效果相关的知识，希望对你有一定的参考价值。

【一】html结构　

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery制作无缝轮播器</title>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div class="cont">
        <div class="imgcont">
            <ul class="img">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <ul class="num"></ul>

        <span class="btn btnL">&lt;</span>
        <span class="btn btnR">&gt;</span>
    </div>
</body>
</html>

 

【二】css样式

*{
    margin: 0;
    padding: 0;
}
.cont{
    position: relative;
    width: 600px;
    height: 300px;
    padding: 10px;
    border: 1px solid #333;
    margin: 150px auto;
    box-sizing: border-box;
    .imgcont{
        position: relative;
        width: 578px;
        height: 278px;
        overflow: hidden;
        border: 1px solid #333;
        .img{
            position: absolute;
            top: 0;
            left: 0;
            width: 2500px;
            list-style: none;
            overflow: hidden;
            li{
                float: left;
            }
            li:nth-child(1){background-color: #c6a0a0;}
            li:nth-child(2){background-color: #666;}
            li:nth-child(3){background-color: #CC4A4A;}
            li:nth-child(4){background-color: #c6a0a0;}
        }
    }
    .btn{
        width:30px; 
        height:60px; 
        background:rgba(0,0,0,0.5); 
        position:absolute; 
        top:50%; 
        margin-top:-25px; 
        cursor:pointer; 
        text-align:center; 
        line-height:60px; 
        color:#fff; 
        font-size:40px; 
        font-family:"宋体"; 
        // display:none;
    }
    .btnL{
        left: 20px;
    }
    .btnR{
        right: 20px;
    }
    .num{
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -40px;
        li{
            width: 10px;
            height: 10px;
            list-style: none;
            float: left;
            margin-right: 10px;
            border-radius: 5px;
            background-color: #888;
        }
        .on{
            background-color: #ccc;
        }
    }
}

 

【三】jQuery效果

  1. 完整代码 
    【详细代码，直观，容易理解，但代码量比较大】
$(function(){
    var index = 0;//保存当前图片的下标
    //给轮播器的图片添加宽高，使其宽高与图片容器（imgcont）的宽高一致
    var $width = $(".imgcont").width();
    var $heigth = $(".imgcont").height();
    $(".img > li").width($width).height($heigth);

    // 复制第一个图片到最后一个图片的后面
    var $clone = $(".img > li").first().clone();
    $(".img").append( $clone );

    //添加底部圆点
    var $size = $(".img > li").size();
    for( var j=1; j < $size; j++ ){
        $(".num").append("<li></li>")
    }

    // 自动轮播效果
    var timer = setInterval(function(){
        index++;
        if( index == $size ){
            $(".img").css( { left: 0 } );
            index = 1;
        }
        $(".img").stop(true,false).animate({left:-index*$width},300);
        if( index == $size-1 ){
            $(".num > li").eq(0).addClass("on").siblings().removeClass("on");
        }else{
            $(".num > li").eq(index).addClass("on").siblings().removeClass("on");
        }
    },2000)

    // 鼠标划入取消自动轮播
    $(".cont").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            index++;
            if( index == $size ){
                $(".img").css( { left: 0 } );
                index = 1;
            }
            $(".img").stop(true,false).animate({left:-index*$width},300);
        },2000)
    })

    // 圆点划入的轮播效果
    $(".num li").first().addClass("on");
    $(".num > li").hover(function(){
        var $index = $(this).index();
        index = $index;
        $(".img").stop(true,false).animate({left:-index*$width},300); //stop(true,false)将未执行的动画队列清空，但不将正在执行的动画跳转到末状态
        $(this).addClass("on").siblings().removeClass(‘on‘);
    })

    // 左右按钮的轮播效果
    $(".btnL").click(function(){
        index++;
        if( index == $size ){
            $(".img").css( { left: 0 } );
            index = 1;
        }
        $(".img").stop(true,false).animate({left:-index*$width},300);
        if( index == $size-1 ){
            $(".num > li").eq(0).addClass("on").siblings().removeClass("on");
        }else{
            $(".num > li").eq(index).addClass("on").siblings().removeClass("on");
        }
    })
    $(".btnR").click(function(){
        index--;
        if( index == -1 ){
            $(".img").css({left:-($size-1)*$width});
            index = $size - 2;
        }
        $(".img").stop(true,false).animate({left:-index*$width},300);
        if( index == $size-1 ){
            $(".num > li").eq(0).addClass("on").siblings().removeClass("on");
        }else{
            $(".num > li").eq(index).addClass("on").siblings().removeClass("on");
        }
    })
})

     

  2. 精简代码 
    //【精简版代码】
$(function(){
    var index = 0;
    var $width = $(".imgcont").width();
     var $heigth = $(".imgcont").height();
     $(".img > li").width($width).height($heigth);
    var $clone = $(".img > li").first().clone();
     $(".img").append( $clone );
     var $size = $(".img > li").size();
     for( var j=1; j < $size; j++ ){
         $(".num").append("<li></li>")
     }

     //自动轮播
     var timer = setInterval(function(){
        index++;
        move();
    },2000)

    // 鼠标划入取消自动轮播
     $(".cont").hover(function(){
         clearInterval(timer);
     },function(){
         timer = setInterval(function(){
             index++;
             move();
         },2000)
     })
     // 圆点划入的轮播效果
     $(".num li").first().addClass("on");
     $(".num > li").hover(function(){
         var $index = $(this).index();
         index = $index;
         $(".img").stop(true,false).animate({left:-index*$width},300); 
         $(this).addClass("on").siblings().removeClass(‘on‘);
     })

     //     // 左右按钮的轮播效果
     $(".btnL").click(function(){
         index++;
         move();
     })
     $(".btnR").click(function(){
         index--;
         move();
     })

     function move(){
         if( index == $size ){
             $(".img").css( { left: 0 } );
             index = 1;
         }
         if( index == -1 ){
             $(".img").css({left:-($size-1)*$width});
             index = $size - 2;
         }
         $(".img").stop(true,false).animate({left:-index*$width},300);
         if( index == $size-1 ){
             $(".num > li").eq(0).addClass("on").siblings().removeClass("on");
         }else{
             $(".num > li").eq(index).addClass("on").siblings().removeClass("on");
         }
     }

})

     

以上是关于jQuery制作无缝轮播效果的主要内容，如果未能解决你的问题，请参考以下文章

每天学一个jquery插件-无缝的轮播

jQuery----无缝轮播图

jQuery无缝轮播图思路详解-唯品会

jquery简单无缝轮播图实现

jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点

jquery图片轮播思路