轮播图无缝滚动切换原理

基本框架

<div class="slide">
    <!-- 导航点 -->
     <ul class="slide-nav">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>
     <!-- /导航点 -->
     <!-- 轮播图 -->
     <div class="slide-content">
        <div class="slide-item">
            <img src="./img/1.jpg" alt="图片一">
        </div>
        <div class="slide-item">
            <img src="./img/2.jpg" alt="图片二">
        </div>
        <div class="slide-item">
            <img src="./img/3.jpg" alt="图片三">
        </div>
        <div class="slide-item">
            <img src="./img/4.jpg" alt="图片四">
        </div>
        <div class="slide-item">
            <img src="./img/5.jpg" alt="图片五">
        </div>
     </div>
     <!-- /轮播图 -->
     <!-- 按钮 -->
     <a href="javascript:void(0);" class="slide-btn prev"></a>
     <a href="javascript:void(0);" class="slide-btn next"></a>
     <!-- /按钮 -->
</div>

实现原理

1.将 div.slide-content 的宽度设置足够长，并设置 div.slide-item 的float属性，如下图：
JQuery 基础案例（3）—— jQuery实现轮播图无缝（无回滚）滚动切换效果
（给div.slide设置overflow: hidden，可以隐藏超出的内容）

2.将原div.slide-content中的html代码复制一份拼接到原html后面（使用append()），目的是实现动画过渡。
JQuery 基础案例（3）—— jQuery实现轮播图无缝（无回滚）滚动切换效果
3.初始化，将div.slide-content定位到复1的位置

4.div.slide-content使用jquery中的animate()方法实现滚动动画（改变left或right的值）

5.当div.slide-content定位从复4——>复5（复末）的时候，在执行玩过渡动画后，将div.slide-content定位到原5，再以此循环（由于原5和复5一样，所以这就可以实现无缝滚动切换的假象）
JQuery 基础案例（3）—— jQuery实现轮播图无缝（无回滚）滚动切换效果

6.当div.slide-content定位从原2——>原1的时候（导航按钮），也是在执行完过渡动画后，将div.slide-content从原1 重新定位到复1 不走动画。
JQuery 基础案例（3）—— jQuery实现轮播图无缝（无回滚）滚动切换效果

7.其他细节：在div.slide-content执行过渡的时候，禁用prev和next按钮的事件，不然的话无缝滚动切换的效果会露馅。（使用 is(‘:animated’) 可以判断元素是否在执行动画）

完整代码

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无缝切换轮播图</title>
    <link rel="stylesheet" href="./css/slide.css">
</head>
<body>

    <div class="slide">
        <!-- 导航点 -->
         <ul class="slide-nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
         </ul>
         <!-- /导航点 -->
         <!-- 轮播图 -->
         <div class="slide-content">
            <div class="slide-item">
                <img src="./img/1.jpg" alt="图片一">
            </div>
            <div class="slide-item">
                <img src="./img/2.jpg" alt="图片二">
            </div>
            <div class="slide-item">
                <img src="./img/3.jpg" alt="图片三">
            </div>
            <div class="slide-item">
                <img src="./img/4.jpg" alt="图片四">
            </div>
            <div class="slide-item">
                <img src="./img/5.jpg" alt="图片五">
            </div>
         </div>
         <!-- /轮播图 -->
         <!-- 按钮 -->
         <a href="javascript:void(0);" class="slide-btn prev"></a>
         <a href="javascript:void(0);" class="slide-btn next"></a>
         <!-- /按钮 -->
    </div>

    <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="./js/slide.js"></script>
    <script type="text/javascript"> $(function(){ $('.slide').slide(); }); </script>
</body>
</html>

CSS

*{margin: 0;padding: 0;}
li{list-style-type: none;}
.slide{ width: 640px; height: 400px; margin: 100px auto 0 auto; border: 5px solid #CCC; position: relative; overflow: hidden; }
/* 导航点 */
.slide .slide-nav{ position: absolute; z-index: 2; bottom: 10px; right: 10px; }
.slide .slide-nav>li{ width: 10px; height: 10px; border: 2px solid #CCC; border-radius: 50%; float: left; margin-left: 5px; cursor: pointer; }
.slide .slide-nav>li.active{ background-color: #FFF; border-color: #FFF; }
/* #导航点 */
/* 轮播内容 */
.slide .slide-content{ position: relative; z-index: 1; top: 0; width: 99999px; height: 400px; }
.slide .slide-content .slide-item{ float: left; width: 640px; height: 400px; }
.slide .slide-content .slide-item>img{ width: 100%; height: 100%; }
/* #轮播内容 */
/* 按钮 */
.slide .slide-btn{ display: block; width: 50px; height: 100px; position: absolute; z-index: 2; }
.slide .prev{ top: 0; bottom: 0; left: 0; margin: auto; background:url(../img/pre.png) no-repeat center center; }
.slide .next{ top: 0; bottom: 0; right: 0; margin: auto; background:url(../img/next.png) no-repeat center center; }
.slide a:hover{ background-color: rgba(0,0,0,0.5); }
/* #按钮 */

 $.fn.slide = function(){
    var slideEle = $(this);

    var slideContent = slideEle.find('.slide-content');
    var slideNavLi = slideEle.find('.slide-nav li');
    var slideWidth = slideEle.width(); //显示窗口宽度
    var timer = null;   //定时器
    var time = 2000;    //轮播图切换事件(毫秒)
    var index = 0;  //当前索引值
    var oldLength = slideEle.find('.slide-item').length;    //item初始长度
    var length = oldLength*2;   //item复制后的长度 

    init();

    //初始化
    function init(){
        //将item复制一份加入到原item的后面，形成:原1、原2、原3、原4、...原末、复1、复2、复3、复4...复末,并定位到复1项
        index = oldLength;
        slideContent.append(slideContent.html()).css({width:slideWidth*length,left:-slideWidth*index});

        //鼠标悬浮事件
        slideEle.hover(function(){  //移除定时任务
            clearInterval(timer);
        },function(){   //添加定时任务 
            setTimer();
        });

        //按钮点击事件
        slideEle.find('.prev').click(function(){
            if(!slideContent.is(':animated')){
                index--;
                change();
            }

        }).end()
        .find('.next').click(function(){
            if(!slideContent.is(':animated')){
                index++;
                change();
            }   
        });

        //导航点点击事件委托
        slideNavLi.click(function(event){
            index = $(event.target).index()+oldLength;
            change();
        });

        setTimer();
    }
    //设置定时器
    function setTimer(){
        timer = setInterval(function(){
            index++;
            change();
        },time);
    }

    function change(){
        changeSlide();
        changeNav();
    }

    //轮播图切换
    function changeSlide(){
/* if(slideContent.is(':animated')){ return; }*/
        slideContent.animate({left:-slideWidth*index},500,function(){
            //原1、原2、原3、原4、...原末、复1、复2、复3、复4...复末
            if(index <= 0){ 
                //当定位到原1时，在回调函数中将slideContent瞬间定位到复1
                index = oldLength;
                slideContent.css({left:-slideWidth*index});

            }
            if(index >=length-1){
                //当定位到复末时，在回调中将slideContent瞬间定位到原末
                index = oldLength-1;
                slideContent.css({left:-slideWidth*index}); 
            }
        });
    }
    //导航点切换
    function changeNav(){
        slideNavLi.removeClass('active').eq(index%oldLength).addClass('active');
    }

}

秒客网

JQuery 基础案例（3）—— jQuery实现轮播图无缝（无回滚）滚动切换效果

轮播图无缝滚动切换原理

实现原理

完整代码

相关文章