轮播图
用savascript原生实现轮播图效果
- 首先我们创建一个文件夹(html,js,img)
- 构建主页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; } body{ background: #CCCCCC; } #box{ width: 400px; margin: 50px auto; height: 426px; overflow: hidden; border: 1px solid yellow; } #top{ position: relative; height: 320px; } #top li{ position: absolute; top: 0; left: 0; } #left{ position: absolute; width: 200px; top: 0; left: 0; height: 320px; z-index: 1000; /* background: red; */ } #right{ position: absolute; width: 200px; height: 320px; top: 0; right: 0; z-index: 1000; } #btn_l{ position: absolute; background: url(img/btn.gif) no-repeat; height: 60px; width: 60px; left: 10px; top: 130px; z-index: 1001; opacity: 0; filter: alpha(opacity=0); } #btn_r{ position: absolute; background: url(img/btn.gif) no-repeat 0 -60px; height: 60px; width: 60px; right: 10px; top: 130px; z-index: 1001; opacity: 0; filter: alpha(opacity=0); } #bottom{ position: relative; } #small_ul{ position: absolute; top: 0; left: 0; } #small_ul li{ float: left; } #small_ul img{ height: 90px; width: 120px; padding: 6px; } </style> </head> <body> <div id="box"> <ul id="top"> <!-- 遮罩 --> <div id="left"></div> <div id="right"></div> <!-- 按钮 --> <a href="javascript:;" id="btn_l"></a> <a href="javascript:;" id="btn_r"></a> <!-- 大图 --> <li style="z-index: 1 ";><img src="img/1.jpg" /></li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/6.jpg"/></li> </ul> <div id="bottom"> <ul id="small_ul"> <!-- 缩略图 --> <li><img src="img/1.jpg"/></li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/6.jpg"/></li> </ul> </div> </div> <script src="js/sport.js"></script> <script src="js/index.js"></script> </body> </html>
- index.js部分
/* 轮播图： 核心：通过控制当前下标，来进行图片的切换 轮播方式：width/height/left/top/background/display/zindex/opacity 1. 左遮罩 - 移入 - 左按钮显示（改变按钮的透明度到1） 2. 左遮罩 - 移出 - 左按钮消失（改变按钮的透明度到0） 3. 右遮罩 - 移入 - 右按钮显示 4. 右遮罩 - 移出 - 右按钮消失 ？当鼠标移入左按钮的时候，是不是意味着移出了左遮罩呢？左按钮消失。？ 5. 左按钮 - 点击 当前下标 -- if(当前下标 === -1){ 当前下标 = 长度- 1 } 调用轮播函数（） 6. 右按钮 - 点击 当前下标 ++ if(当前下标 === 长度){ 当前下标 = 0 } 调用轮播函数（） 7. 小图 移入 移入的小图 - 透明度 - 100 移出 if(移出的下标 !== 当前下标){ 移出的小图 - 透明度 - 50 } 点击 当前下标 = 点击的下标 调用轮播函数() 8. 封装轮播函数 大图： 大图[当前下标].style.zIndex = ++ zIndex 小图： if(当前下标 === 0){ 改变小图ul - left - 0 }else if(当前下标 === length - 1){ 改变小图ul - left - - (length - 3) * 单张小图的宽度 }else{ 改变小图ul - left - - (当前下标 - 1) * 单张小图的宽度 } */ class Slider{ constructor(){ //实例属性 //1. 左遮罩 this.left = document.querySelector('#left'); //2. 右遮罩 this.right = document.querySelector('#right'); //3. 左按钮 this.ltBtn = document.querySelector('#btn_l'); //4. 右按钮 this.rtBtn = document.querySelector('#btn_r'); //5. 大图 this.bigPic = document.querySelectorAll('#top>li'); //6. 小图ul this.smallUl = document.querySelector('#small_ul'); //7. 小图 this.smallPic = document.querySelectorAll('#bottom li'); //图片数量 this.num = this.smallPic.length; //当前下标 this.curIndex = 0; //zindex的变量 this.zIndex = 1; //根据小图数量，改变ul宽度 this.smallUl.style.width = this.num * this.smallPic[0].offsetWidth + 'px'; //8. 调用添加事件的方法 this.addEvent(); //9. 调用轮播函数，初始化小图的透明度 this.init(); } addEvent(){ // 1. 左遮罩 - 移入 - 左按钮显示（改变按钮的透明度到1） this.left.onmouseenter = this.ltBtn.onmouseenter = function(){ sport(this.ltBtn,{opacity: 100}); }.bind(this); // 2. 左遮罩 - 移出 - 左按钮消失（改变按钮的透明度到0） this.left.onmouseleave = () => { sport(this.ltBtn,{opacity: 0}); } // 3. 右遮罩 - 移入 - 右按钮显示 this.right.onmouseenter = this.rtBtn.onmouseenter = () => { sport(this.rtBtn,{opacity: 100}); } // 4. 右遮罩 - 移出 - 右按钮消失 this.right.onmouseleave = () => { sport(this.rtBtn,{opacity: 0}); } // 5. 左按钮 - 点击 this.ltBtn.onclick = () => { this.curIndex -- if(this.curIndex === -1){ this.curIndex = this.num - 1 } // 调用轮播函数（） this.init(); } // 6. 右按钮 - 点击 this.rtBtn.onclick = () => { this.curIndex ++ if(this.curIndex === this.num){ this.curIndex = 0 } // 调用轮播函数（） this.init(); } // 7. 小图 //记录实例对象 let that = this; for(let i = 0;i < this.num;i ++){ // 移入 this.smallPic[i].onmouseenter = function(){ // 移入的小图 - 透明度 - 100 sport(this,{opacity: 100}); } // 移出 this.smallPic[i].onmouseleave = function(){ if(i !== that.curIndex){ // 移出的小图 - 透明度 - 50 sport(this,{opacity: 50}); } } // 点击 this.smallPic[i].onclick = () => { this.curIndex = i; // 调用轮播函数() this.init(); } } } // 8. 封装轮播函数 init(){ // 大图： this.bigPic[this.curIndex].style.zIndex = ++ this.zIndex; // 小图： if(this.curIndex === 0){ // 改变小图ul - left - 0 sport(this.smallUl,{left: 0}); }else if(this.curIndex === this.num - 1){ // 改变小图ul - left - - (length - 3) * 单张小图的宽度 sport(this.smallUl,{left: - (this.num - 3) * this.smallPic[0].offsetWidth}); }else{ // 改变小图ul - left - - (当前下标 - 1) * 单张小图的宽度 sport(this.smallUl,{left: - (this.curIndex - 1) * this.smallPic[0].offsetWidth}); } //初始化小图上的透明度 //将所有的小图的透明度设置为50 for(let i = 0;i < this.num;i ++){ sport(this.smallPic[i],{opacity: 50}); } //当前图片对应的小图透明度设置100 sport(this.smallPic[this.curIndex],{opacity: 100}); } } new Slider();
- sport.js部分
//获取CSS样式 function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr]; } //完美运动 function sport(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var stop = true; //检测停止的开关 for(var attr in json){ //获取初值 var cur = 0; if(attr == "opacity"){ cur = parseInt(parseFloat(getStyle(obj,attr)) * 100); }else{ cur = parseInt(getStyle(obj,attr)); } //设置速度 var speed = (json[attr] - cur) / 8; speed = speed > 0? Math.ceil(speed) : Math.floor(speed); //检测停止 if(json[attr] != cur){ stop = false; } //运动 if(attr == "opacity"){ obj.style.opacity = (cur + speed ) / 100; obj.style.filter = "alpha(opacity=" + (cur + speed) + ")"; }else{ obj.style[attr] = cur + speed + "px"; } } if(stop){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }
