| 本文实例为大家分享了jQuery呼吸轮播图制作原理的具体过程，供大家参考，具体内容如下 轮播图：carousel
呼吸轮播图变种布局重点：所有的图片摞一起。
jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。
左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()
小圆点的防流氓的策略：立即响应新事件。stop(true) 注意：使用代码时将图片更换，以及需要引入jquery库。 举例： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } ul, ol { list-style: none; } #carousel { position: relative; width: 900px; height: 540px; border: 1px solid #000; margin: 50px auto; } /*呼吸轮播图布局关键是所有图片落在一起*/ #carousel .imgs ul li { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: none; } #carousel .imgs ul li:first-child { display: block; } .btns a { position: absolute; width: 30px; height: 60px; top: 50%; margin-top: -30px; text-decoration: none; background-color: rgba(0, 0, 0, .5); line-height: 60px; text-align: center; font-size: 20px; color: #fff; } .btns a:first-child { left: 10px; } .btns a:last-child { right: 10px; } #carousel .circles { position: absolute; width: 200px; height: 20px; left: 50%; margin-left: -100px; bottom: 30px; } #carousel .circles ol { width: 210px; } #carousel .circles ol li { float: left; width: 20px; height: 20px; margin-right: 10px; background-color: blue; line-height: 20px; text-align: center; border-radius: 20px; } #carousel .circles ol li.cur { background-color: orange; } </style></head><body> <div id="carousel"> <div class="imgs" id="imgs"> <ul> <li><img src="images/aoyun/0.jpg" alt=""></li> <li><img src="images/aoyun/1.jpg" alt=""></li> <li><img src="images/aoyun/2.jpg" alt=""></li> <li><img src="images/aoyun/3.jpg" alt=""></li> <li><img src="images/aoyun/4.jpg" alt=""></li> <li><img src="images/aoyun/5.jpg" alt=""></li> <li><img src="images/aoyun/6.jpg" alt=""></li> </ul> </div> <div class="btns"> <a href="#" id="leftBtn"><</a> <a href="#" id="rightBtn">></a> </div> <div class="circles" id="circles"> <ol> <li class="cur">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ol> </div> </div> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> // 获取元素 var $leftBtn = $("#leftBtn"); var $rightBtn = $("#rightBtn"); var $imgs = $("#imgs ul li"); var $circles = $("#circles ol li"); var $carousel = $("#carousel"); // 定义length var length = $imgs.length; // 定义信号量 var idx = 0; // 开启定时器 var timer = setInterval(change, 2000); // 鼠标移入停止定时器 $carousel.mouseenter(function() { // 清除定时器 clearInterval(timer); }) // 鼠标离开从新开启定时器 $carousel.mouseleave(function() { // 设表先关 clearInterval(timer); // 重新赋值timer timer = setInterval(change, 2000); }) // 右按钮事件 $rightBtn.click(change); function change() { // 防流氓 if ($imgs.is(":animated")) { return; } // 当前图片消失 $imgs.eq(idx).fadeOut(600); // 信号量改变 idx++; // 边界判定 if (idx > length - 1) { idx = 0; } // 下一张图片淡入 $imgs.eq(idx).fadeIn(600); // 当前小圆点要加cur $circles.eq(idx).addClass("cur").siblings().removeClass("cur"); } // 左按钮事件 $leftBtn.click(function() { // 防流氓 if (!$imgs.is(":animated")) { // 当前图片消失 $imgs.eq(idx).fadeOut(600); // 信号量改变 idx--; // 边界判定 if (idx < 0) { idx = length - 1; } // 下一张图片淡入 $imgs.eq(idx).fadeIn(600); // 当前小圆点加cur $circles.eq(idx).addClass("cur").siblings().removeClass("cur"); } }) // 小圆点事件 $circles.mouseenter(function() { // 当前图片消失 $imgs.eq(idx).stop(true).fadeOut(600); // 改变信号量 idx = $(this).index(); // 下一张图片出现 $imgs.eq(idx).stop(true).fadeIn(600); // 当前小圆点加cur $(this).addClass("cur").siblings().removeClass("cur"); }) </script></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
浅谈VUE uni-app 自定义组件
JS实现拖拽进度条改变元素透明度 |
