Jquery教你写一个简单的轮播.-优快云博客

本文介绍了一种简单的轮播图实现方法，使用HTML、CSS和jQuery进行开发。通过设置图片列表并利用定时器自动切换显示不同的图片，适用于快速搭建网站轮播需求。

这个我表示写的不咋地-_-//，但是胜在简单，可优化性不错。

实际上我本来想写个复杂点的结构的，但是最近忙成狗了！！！！所以大家就讲究着看吧

HTML结构

<div class="banner clearfix">
<ul>
<li><img src="images/slide/1.png" /></li>
<li><img src="images/slide/2.png" /></li>
<li><img src="images/slide/3.png" /></li>
<li><img src="images/slide/4.png" /></li>
<li><img src="images/slide/5.png" /></li>
</ul>
</div>

CSS部分（因为我的banner图为1920的宽度，所以-960）

.banner{ height:365px; overflow:hidden;}
.banner ul{ float:left; position:relative; left:50%; margin-left:-960px;}
.banner ul li{ float:left;}

Jquery.....看到我这个代码，估计就看出我一开始想用面向对象搞个复杂点的了....（可惜万恶的客户催催催。。。等有时间我会完善一下的）

var pic_index=0;

//函数控制如果为大于4返回第一个
function slide_pic()
{
    if(pic_index<4){pic_index = pic_index + 1}
    else{pic_index=0}
}
//函数申明主体，以及图片切换函数
slide_pic.prototype = {
    pic_num : '5',
    pic_slide : function() {
        $(".banner ul li").eq(pic_index).show().siblings("li").hide()
    }
}
实例化函数。以及调用函数
function slide()
{
    var obj = new slide_pic();
    obj.pic_slide(pic_index);
}
函数计时器
var slide_index = setInterval(slide,1000)