jquery特效 轮播图（定时自动轮播） |
您所在的位置：网站首页 › jquery自动播放心形特效软件下载 › jquery特效 轮播图（定时自动轮播） |
jquery特效 轮播图（定时自动轮播）
|
这次我是转载别人的作品，并修改了一下图片切换时的速度（没修改之前切换图片太快了很僵硬） 展示的是手动点击轮播效果以及定时自动轮播效果的程序
这个也可以点击序号切换图片，gif太大了放不上去。 一、主体程序 Insert title here
1 2 3 4
二、CSS样式 @charset "UTF-8"; *{ margin: 0; padding: 0; } ul{ list-style: none; } .slideShow{ width: 800px; /* height: 400px; 其实就是图片的高度 */ border: 1px #eeeeee solid; margin: 20px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul{ width: 4800px; position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/ transition: all 1s ease-in-out; } .slideShow ul li{ float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ width: 800px; } .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; }三、jQuery程序 /** * */ $(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确定 }) }); timer=setInterval(function(){ //打开定时器 iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片 if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click },5000); //2000为轮播的时间 })
|
【本文地址】