jQuery实现图片定时轮播

参考出处：http://www.jb51.net/article/76153.htm

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script></head><style type="text/css">*{margin: 0;padding: 0;}ul{list-style: none;}.slideShow{width: 346px;height: 210px; /*其实就是图片的高度*/border: 1px #eeeeee solid;margin: 100px auto;position: relative;overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/}.slideShow ul{width: 2000px;position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/}.slideShow ul li{float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/width: 346px;}.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;}</style><body><div class="slideShow"><!--图片布局开始--><ul><li><a href="#"><img src="../img02/05.jpg" /></a></li><li><a href="#"><img src="../img02/02.jpg" /></a></li><li><a href="#"><img src="../img02/03.jpg" /></a></li><li><a href="#"><img src="../img02/04.jpg" /></a></li></ul><!--图片布局结束--><!--按钮布局开始--><div class="showNav"><span class="active">1</span><span>2</span><span>3</span><span>4</span></div><!--按钮布局结束--></div><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为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0var interval = 4000;//轮播时间间隔 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确定})});timer = setInterval(function(){ //打开定时器iNow++;    //让图片的索引值次序加1，这样就可以实现顺序轮播图片if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始iNow=0;}showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click},interval); //4000为轮播的时间})</script></body>
</html>

效果图1：

jQuery实现图片定时轮播相关推荐

jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一下午带晚上的jQuery/Zepto的Bootstrap轮播图插件,功能是能够根据当前较短的一边实现自适应宽度,并且 ...
jQuery实现简单图片的轮播(自右向左播放)
简单的轮播大概内容分为如下三点: 1.轮播图片的存储: 2.轮播的样式(注意:图片存储的总宽度,以及图片移动相对元素的定位的元素): 3.JQuery中的计时器调用动画移动图片轮播. 一.carous ...
web前端项目详解：OPPO首页进度条特效（定时轮播）
web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构效果 ...
Android 旋转木马轮播,jQuery旋转木马式幻灯片轮播特效
本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下特点响应式--适应任何视窗的宽度混合内容不需要CSS ...
iOS 自定义图片无限轮播控件
一:简介图片轮播功能在App中是一个非常常见的功能,即允许定时滚动,也允许拖拽滚动,也可以点击每张图片触发事件. 二:实现方式图片轮播功能的实现方式有很多中, UIScrollView + N个U ...
仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图百度壁纸系列仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...
Android 视频图片轮播,详解android 视频图片混合轮播实现
循环添加视频view 图片view for (int i = 0 ;i if (beansarraylist.get(i).gettype()==1){ videoplayer = new nice ...
iOS 两种不同的图片无限轮播
代码地址如下: http://www.demodashi.com/demo/11608.html 前记其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵 ...

jQuery实现图片定时轮播

jQuery实现图片定时轮播相关推荐

最新文章

热门文章