phpstudy集成环境

 首页 > jQuery无差别循环滚动轮播图实现原理

jQuery无差别循环滚动轮播图实现原理

想学习一下轮播图的实现原理，就是那种左右滚动，可以无限循环，而且每个切换都是一样的，没有任何差别。不知道有哪位师兄师姐可以回答一下，谢谢！！！

使用绝对定位，比如轮播图width=100px，给图片排个序，记录当前的图片序号，所有隐藏的图片left=100px,显示的那张图片left=0，下一张时，就把找到下一个图片，把图片的left改成0

首先， 轮播图在html页面来说最重要的就是切换过程 。
目前比较简单的实现方法就是
第一张图和最后一张图一样。
这样当用户拖动到最后一张但是又没完全拖完整的时候，就会显示第一张的效果。
会造成一种循环的错觉。 当他拖到最后一张的时候，你就重置轮播图序列就行 。

关系到他的序列号，可以加我QQ，教你思路280342445

自己用jQuery实现的简易幻灯片轮播
过程:图片li相对ul定位,setInterval定时切换,用jQuery的hide隐藏当前active图片,show显示next下一张图片.下一张图片不存在,则重新显示li:first第一张图片.如果需要jQuery提供的淡入淡出效果,可以用fadeIn取代show,用fadeOut取代hide.如果需要jQuery的滑动效果,则可以用slideDown取代show,用slideUp取代hide.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Easy Slider</title>
<style>
* {
    margin: 0;
    padding: 0;
}
img {
    border: none;
}
#slider {
    overflow: hidden;
    width: 220px;
    height: 160px;
    border: 3px solid #EEE;
    padding: 1px;
    margin: 40px auto 0;
}
#slider li {
    position: relative;
    left: 0;
    top: 0;
    list-style: none;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    slider('#slider');
});
function slider(id) {
    fir = $(id + ' li:first');
    fir.addClass("active");
    $(id + ' li').not(':first').hide();
    setInterval(function () {
        act = $(id + ' li.active');
        if(act.next().val() != undefined) {
            act.hide(0, function() {
                act.next().show();
                act.removeClass("active");
                act.next().addClass("active");
            });
        } else {
            act.hide(0, function() {
                fir.show();
                act.removeClass("active");
                fir.addClass("active");
            });
        }
    }, 2000);
}
</script>
</head>
<body>
<ul id="slider">
    <li><a href="./1"><img src="1.png" /></a></li>
    <li><a href="./2"><img src="2.png" /></a></li>
    <li><a href="./3"><img src="3.png" /></a></li>
    <li><a href="./4"><img src="4.png" /></a></li>
</ul>
</body>
</html>

http://cmstop.com/ 首页幻灯片的 addChangeEvent 函数实现了基于jQuery的图片轮播:
http://source.cmstop.com/templates/2013/js/index.js

// 首页幻灯片
$(function(){
    $(".homebanner1 .nums").find("li:first").addClass("curr");
    function loadImage(url, callback)
    {
        var img = new Image(); //创建一个Image对象，实现图片的预下载
        img.src = url;

        if (img.complete)
        { // 如果图片已经存在于浏览器缓存，直接调用回调函数
            callback.call(img);
            return; // 直接返回，不用再处理onload事件
        }
        img.onload = function ()
        { //图片下载完毕时异步调用callback函数。
            callback.call(img);//将回调函数的this替换为Image对象
        };
    };

    var img_count = $(".homebanner1 .imgs").find("img").length;

    var transitionAutoChange = function(activePos) {
        if (typeof activePos === 'undefined') activePos = 0;
        var pos = activePos + 1;
        if (pos >= img_count) {
            pos = 0;
        }
        $(".homebanner1 .nums li").eq(pos).trigger('click');
    };
    function addChangeEvent()
    {
        var transitionTimeOut = false;
        var transitionInterval = false;
        var transitioning = false;
        $(".homebanner1 .imgs li").eq(0).addClass('active');
        transitionInterval = setInterval(transitionAutoChange, 7000);

        $(".homebanner1 .nums li").bind("click", function(){
            clearInterval(transitionInterval);
            var pos = $(".homebanner1 .nums li").index(this);
            var activePos = $(".homebanner1 .nums li").index($(".homebanner1 .nums .curr"));
            if (pos == activePos) return ;
            if (transitioning) return;
            transitioning = true;

            var colorArr = ['#010001', '#006dce', '#2932a1', '#38aa30'];
            var color = colorArr[pos];
            $('.banner').stop().animate({backgroundColor: color});

            var active = $(".imgs li").eq(activePos);
            var next = $(".imgs li").eq(pos);
            if (!next[0]) {
                transitioning = false;
                return;
            }
            if (supportsTransitions()) {
                active.fadeTo(600,0.1,function(){
                    active.css('opacity', 1);
                });
            }
            if (pos > activePos) {
                var type = "next";
            } else {
                var type = "prev";
            }

            var direction = type == 'next' ? 'left' : 'right';
            next.addClass(type);
            next[0].offsetWidth;// force reflow
            active.addClass(direction);
            next.addClass(direction);
              $(".homebanner1 .nums li").eq(activePos).removeClass('curr');
            $(".homebanner1 .nums li").eq(pos).addClass('curr');
            clearTimeout(transitionTimeOut);
            if (supportsTransitions()) {
                transitionTimeOut = setTimeout(function(){
                      next.removeClass([type, direction].join(' ')).addClass('active');
                      active.removeClass(['active', direction].join(' '));
                      transitionInterval = setInterval(function(){
                          transitionAutoChange(pos);
                      }, 5000);
                      transitioning = false;
                }, 1000);
            } else {
                transitionTimeOut = setTimeout(function(){
                    active.removeClass(['active', direction].join(' ')).css({opacity: 0});
                    next.css({opacity:0}).animate({opacity:1},2000, function(){
                        next.removeClass([type, direction].join(' ')).addClass('active');
                        transitionInterval = setInterval(function(){
                              transitionAutoChange(pos);
                          }, 5000);
                        transitioning = false;
                    });
                }, 100);
            }
        });
    };

    $(".homebanner1 .imgs").find("img").each(function(i){
        var _this = $(this);
        var url = _this.attr("data-src");
        loadImage(url, function(){
            _this.attr("src", url);
            if ((i + 1) == img_count) {
                addChangeEvent();
            }
        });
        if (!supportsTransitions() && i > 0) {
            _this.parent().parent().css({'opacity': 0});
        }
    });

});
【热门文章】
【热门文章】