swiper---指示器加上过渡动画
swiper---指示器加上过渡动画
主要体现的功能：
1.指示器会跟随轮播图出现类似进度条的，每个轮播图的过渡时间就是下面一个指示器执行完毕动画需要的时间
2.上一页、下一页的切换也会带动指示器动画及加载完的变化
3.点击指示器，能实现已加载和未加载完毕指示器样式的变化
效果如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 500px;height: 300px;margin: auto;position: relative;overflow: hidden;}.box .swiper_box {height: 300px;position: absolute;top: 0;left: 0;}.box .swiper_box img {display: block;float: left;width: 500px;height: 300px;}.box .icon_box {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);}.box .icon_box .divbox {position: relative;width: 40px;height: 5px;float: left;margin-right: 5px;}.box .icon_box .divbox span.bg-line{position: absolute;top: 0;display: block;width: 40px;height: 5px;background: white;margin: 0 3px;}.box .icon_box .divbox:hover span.bg-line {background: sandybrown;}.box .icon_box .divbox span.pending-bg{position: absolute;top: 0;display: block;width: 40px;height: 5px;margin: 0 3px;/* -webkit-animation:pending 3s linear none;animation:pending 3s linear none */}.box .icon_box .divbox span.start{animation:pending 2s linear none;background: sandybrown;}.box .icon_box .divbox span.load{background: sandybrown;}@keyframes pending{0%{width:0}to{width:40px}}.box .prve {position: absolute;left: 0;top: 50%;transform: translateY(-50%);}.box .next {position: absolute;right: 0;top: 50%;transform: translateY(-50%);}</style>
</head>
<body><div class="box"><div class="swiper_box"><img src="./img/bannerPng1.png" /><img src="./img/bannerPng2.png" /><img src="./img/bannerPng3.png" /><img src="./img/bannerPng4.jpg" /><img src="./img/bannerPng5.jpg" /></div><div class="icon_box"></div><div class="prve"><!-- <img src="img/ban_pre.png" /> -->pre</div><div class="next">next<!-- <img src="img/ban_next.png" /> --></div></div>
</body>
<script>//获取图片容器swiper_boxvar swiper_box = document.querySelector(".swiper_box");//获取所有图片var swiper_img = swiper_box.querySelectorAll("img");//获取小圆点容器icon_boxvar icon_box = document.querySelector(".icon_box");//获取上一张图片按钮var prve = document.querySelector(".prve");//获取下一张图片按钮var next = document.querySelector(".next");//获取图片总个数var img_conut = swiper_img.length;//获取单个图片长度var img_width = swiper_img[0].width;//获取复制第一张图片节点 var first_img = swiper_img[0].cloneNode(true);//获取复制最后一张图片节点var last_img = swiper_img[img_conut - 1].cloneNode();//定义一个索引变量var index = 1;var Timer;/*动态添加小圆点*///定义一个小圆点变量function icon() {var icon = "";for(var i = 0; i < img_conut; i++) {icon += "";}icon_box.innerHTML = icon}icon();/*开头插入最后一张图片*/swiper_box.insertBefore(last_img, swiper_box.firstChild);swiper_box.style.left = "-" + img_width + "px";/*最后插入第一张图片*/swiper_box.appendChild(first_img);/*设置轮播容器长度为所有图片长度之和*/swiper_box.style.width = img_width * (img_conut + 2) + "px";/*小圆点同步轮播图片选中状态*/var icon = icon_box.querySelectorAll(".divbox");console.log('length',icon.length)function activeIcon(index) {for(var i = 0; i < icon.length; i++) {icon[i].className = "divbox";// 初始化样式，这样不管点击前面的dot还是后面的都能灵活控制load的样式icon[i].lastChild.className = "pending-bg";}// 当前激活的索引---indexicon[index].className = "divbox active";// 给当前索引加上过渡时间icon[index].lastChild.className ='pending-bg start'// 循环遍历，给已经走过的轮播图给上加载后的样式for(n = 0;n<index;n++){icon[n].lastChild.className = "pending-bg load";}}activeIcon(index - 1);/*点击小圆点显示相应的图片*/for (var i = 0; i < icon.length; i++) {icon[i].index=iicon[i].onclick=function(){index=this.index;next.onclick();activeIcon(index-1);}}/*点击下一张图片按钮*/next.onclick = function() {index++;openTransition()indexShow()if(index > img_conut) {index = 1;activeIcon(index - 1)setTimeout(function(){closeTransition()indexShow()},600)} else {activeIcon(index - 1)}}/*点击上一张图片按钮*/prve.onclick = function() {index--;openTransition()indexShow()if(index <1) {index = img_conut;activeIcon(index - 1)setTimeout(function(){closeTransition()indexShow()},600)} else {activeIcon(index - 1)}}/*开启动画*/Timer=setInterval(next.onclick,2000);/*鼠标放到容器上停止动画*/document.querySelector(".box").onmouseover=function(){clearInterval(Timer);}/*鼠标移开开始动画*/document.querySelector(".box").onmouseout=function(){Timer=setInterval(next.onclick,2000);}/*开启过度效果*/function openTransition() {swiper_box.style.transition = "all .6s";}/*关闭过度效果*/function closeTransition() {swiper_box.style.transition = "none";}/*滚动到index相应的位置*/function indexShow() {swiper_box.style.left = "-" + index * img_width + "px";}
</script>
</html>
如有侵权，请联系删除
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！