进阶版轮播图
Posted leslie-cheung1584304774
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进阶版轮播图相关的知识，希望对你有一定的参考价值。
<!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; } #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> <script src="sport.js"></script> <script type="text/javascript"> </script> </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> </body> </html> <script src="public.js"></script> <script> /* 实现思路 1、页面加载 大图自动切换 当中间的小图高亮显示时，小图开始自动轮播 显示的大图和下面高亮显示的小图有对应 2、 鼠标移入移出到大box上,启动和停止定时器 3、鼠标点击 左侧/右侧 按钮 大图自动切换 小图自动轮播 循环播放 4、鼠标移入 移出 点击到小图上 移入 ： 当前小图高亮 移出： 当前小图恢复高亮（但是注意如果是定时器控制的高亮小图 不恢复，仍然保持高亮状态） 点击 ： 大图 小图 自动轮播 */ window.onload = function(){ //第一步 ：查找要操作的元素 var box = $id("box"), //大容器 oUl = $id("small_ul"),//运动的ul smallImg = oUl.children,//所有小图 bigImg = $id("top").getElementsByTagName("li"),//所有大图 leftDiv = $id("left"),//左侧div rightDiv = $id("right"),//右侧div leftBtn = $id("btn_l"),//左按钮 rightBtn = $id("btn_r"),//右按钮 len = smallImg.length,//小图个数 timer = null,//控制轮播定时器 index = 0;//控制小图和大图的对应 //第二步 ： 控制轮播函数 autoPlay();//页面打开后 初始化特效 function autoPlay(){ //排他 //所有大图隐藏 小图透明度50% for( var i = 0 ; i < len ; i++ ){ bigImg[i].style.display = "none"; sport( smallImg[i] , { opacity : 50 } ); } //边界处理 if( index == len ){ index = 0; } //控制index对应的小图和大图高亮显示 bigImg[index].style.display = "block"; sport( smallImg[index] , { opacity : 100 } ); //根据不同条件 控制ul的移动 if( index == 0 ){ sport( oUl , { left : 0 } ); }else if( index == len - 1 ){ sport( oUl , { left : -smallImg[0].offsetWidth*3 } ); }else{ sport( oUl , { left : -smallImg[0].offsetWidth*(index-1) } ); } } //第三步 ：使用定时器完成自动轮播 timer = setInterval( function(){ index++; autoPlay(); },2000 ) //第四步 ： 由于运动的过程中 小图区会有留白 说明 ul的宽度 不够导致的 //设置运动的ul的宽度 oUl.style.width = len * smallImg[0].offsetWidth + "px"; //第五步 ： 鼠标操作大容器 启动和停止定时器 box.onmouseenter = function(){ clearInterval( timer ); } box.onmouseleave = function(){ timer = setInterval( function(){ index++; autoPlay(); },2000 ) } //第六步 ： 鼠标移入到左侧 显示左侧箭头 离开左侧部分，隐藏左侧箭头 //当鼠标离开左侧容器时 会导致按钮消失 按钮不能被点击 所以要为按钮添加鼠标移入移出事件 leftDiv.onmouseenter = leftBtn.onmouseenter = function(){ sport( leftBtn , { opacity : 100 } ); } leftDiv.onmouseleave = leftBtn.onmouseleave = function(){ sport( leftBtn , { opacity : 0 } ); } //右侧移入和移出 同左侧操作 rightDiv.onmouseenter = rightBtn.onmouseenter = function(){ sport( rightBtn , { opacity : 100 } ); } rightDiv.onmouseleave = rightBtn.onmouseleave = function(){ sport( rightBtn , { opacity : 0 } ); } //第七步 ：点击左右按钮 控制大图和小图的轮播 rightBtn.onclick = function(){ index++; autoPlay(); } leftBtn.onclick = function(){ index--; if( index == -1 ){ index = len - 1; } autoPlay(); } //第八步 ：小图的事件操作 移入 移出 点击 for( let i = 0 ; i < len ; i++ ){ smallImg[i].onclick = function(){ //获取当前点击的小图的下标 赋值给index index = i; autoPlay(); } smallImg[i].onmouseenter = function(){ //当前操作的小图高亮显示 sport( this , { opacity : 100 } ); } smallImg[i].onmouseleave = function(){ //离开时 小图恢复 //获取当前操作的小图的下标 if( index != i ){ //说明当前操作的小图是高亮的 和大图对应 sport( this , { opacity : 50 } ); } } } } </script>
引入的public.js文件
//函数功能根据id查找页面元素 function $id(id){ return document.getElementById(id); } //定义一个函数 功能是创建某个元素 function create(ele){ return document.createElement(ele); } //根据标签查找页面元素 function $tagName(tagname){ return document.getElementsByTagName(tagname); } //写一个函数 功能获取任意区间值公式 function rand(min,max){ return Math.round( Math.random()*(max-min) + min ); } //获取六位十六进制颜色值 function getColor(){ var str = "0123456789abcdef"; var color = "#";//拼接六位十六进制字符 for( var i = 1 ; i <= 6 ; i++ ){ color += str.charAt( rand(0,15) ); } return color; } function dataToString( now , sign ){ //sign表示日期的拼接符号 //设置sign的默认值 如果用户传递sign参数 就使用用户传递的参数 //否则就使用默认值 sign = sign || "-"; //获取日期的年月日 var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); //获取日期的时分秒 var h = toTwo( now.getHours() ); var mi = toTwo( now.getMinutes() ); var s = toTwo( now.getSeconds() ); //定义自己的时间格式 var str = y + sign + m + sign + d + " " + h + ":" + mi + ":" + s; return str; } //定义一个函数 功能是在小于10的数字前拼接0 function toTwo( num ){ return num < 10 ? "0" + num : num; } //定义一个时间差函数 function diff(start,end){ return (end.getTime() - start.getTime())/1000; } //字母数字验证码 function yzm(){ var str = "";//用来存放验证码 for( var i = 1 ; i <= 6 ; i++ ){ var code = rand(48,122); if( code >= 58&&code <= 64 ||code >= 91 && code <= 96 ){ i--; }else{ var ch = String.fromCharCode( code ); str += ch; } } //console.log( str ); return str; } //碰撞 function pz(obj1,obj2){ var L1 = obj1.offsetLeft; var R1 = obj1.offsetLeft + obj1.offsetWidth; var T1 = obj1.offsetTop; var B1 = obj1.offsetHeight + obj1.offsetTop; var L2 = obj2.offsetLeft; var R2 = obj2.offsetLeft + obj2.offsetWidth; var T2 = obj2.offsetTop; var B2 = obj2.offsetHeight + obj2.offsetTop; //如何碰不上 返回false 碰上返回true if( R1<L2||L1>R2||B1<T2||T1>B2 ){//碰不上 return false; }else{ return true; } }
引入的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);
}
以上是关于进阶版轮播图的主要内容，如果未能解决你的问题，请参考以下文章