码迷,mamicode.com
首页 > Web开发 > 详细

Jquery教你写一个简单的轮播.

时间:2015-04-18 20:26:19      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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)

 

Jquery教你写一个简单的轮播.

标签:

原文地址:http://www.cnblogs.com/LoveOrHate/p/4437897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!