标签：gre aaa === 调用 eee 函数 通过 elements name
一、 使用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>
二、 使用js实现 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/slideshow.css"/> </head> <body> <div class="slideshow"> <!--图片--> <a href="img/aaa.jpg" id="slideshow-href"> <img src="img/aaa.jpg" id="slideshow-item"/> </a> <!--底部导航小圆点--> <ul id="conLis"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!--左右导航--> <div id="leftBtn"><</div> <div id="rightBtn">></div> </div> </body> <script type="text/javascript" src="js/slideshow.js"></script> </html> css代码： body,ul,li{margin: 0;padding: 0;} a{text-decoration: none;} li{list-style: none;} .slideshow{ width: 800px; height: 500px; margin: 100px auto; overflow: hidden; position: relative; } #slideshow-item{ display: block; width: 800px; } #conLis{ position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); } .slideshow li{ margin: 0 10px; border: solid 6px black; border-radius: 50%; float: left; cursor: pointer; } #leftBtn, #rightBtn{ padding: 8px 6px; font-size: 60px; color: white; background: #E7E7E7; position: absolute; top: 50%; transform: translateY(-50%); opacity:0.3; cursor: pointer; } #leftBtn{ left: 15px; } #rightBtn{ right: 15px; } js代码： //获取元素 var slideshow = document.querySelector(‘.slideshow‘); var scrollHref = gt("slideshow-href"); var scrollItem = gt("slideshow-item"); //console.log(scrollHref+"===="+scrollItem); var conLis = gt(‘conLis‘); var items = conLis.getElementsByTagName(‘li‘); var leftBtn = gt(‘leftBtn‘); var rigthBtn = gt(‘rightBtn‘); //设置存储图片的容器 var imgArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"]; var hrefArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"]; //设置索引0为第一张显示的图片 var currentIndex = 0; scrollItem.src = imgArr[0]; scrollHref.href = hrefArr[0]; //设置第一个小圆点为黄色 items[0].style.borderColor = "yellow"; //设置定时更换图片 var timer = setInterval(changeItem,2000); function changeItem(){ currentIndex++;//图片索引自增1,显示下一张图片 if(currentIndex == imgArr.length){ currentIndex = 0; } //调用图片轮播，动态的改变当前索引值来改变轮播的图片 slideShow(currentIndex); } //图片轮播 function slideShow(i){ //设置轮播图片及链接图片 scrollItem.src = imgArr[i]; scrollHref.href = hrefArr[i]; //设置对应轮播图片的小圆点效果 for(var j = 0; j < items.length; j++){ //设置所有小圆点为默认样式 items[j].style.borderColor = ‘black‘; } //单独设置某张轮播图对应的小圆点样式 items[i].style.borderColor = "yellow"; } //设置鼠标滑过底部导航小圆点显示对应的图片 for(var j = 0; j < items.length; j++){ //for循环内有事件动作的话是先执行循环，要想按钮每一次点击都是按钮的下标值，就要先记录i值， //不然等到循环执行完再执行onclick事件就会等于for循环最后得到的i值。 items[j].index = j;//将循环数据赋值给列表中的索引;防止闭包函数中无法正常获取当前索引i，而衍生出的一个绑定在dom元素上的数据index items[j].onmouseover = function(){ clearInterval(timer);//停止自动轮播 slideShow(this.index); } items[j].onmouseout = function(){ currentIndex = this.index;//将元素索引赋值给currentIndex，保证下一次自动轮播继续当前这个向下轮播 timer = setInterval(changeItem,2000); } } //设置点击左右箭头的轮播 leftBtn.onmouseover = rightBtn.onmouseover = function(){ leftBtn.style.opacity = "1"; rightBtn.style.opacity = "1"; //鼠标移动到区域停止轮播 clearInterval(timer); } leftBtn.onmouseout = rigthBtn.onmouseout = function(){ leftBtn.style.opacity = "0.3"; rightBtn.style.opacity = "0.3"; //鼠标离开开始轮播 timer = setInterval(changeItem,2000); } leftBtn.onclick = function(){ //判断当前图片是否为第一张图片索引 if(currentIndex == -1){ currentIndex = imgArr.length-1;//将最后一张图片赋值给前面的索引 } slideShow(currentIndex);//调用轮播方法 currentIndex--;//点击左侧按钮，做减法操作 } rightBtn.onclick = function(){ //判断当前图片是否为最后一张图片的索引 if(currentIndex == imgArr.length-1){ currentIndex = 0;//将第一张图片索引赋值 } slideShow(currentIndex); currentIndex++; } //封装通过id获取元素的方法 function gt(id){//传入字符串类型的参数 console.log("进入方法"); return document.getElementById(id); console.log("获取元素成功"); }
标签：gre aaa === 调用 eee 函数 通过 elements name
原文地址：https://www.cnblogs.com/menglong1214/p/9595205.html
