用jquery实现图片轮播
2016-07-16 18:04
501 查看
CSS样式:
js代码规范:
主体代码:
总结:个人觉得图片的宽度总和一定要要比整体的宽度要小,这样才能保证图片左移的时候有一定的空间保证图片的完整性。
*{ 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="#"><img src="images/view/111.jpg"/></a></li> <li><a href="#"><img src="images/view/112.jpg" /></a></li> <li><a href="#"><img src="images/view/113.jpg" /></a></li> <li><a href="#"><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>
总结:个人觉得图片的宽度总和一定要要比整体的宽度要小,这样才能保证图片左移的时候有一定的空间保证图片的完整性。
相关文章推荐
- jQuery学习之jQuery Ajax用法详解
- Jquery $.ajax/$.post/$.get
- jquery数字打分插件与嵌入到EasyUI datagrid中的示例
- jQuery 3.0最终版发布,十大新特性眼前一亮
- jquery 常用的tabs效果代码
- jQuery之动画效果
- jQuery Event对象的属性和方法
- jQuery:全世界都在用
- jquery 定时器 每隔15秒调用函数
- js中的style与jQuery中的css
- jQuery实现页面平滑滚动
- JQuery的ready函数与JS的onload的区别详解
- jQuery.holdReady()方法用法实例
- 2016/07/16 《jquery仿新浪微博新版搜索下拉特效》学习笔记一
- jquery弹出可关闭遮罩提示框
- jQuery获取URL请求参数的方法
- 修改jquery.validate.js计算中文字符长度的规则。
- jQuery 即点即改
- jquary学习之路--1
- jQuery笔记