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 相关文章推荐
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
开启BootStrap学习之旅
May 04 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
使用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
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
django的csrf实现过程详解
2019/07/26 Python
String和StringBuffer的区别
2015/08/13 面试题
保安岗位职责
2014/02/21 职场文书
投标担保书范文
2014/04/02 职场文书
一年级小学生评语
2014/04/22 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
升学宴家长致辞
2015/07/27 职场文书
会议承办单位欢迎词
2019/07/09 职场文书