打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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)

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
中华饮食文化演变史
小宋佳“浴袍装”亮相 获赞月光女神高贵典雅
jQuery封装的组件完成广告屏滑动
FlexSlider
jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页
jQuery炫酷图片3d背景视觉差特效
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服