欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

第一次尝试自己写轮播图

程序员文章站 2022-06-20 08:39:54
...

其实嗯，对于前端我与很多很多想说的话，但是看着种种最后却不知道说什么了，既然这样那就什么都不要说

第一次尝试自己写轮播图，对于初学前端的我来说我感觉我晚了很久了

为什么要模仿写一份出来呢，我也不知道，做个纪念吧

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">&lt;</a>
44             <a href="javascript:;" class="next arrow" id="next">&gt;</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  width: 600px;height: 400px; 14  border: 1px solid red; 15  position: relative; 16  overflow: hidden; 17 } 18 /*使用定位显示第二张图片*/ 19 .contern .list{ 20  width: 3600px;height: 400px; 21  position: absolute; 22 } 23 .contern .list ul{ 24  width: 3600px;height: 400px; 25 } 26 .contern ul li{ 27  width:600px;height: 400px; 28  float: left; 29 } 30 .contern ul li img{ 31  width: 600px;height: 400px; 32 } 33 /*按钮*/ 34 .buttons { 35  width: 100px;height: 10px; 36  position: absolute; 37  bottom: 10px; 38  left: 40%; 39  z-index: 2; 40 } 41 .buttons ul li { 42  width: 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  width: 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); }

 

其实很就简单，只是想给自己做个时间轴，看看自己都学了什么

转载于:https://my.oschina.net/u/3347197/blog/1490030

上一篇： angularJS自定义directive之带参方法传递详解

下一篇： Python数据类型

推荐阅读