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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
基于JavaScript实现控制下拉列表
May 08 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
php数组去重复数据示例
2014/02/25 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python新手学习可变和不可变对象
2020/06/11 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
金融专业个人求职信范文
2013/11/28 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
如何做好员工培训计划?
2019/07/09 职场文书