第一次尝试自己写轮播图

来源：互联网发布：阿里云关闭快照编辑：程序博客网时间：2024/06/04 19:28

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

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

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

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);}

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

阅读全文

0 0