其实嗯，对于前端我有很多很多想说的话，但是看着种种最后却不知道说什么了，既然这样那就什么都不要说
第一次尝试自己写轮播图，对于初学前端的我来说我感觉我晚了很久了
为什么要模仿写一份出来呢，我也不知道，做个纪念吧
html代码页面
7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="UTF-8"> 11 <title></title> 12 <link rel="stylesheet" type="text/css" href="css/Carousel_XM.css"/> 13 <script src="js/Carousel_XM.js" type="text/javascript" charset="utf-8"></script> 14 </head> 15 <body> 16 <div class="contern" id="contern"> 17 <!--image--> 18 <!--当你从最后一张图切换回第一张图时，有很大空白，利用两张辅助图来填补这个空白。 19 这里补充下无缝滚动，直接看代码，复制最后一张图片放置第一张图片前，同时复制第一张图片放置最后一张图片的后面。 20 并且，将第一张图片辅助图（实际上是实际显示的第5张图片隐藏起来，故设置style="left: -600px;"）--> 21 <div class="list" id="list" style="left: -600px;"> 22 <ul> 23 <li><img src="img/img-4.jpg" alt="" /></li> 24 25 <li><img src="img/img-1.jpg" alt="" /></li> 26 <li><img src="img/img-2.jpg" alt="" /></li> 27 <li><img src="img/img-3.jpg" alt="" /></li> 28 <li><img src="img/img-4.jpg" alt="" /></li> 29 30 <li><img src="img/img-1.jpg" alt="" /></li> 31 </ul> 32 </div> 33 <!--button--> 34 <div class="buttons" id="buttons"> 35 <ul> 36 <li index=1 id="on" class="on"></li> 37 <li index=2 ></li> 38 <li index=3 ></li> 39 <li index=4 ></li> 40 </ul> 41 </div> 42 <!--left right button--> 43 <a href="javascript:;" class="prev arrow" id="prev"><</a> 44 <a href="javascript:;" class="next arrow" id="next">></a> 45 </div> 46 </body> 47 </html>
css代码页面
1 *{ 2 margin: 0;padding: 0; 3 text-decoration: none; 4 } 5 li{ 6 list-style-type: none; 7 } 8 body{ 9 padding: 100px; 10 } 11 /*隐藏其他的图片*/ 12 .contern{ 13 600px;height: 400px; 14 border: 1px solid red; 15 position: relative; 16 overflow: hidden; 17 } 18 /*使用定位显示第二张图片*/ 19 .contern .list{ 20 3600px;height: 400px; 21 position: absolute; 22 } 23 .contern .list ul{ 24 3600px;height: 400px; 25 } 26 .contern ul li{ 27 600px;height: 400px; 28 float: left; 29 } 30 .contern ul li img{ 31 600px;height: 400px; 32 } 33 /*按钮*/ 34 .buttons { 35 100px;height: 10px; 36 position: absolute; 37 bottom: 10px; 38 left: 40%; 39 z-index: 2; 40 } 41 .buttons ul li { 42 10px;height: 10px; 43 float: left; 44 margin-left: 10px; 45 border-radius:10px; 46 background-color: white; 47 } 48 .buttons ul .on { 49 background-color: red; 50 } 51 /*左右*/ 52 .arrow{ 53 50px ; 54 height: 70px; 55 position: absolute; 56 top: 180px; 57 /*left: 0px;*/ 58 z-index: 2; 59 font-size: 50px; 60 background-color: red; 61 color: white; 62 display: block; 63 } 64 .next{ 65 right: 0px; 66 }
js代码的模块
//按钮手动切换效果 window.onload=function(){ var list=document.getElementById("list"); var prev=document.getElementById("prev"); var next=document.getElementById("next"); var contern=document.getElementById("contern") //getElementsByTagName指定标签合 var buttons=document.getElementById("buttons").getElementsByTagName("li"); var index=1 var timer; function animates(a){ // //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值， //且style.left获取的是字符串，需要用parseInt()取整转化为数字。 var newlift=parseInt(list.style.left)+a; list.style.left=newlift+'px'; //偏移量判断 if(newlift>-600){ list.style.left=-2400+'px'; } if(newlift<-2400){ list.style.left=-600+'px'; } } //小圆圈跟随 function buttonShow(){ //清除样式 for (var i=0;i<buttons.length;i++ ){ if(buttons[i].className=='on'){ buttons[i].className=''; } } buttons[index-1].className='on'; } //点击圆圈 for(var i=0;i<buttons.length;i++){ //立即执行函数 (function(i){ buttons[i].onclick=function(){ var chilckindex=parseInt(this.getAttribute('index')); var offset=600*(index-chilckindex); animates(offset); index=chilckindex; buttonShow(); } })(i) } //两个按钮 prev.onclick=function(){ index-=1; if(index<1){ index=4; } buttonShow(); animates(600); } next.onclick=function(){ index+=1; if(index>4){ index=1; } buttonShow(); animates(-600); } //定时器自动播放 play(); //停止 contern.onmouseover=stop; contern.onmouseout=play; } //自动播放 //对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。 //简单来说，setInterval()执行多次，setTimeout()只执行一次。 function play(){ timer=setInterval(function (){ next.onclick(); },1500) } //鼠标悬停 function stop(){ clearInterval(timer); }
其实很就简单，只是想给自己做个时间轴，看看自己都学了什么