JQuery实现幻灯片的切换

HTML

<!--展示幻灯片-->
<div id="container">
    <div id="list" style="left: -730px;">//图片width：730px;
        <img src="img/6.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/6.jpg" alt="6"/>
        <img src="img/1.jpg" alt="6"/>
    </div>
    <div id="buttons">                        //下方点击轮转按钮
        <span index="1" class="on">1</span>
        <span index="2">2</span>
        <span index="3">3</span>
        <span index="4">4</span>
        <span index="5">5</span>
        <span index="6">6</span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a> //实现左右侧轮换
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

CSS  （涉及到绝对定位和相对定位的使用）

#container {            
    width: 730px;
    height: 454px;
    float:left;
    margin:12px 10px 5px 10px;
    overflow: hidden;
    position: relative;
}
#list {
    width: 5840px;
    height: 454px;
    position: absolute;
    z-index: 1;
}
#list img {
    float: left;
}
#buttons {
    position: absolute;
    height: 10px;
    width: 140px;
    z-index: 2;
    bottom: 20px;
    left: 250px;
}
#buttons span {
    cursor: pointer;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
    font-size:12px;
    color:#fff;
    font-weight:600;
    text-align:center;
}
#buttons .on {
    background: #aa1d0c;
}
.arrow {
    cursor: pointer;
    display: none;
    line-height: 70px;
    text-align: center;
    font-weight: bold;
    width: 30px;
    height: 70px;
    position: absolute;
    z-index: 2;
    top: 180px;
    background-color: RGBA(0,0,0,.3);
    color: #fff;
}
.arrow:hover {
    background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow {
    display: block;
}
#prev {
    left: 0;
}
#next {
    right: 0;
}

JQuery

<!--幻灯片轮换jquery实现-->
<script type="text/javascript">
    $(function () {
        var container = $('#container');
        var list = $('#list');
        var buttons = $('#buttons span');
        var prev = $('#prev');
        var next = $('#next');
        var index = 1;
        var len = 6;
        var interval = 5000;   //定时器
        var timer;


        function animate (offset) {
            var left = parseInt(list.css('left')) + offset;
            if (offset>0) {
                offset = '+=' + offset;
            }
            else {
                offset = '-=' + Math.abs(offset);
            }
            list.animate({'left': offset}, 300, function () {
                if(left > -200){
                    list.css('left', -730 * len);
                }
                if(left < (-730 * len)) {
                    list.css('left', -730);
                }
            });
        }

        function showButton() {
            buttons.eq(index-1).addClass('on').siblings().removeClass('on');
        }

        function play() {
            timer = setTimeout(function () {
                next.trigger('click');
                play();
            }, interval);
        }
        function stop() {
            clearTimeout(timer);
        }

        next.bind('click', function () {
            if (list.is(':animated')) {
                return;
            }
            if (index == 6) {
                index = 1;
            }
            else {
                index += 1;
            }
            animate(-730);
            showButton();
        });

        prev.bind('click', function () {
            if (list.is(':animated')) {
                return;
            }
            if (index == 1) {
                index = 6;
            }
            else {
                index -= 1;
            }
            animate(730);
            showButton();
        });

        buttons.each(function () {
            $(this).bind('click', function () {
                if (list.is(':animated') || $(this).attr('class')=='on') {
                    return;
                }
                var myIndex = parseInt($(this).attr('index'));
                var offset = -730 * (myIndex - index);

                animate(offset);
                index = myIndex;
                showButton();
            })
        });

        container.hover(stop, play);

        play();

    });
</script>

转载于:https://my.oschina.net/u/2460402/blog/523813