合肥市建设行政主管部门网站,做字素的网站,电子书制作公司网站,门户网站模板下载虽然轮播图已经有很多第三方库#xff0c;但是手动实现一个还是能够对javascript有一个更深的理解。
今天就讲一讲如何使用Jquery实现轮播图
首先html结构如下#xff1a; div classscroll // 结合下面的css样式可以知道#xff1a; 下面是五张轮播图…虽然轮播图已经有很多第三方库但是手动实现一个还是能够对javascript有一个更深的理解。
今天就讲一讲如何使用Jquery实现轮播图
首先html结构如下 div classscroll // 结合下面的css样式可以知道 下面是五张轮播图片一开始重叠在 // 父级元素的左上角轮播图在JS中是通过opacity透明度来控制是否显示的 ul idscroll lia hrefplus5.htmlimg srcimg/scroll_01.jpg alt/a/li lia hrefplus5.htmlimg srcimg/scroll_02.jpg alt/a/li lia hrefplus5.htmlimg srcimg/scroll_03.jpg alt/a/li lia hrefplus5.htmlimg srcimg/scroll_04.jpg alt/a/li lia hrefplus5.htmlimg srcimg/scroll_05.jpg alt/a/li lia hrefplus5.htmlimg srcimg/scroll_06.jpg alt/a/li /ul div classscroll_dot !-- 以下是六个圆点的占位 -- span classscroll_dot_span/span span/span span/span span/span span/span span/span /div div classscroll_arrows a hrefjavascript:void(0);span classleft scroll_arrows_back〈/span/a a hrefjavascript:void(0);span classright scroll_arrows_back〉/span /a /div /div CSS样式如下 .scroll #scroll img { width: 1226px; position: absolute; top: 0; left: 0; } .scroll_dot { width: 120px; height: 10px; position: absolute; bottom: 20px; right: 20px; z-index: 20; } .scroll_dot span { width: 6px; height: 6px; border: 2px solid #e0e0e0; background: #cdcac2; border-radius: 50%; margin: 0 5px; display: block; float: left; } .scroll_dot .scroll_dot_span { background: white; } .scroll_arrows span { width: 41px; height: 70px; text-align: center; line-height: 69px; color: #5f5750; position: absolute; top: 50%; font-size: 40px; z-index: 20; margin-top: -35px; } .scroll_arrows .scroll_arrows_back { background: #5f5750; color: white; } .scroll_arrows .left { left: 260px; } .scroll_arrows .right { right: 0; } 下面重点看一下JS部分是如何实现的 var n 0; //记录轮播图当前索引 var t setInterval(fun, 5000); // 设置一个定时器用于播放轮播图 // 重点 轮播图的播放函数 function fun() { n; // 此时判断轮播图索引是否越界如果越界则将n重置为0 if (n $(.scrollulli).length - 1) { n 0; } // 这里可以看到是通过opacity来控制轮播图是否显示的 // eq(n)表示从当前li集合中指定索引为n的元素 $(.scrollulli).css(opacity, 0).eq(n).css(opacity, 1) // 控制轮播图下面的圆点样式实现圆点跟随轮播图移动移动的圆点是白色背景默认是灰色背景白色更显眼 siblings表示该元素所在集合中的其他兄弟元素 $(.scroll_dotspan).eq(n).addClass(scroll_dot_span).siblings().removeClass(scroll_dot_span); } // 点击左箭头让轮播图回调到上一张图片 $(.scroll_arrows .left).click(function () { n - 2; // 这里减二是因为fun函数中: n会自增1而后面会调用fun函数。 if (n -1) { // 这里是判断越界如果当前已经是第一张图片那么再回退就轮转到最后一张图片也就是索引是5但是fun函数会自增加1所以n取值4。 左越界的标准是小于-1是因为如果是-1那么到了fun函数自增1就变成了0那么就是第一张图片了相当于原地不动。 n 4; } fun() }); // 点击右箭头让图片快进一张 $(.scroll_arrows .right).click(function () { fun() }); // 点击轮播图圆点时将图片切换到该圆点索引对应的图片 $(.scroll_dot span).click(function () { // 获取点击圆点的索引 n $(this).index() - 1; // index()函数是jquey中获取该元素在所属集合中的索引。 // 将除了被点击圆点之外的圆点都设置为默认灰色背景当前被点击圆点的背景设为白色 $(this).siblings().removeClass(scroll_dot_span).end().addClass(scroll_dot_span); fun() // 播放圆点对应的图片 }); // 这里hover函数接收两个参数移入时执行的函数和移出时的函数中间用逗号做分隔符 // 这是jquery hover方法特有用法 $(.scroll).hover(function () { clearInterval(t); // 鼠标移入时清除定时器 }, function () { // 鼠标移出时又设置了一个定时器 t setInterval(fun, 5000); }); 从以上代码可以看到代码的核心是js定时器, 全局图片索引的确定jquery对dom元素的样式控制轮播图中对索引越界的判断。
