用jquery写轮播图

jquery代码

$(document).ready(function () {

var slideShow = $(".top_slide_wrap"),    //获取最外层框架的名称

    // ul=slideShow.find(".slide_box"),
    li = slideShow.find(".slide_box li"),     //获取图片li元素
    showNumber = slideShow.find(".num li"),   //获取按钮

    oneWidth = slideShow.find("ul li").eq(0).width();    //获取每个图片的宽度

var timer = null;          //定时器返回值，主要用于关闭定时器

var iNow = 0;              //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0

showNumber.on("click", function () {     //为每个按钮绑定一个点击事件

    $(this).addClass("active").siblings().removeClass("active");   //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉

    var index = $(this).index();     //获取哪个按钮被点击，也就是找到被点击按钮的索引值

    iNow = index;
    // ul.animate({    "left":-oneWidth*iNow,})
    //注意此处用到left属性，所以ul的样式里面需要设置position: relative;
    // 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定

    li.eq(iNow).fadeIn().siblings().fadeOut();      //设置图片淡入淡出效果
});

function autoplay() {

    timer = setInterval(function () {                            //打开定时器

        iNow++;                                              //让图片的索引值次序加1，这样就可以实现顺序轮播图片

        if (iNow > showNumber.length - 1) {                      //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始

            iNow = 0;
        }

        showNumber.eq(iNow).trigger("click");            //模拟触发(trigger)数字按钮的click
    }, 2000);                                              //2000为轮播的时间
}

autoplay();

slideShow.hover(function () {
    clearInterval(timer);
}, autoplay);               //另外注意setInterval的用法比较关键。

})

以下是HTML代码

以下是css代码

/焦点图/
.banner {
width: 700px;
height: 401px;
float: left;
margin-left: 223px;
}
.banner .top_slide_wrap {
width: 700px;
height: 401px;
overflow: hidden;
position: relative;
z-index: 1;
}
.num{
position: absolute;
bottom: 20px;
right: 290px;
z-index: 2;
}
.num li{
float: left;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background: #ccc0b3;
text-align: center;
margin: 0 4px;
font-weight: bolder;
}
.num li a{
color: #000;
}
.num li:hover,.num .active{
background: #ff3c3c;
}
.num li:hover a,.num .active a{
color: #fff;
}
.banner .slide_box li {
height: 401px;
position: relative;
}

/* 焦点图左右按钮 */
.banner .op_btns {
width: 700px;
margin-top: -730px;
position: relative;
z-index: 3;
}
.banner .op_btns .op_btn {
display: block;
width: 32px;
height: 60px;
cursor: pointer;
position: absolute;
margin-top: 80px;
}
.banner .op_btns .op_prev {
background: url(…/images/b_left.png) no-repeat center top;
left: 0;
top: 420px;
}
.banner .op_btns .op_next {
background: url(…/images/b_right.png) no-repeat center top;
right: 0;
top: 420px;
}

猜你喜欢