54，轮播图

html

    

        

        

        

        

    
    

        1
        2
        3
        4
    
    

    

css

* {

padding:0;

margin:0;

border:0;

}

#cont {

width:800px;

height:500px;

position:relative;

overflow:hidden;

}

#cont ul {

width:3200px;

position:relative;

list-style:none;

}

#cont ul li {

width:800px;

height:500px;

position:relative;

float:left;

}

#cont ul li img {

width:100%;

height:100%;

}

.spanBox {

width:100px;

height:20px;

position:absolute;

bottom:10px;

right:0;

}

.spanBox span {

width:18px;

text-align:center;

height:18px;

line-height:18px;

margin-left:5px;

background:coral;

float:left;

font-size:15px;

}

#cont .spanBox .active {

background:aliceblue;

}

.left {

width:50px;

height:100px;

position:absolute;

top:250px;

left:0;

background:cornflowerblue;

}

.right {

width:50px;

height:100px;

position:absolute;

top:250px;

right:0;

background:cornflowerblue;

}

js

$(document).ready(function() {
    var cont = $("#cont");
    var ul = cont.find("ul");
    var liWidth = ul.find("li").eq(0).width();
    var numbers = cont.find(".spanBox span");
    var timer = null;
    var c = 0;
    //1、完成span的背景颜色切换
    //2、完成li的移动
    numbers.on("click", function() {
        $(this).addClass("active").siblings("span").removeClass("active");
        c = $(this).index();
        ul.animate({
            "right": liWidth * c
        });
        //$("#cont ul li").eq(c).fadeIn(800).siblings("#cont ul li").fadeOut("slow");
        //淡入淡出配合display:none和block
    })

    //左右按钮控制效果
    $(".left").stop(true, true).click(function() {
        c--;
        if (c == numbers.length) {
            c = 0
        }
        numbers.eq(c).trigger("click");
    })
    $(".right").stop(true, true).click(function() {
        c++;
        if (c == numbers.length) {
            c = 0
        }
        numbers.eq(c).trigger("click");
    })
    //定时器的使用
    timer = setInterval(function() {
        c++;
        if (c == numbers.length) {
            c = 0
        }
        numbers.eq(c).trigger("click");
    }, 2000)

    //

    cont.hover(function() {
        clearInterval(timer);
    }, function() {
        timer = setInterval(function() {
            c++;
            if (c == numbers.length) {
                c = 0
            }
            numbers.eq(c).trigger("click");
        }, 2000)
    })
}) //document