jQuery实现大图轮播


Posted in Javascript onFebruary 13, 2017

css样式:

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style:none;
}
.slideShow{
 width: 620px;
 height: 700px; /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2500px;
 position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShow ul li{
 float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
 width: 620px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

js代码规范:

<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">
$(document).ready(function(){ 
var slideShow=$(".slideShow"),  //获取最外层框架的名称 
ul=slideShow.find("ul"), 
showNumber=slideShow.find(".showNav span"),   //获取按钮 
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确定 
 }) 
 }); 
 function autoplay(){ 
timer=setInterval(function(){   //打开定时器 
iNow++;     //让图片的索引值次序加1,这样就可以实现顺序轮播图片 
 if(iNow>showNumber.length-1){   //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 
iNow=0; } 
showNumber.eq(iNow).trigger("click");   //模拟触发数字按钮的click 

},2000);     //2000为轮播的时间
} 
 autoplay(); 
 slideShow.hover( function(){clearInterval(timer);},autoplay); 另外注意setInterval的用法比较关键。
})
</script>

主体代码:

<body>
 <div class="slideShow">
 <!--图片布局开始-->
 <ul>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/111.jpg"/></a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/112.jpg" /></a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/113.jpg" /></a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/114.jpg" /></a></li>
 </ul>
 <!--图片布局结束-->
 <!--按钮布局开始-->
 <div class="showNav">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <!--按钮布局结束-->
 </div>
</body>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jQuery ajax应用总结
Jun 02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 #Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
微信小程序-获得用户输入内容
Feb 13 #Javascript
js实现textarea限制输入字数
Feb 13 #Javascript
Canvas实现动态的雪花效果
Feb 13 #Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 #Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python WindowsError的错误代码详解
2017/07/23 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
python中return如何写
2020/06/18 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
教师节商场活动方案
2014/02/13 职场文书
教师节简报
2015/07/20 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
在pyCharm中下载第三方库的方法
2021/04/18 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
python Django框架快速入门教程(后台管理)
2021/07/21 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
JavaScript流程控制(分支)
2021/12/06 Javascript