第一次尝试自己写轮播图

Posted BeginWeb—熊一乐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一次尝试自己写轮播图相关的知识，希望对你有一定的参考价值。

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

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

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

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

 

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

以上是关于第一次尝试自己写轮播图的主要内容，如果未能解决你的问题，请参考以下文章

swiper插件怎么当图片只有一张时禁止自动轮播

原生js写轮播图效果

写轮播图遇到的那些基础知识

写轮播图遇到的那些基础知识

原生JS写轮播图（转自https://www.cnblogs.com/LIUYANZUO/p/5679753.html）

使用vue实现轮播图