2017.09.03

Check Out

• jQuery 制作轮播图 Demo

New

jQuery 制作轮播图 Demo

<div class="out">
    <ul class="img">
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    </ul>
    <ul class="num">
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
    <div class="left-btn">&lt;</div>
    <div class="right-btn">&gh;</div>
</div>
<script>
    $(function(){

        // 缓存 要切换的轮播图和切换按钮
        var $imageList = $('.img li');
        var $numList = $('.num li');
        var $out = $('.out');

        // 文档载入显示第一张图，不需要等到鼠标悬浮才显示
        $imageList.eq(0).show();

        // 手动控制轮播图
        $numList.mouseover(function(){
            // 获取当前元素的索引 
            // !!! 注意 和定时器切换的索引一致, 等鼠标移出，和定时器切换衔接
            i = $(this).index();
            changeSlider(index);
        });

        // 切换轮播图，传入要显示的当前图片或按钮索引
        var changeSlider = function(showIndex) {
            // 给当前元素添加 active 类, 给 兄弟元素移除 active 类
            $numList.eq(showIndex).addClass('active').siblings().removeClass('active');
            // 让当前索引的图片显示，不等于当前索引的隐藏
            $imageList.eq(showIndex).stop().fadeIn(300).siblings().stop().fadeOut();
        };

        // 自动控制轮播图
        var moveToRight = function(){
            i++;
            if( i==5 ) i = 0;
            changeSlider(i);
        };
        var moveToLeft = function() {
            i--;
            if( i==-1 ) i = 4;
            changeSlider(i);
        }
        var i = 0;
        var t = setInterval(moveToRight, 1500);

        // 鼠标悬浮到轮播图上时 让轮播图停住
        // 定时器的开始与结束
        $out.hover(function() {
            clearInterval(t);
        }, function(){
            t = setInterval(move, 1500);
        });

        $('.out .left').click(function(){
            moveToLeft();
        });
        $('.out .right').click(function(){
            moveToRight();
        });
    });
</script>