标签：col padding img move rtm 添加 btn ann point
关于轮播图 :
html代码 ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./indexx.css"> </head> <body> <div id="app"> <ul class="banner-list"> <li class="banner"> <img src="./img/1.jpg" alt="点开有彩蛋！" /> <div class="mask"></div> <span class="title">点开有彩蛋！</span> </li> <li class="banner"> <img src="./img/2.jpg" alt="G.E.M.邓紫棋新歌MV上线！" /> <div class="mask"></div> <span class="title">G.E.M.邓紫棋新歌MV上线！</span> </li> <li class="banner"> <img src="./img/3.jpg" alt="魔法X偶像，育成企划！" /> <div class="mask"></div> <span class="title">魔法X偶像，育成企划！</span> </li> <li class="banner"> <img src="./img/4.jpg" alt="一个全程让人不明觉厉的专访！" /> <div class="mask"></div> <span class="title">一个全程让人不明觉厉的专访！</span> </li> <li class="banner"> <img src="./img/5.jpg" alt="12月22日上海见" /> <div class="mask"></div> <span class="title">12月22日上海见</span> </li> <li class="banner"> <img src="./img/1.jpg" alt="点开有彩蛋！" /> <div class="mask"></div> <span class="title">点开有彩蛋！</span> </li> </ul> <ul class="index-list"> <li class="index active"></li> <li class="index"></li> <li class="index"></li> <li class="index"></li> <li class="index"></li> </ul> </div> <script src="./index.js"></script> <script> banner.init() </script> </body> </html>
css样式 ：
* { padding: 0; margin: 0; } li { list-style: none; } #app { position: relative; width: 550px; height: 242px; margin: 100px auto; overflow: hidden; } .banner-list { position: absolute; left: 0; width: 3300px; transition: left .2s; } .banner { position: relative; float: left; width: 550px; height: 242px; } .banner img { width: 100%; height: 100%; } .banner .title { position: absolute; bottom: 10px; left: 10px; color: #fff; } .banner .mask { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background-image: linear-gradient(rgba(0, 0, 0 , 0), rgba(0, 0, 0, 1)); } .index-list { position: absolute; bottom: 5px; right: 10px; font-size: 0; } .index { display: inline-block; vertical-align: middle; width: 6px; height: 6px; border: 2px solid transparent; background-color: #fff; border-radius: 50%; margin-left: 10px; transition: all .2s; cursor: pointer; } .index:hover { border-color:#fff; background-color: #73c9e5; } .index.active { width: 15px; height: 15px; background-image: url(‘./img/icon_slide_selected.png‘); background-size: cover; background-repeat: no-repeat; background-color: transparent; } .index.active:hover { background-color: transparent; border-color: transparent; }
JavaScript代码 ：
var banner = { el: null, bannerList: [], curIndex: 0, box: 0, timer: null, init: function () { this.initData(); this.startMove(); this.handle(); }, initData: function () { this.el = document.getElementById(‘app‘); // 获取父元素 this.wrap = this.el.getElementsByClassName(‘banner-list‘)[0]; // 获取轮播图列表元素 this.wrapLength = this.wrap.children.length; // 获取轮播图的长度 this.box = this.wrap.children[0].offsetWidth; // 获取每一张轮播图的宽度 this.btn = this.el.getElementsByClassName(‘index‘); // 获取index元素 this.Active = this.el.getElementsByClassName(‘index active‘)[0]; // 获取点击态的active元素 }, startMove () { // 开始运动 this.timer = setTimeout(this.autoMove.bind(this), 1500) //设置延时器 }, autoMove: function () { // 运动 var wrap = this.wrap; var box = this.box; // 索引值 加1 滑到下一张图片 调用添加样式函数 this.curIndex ++; wrap.style.left = -box * this.curIndex + ‘px‘; this.changeIndex(); }, // 样式 函数 changeIndex : function(){ var btn = this.btn; var Active = this.Active; var wrapLength = this.wrapLength; var curIndex = this.curIndex % (wrapLength - 1); //设当前索引为 //给当前的图片索引下的圆点设置样式 btn[curIndex].classList.add(‘active‘); //给已经有过样式的再次删除 Active.classList.remove(‘active‘); // this.Active = btn[curIndex]; }, handle: function () { this.handleBannerTranistion(); this. handleIndexClick(); }, handleBannerTranistion () { // 过渡完成时执行的函数 var self = this; var wrap = this.wrap; var wrapLength = this.wrapLength; // 过渡完毕后会触发该事件 wrap.addEventListener("transitionend", function () { if(self.curIndex === wrapLength - 1) { // 如果当前显示的是最后一张图片 wrap.style.left = 0; // 立刻让轮播图列表的left为0 wrap.style.transition = ‘none‘; // 清除过渡效果 self.curIndex = 0; // 当前索引重置为0 } // 如果当前位置为0，那么设置过渡样式 if(wrap.offsetLeft === 0) { wrap.style.transition = ‘left .2s‘; } self.startMove(); }); }, handleIndexClick: function(){ var btn = this.btn; var Active = this.Active; for(var i = 0; i<btn.length; i++){ (function (i) { var oIndex = btn[i] oIndex.onclick = function () { var isActive = oIndex.classList.contains(‘active‘); // 判断当前点击的原点是不是active if( isActive ) { return } // 如果是active，则什么都不做 clearTimeout(self.timer); // 清除定时器 self.curIndex = i; // 设置当前索引值，为点击的index元素的索引 self.changeIndex(); // 更改index元素的显示 wrap.style.left = -i * wrapWidth + ‘px‘; // 轮播图滚动 } })(i) } }, }
标签：col padding img move rtm 添加 btn ann point
原文地址：https://www.cnblogs.com/asd7850254/p/12115612.html
