js动画之轮播图
一、 使用Css3动画实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul{ list-style: none; } .outer{ width: 750px; height: 366px; margin: 100px auto; border: solid 2px gray; overflow: hidden; position: relative; } .inner{ width: 500%; height: 100%; position: relative; left: 0; animation: myAni 15s linear infinite alternate; } .inner img{ float: left; width: 20%; } @keyframes myAni{ 0%{left: 0;} 10%{left:0} 20%{left: -100%;} 30%{left: -100%;} 40%{left: -200%;} 50%{left: -200%;} 60%{left: -300%;} 70%{left: -300%;} 80%{left: -400%;} 100%{left: -400%;} } .outer ul{ position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; } .outer li{ /*width: 12px; height: 12px;*/ margin: 0 10px; /*background: white;*/ border: solid 8px white; border-radius: 50%; } .outer .scroll-ball{ border-color: yellowgreen; position: relative; left: -180px; animation: myBall 15s linear infinite alternate; } @keyframes myBall{ 0%{left: -180px;} 10%{left:-180px;} 20%{left: -144px;} 30%{left: -144px;} 40%{left: -108px;} 50%{left: -108px;} 60%{left: -72px;} 70%{left: -72px;} 80%{left: -36px;} 100%{left: -36px;} } </style> </head> <body> <div class="outer"> <div class="inner"> <img src="img/5af3df82N15a1910a.jpg"/> <img src="img/5afbf194Nce807c23.jpg"/> <img src="img/5afce833N3a41e948.jpg"/> <img src="img/5af3df82N15a1910a.jpg"/> <img src="img/5afce833N3a41e948.jpg"/> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="scroll-ball"></li> </ul> </div> </body> </html>
二、 使用javaScript实现 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/slideshow.css"/> </head> <body> <div id="slide-container"> <!--轮播的图片--> <div id="slide-main"> <img src="img/111.jpg"/> </div> <!--导航--> <ul id="listMenu"> <li>1</li> <li>2</li> <li>3</li> </ul> <!--左右翻页--> <div id="slide-nav"> <span><</span> <span>></span> </div> </div> </body> <script src="js/slideshow.js" type="text/javascript" charset="utf-8"></script> </html> css代码： *{ margin: 0; padding: 0; } li{ list-style: none; } #slide-container{ width: 750px; height: 366px; margin: 100px auto; border: dotted 3px orange; position: relative; overflow: hidden; } #listMenu{ width: 50%; display: flex; justify-content: space-around; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); } #listMenu li{ height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 50%; background: yellow; cursor: pointer; } #slide-nav{ width: 98%; position: absolute; top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%); } #slide-nav span{ font-size: 60px; color: white; cursor: pointer; background: #E7E7E7; opacity: 0.4; } #slide-nav span:last-of-type{ float: right; } js代码： //获取元素 //获取图片 var slideMain = document.getElementById('slide-main'); var slidePic = slideMain.getElementsByTagName('img')[0]; //获取导航 var listMenu = document.getElementById('listMenu'); var lis = listMenu.getElementsByTagName("li"); //获取左右翻页 var slideNav = document.getElementById('slide-nav'); var previousNav = slideNav.getElementsByTagName('span')[0]; var nextNav = slideNav.getElementsByTagName('span')[1]; //设置轮播图片数组 var imgArr = ["img/111.jpg","img/222.jpg","img/333.jpg"]; //设置初始的索引，并赋给对应的显示图片 var currentIndex = 0; slidePic.src = imgArr[currentIndex]; lis[currentIndex].style = "background:orange;color:white"; //设置图片轮播，每隔指定的事件切换图片和导航 用到定时器 var timer = setInterval(slideshow,2000); //设置导航变化 function slideshow(){ //每一次轮播，轮播的索引自动加1; currentIndex++; //判断，当前索引超出最大值后，重新赋给0 if(currentIndex == lis.length){ currentIndex = 0; } /*//将导航全部格式化 for(var j = 0; j < lis.length; j++){ lis[j].style = "" } //设置当前导航的索引 lis[currentIndex].style = "background:orange;color:white"; //根据当前索引将数组中对应的图片显示到页面上 slidePic.src = imgArr[currentIndex]*/ slidepic(currentIndex); } function slidepic(i){ //将导航全部格式化 for(var j = 0; j < lis.length; j++){ lis[j].style = "" } //设置当前导航的索引 lis[i].style = "background:orange;color:white"; //根据当前索引将数组中对应的图片显示到页面上 slidePic.src = imgArr[i] } for(var i = 0; i < lis.length; i++){ lis[i].index = i; lis[i].onmouseover = function(){//闭包函数 再循环中无法正确获取对应的索引 //将导航全部格式化 /*for(var j = 0; j < lis.length; j++){ lis[j].style = "" } //设置当前导航的索引 this.style = "background:orange;color:white"; slidePic.src = imgArr[this.index];*/ currentIndex = this.index; slidepic(currentIndex); clearInterval(timer); } lis[i].onmouseout = function(){ timer = setInterval(slideshow,1000); } } //设置鼠标滑过左右两边按钮时透明度变化 previousNav.onmouseover = nextNav.onmouseover = function(){ previousNav.style = "opacity:0.8"; nextNav.style = "opacity:0.8"; clearInterval(timer); } previousNav.onmouseout = nextNav.onmouseout = function(){ previousNav.style = ""; nextNav.style = "" timer = setInterval(slideshow,1000); } //设置左边按钮的点击事件 previousNav.onclick = function(){ currentIndex--; if(currentIndex == -1){ currentIndex = lis.length - 1; } slidepic(currentIndex) } //设置右边按钮的点击事件 nextNav.onclick = function(){ currentIndex++; if(currentIndex == lis.length){ currentIndex = 0; } slidepic(currentIndex) }
获取更多前端知识，请关注下方二维码 ↓↓↓↓↓↓
