纯js实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

赵圆圆

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量861

点赞数

分类专栏： JS 文章标签： javascript 动画

本文链接：https://blog.csdn.net/ZYY88886666/article/details/56484921

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这几天一直在看js动画，今天又get到了一个轮播图，使用纯js实现的，但是没有美化哈，需要的小伙伴自己美化喔
如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播的效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        body {
            padding: 20px;
        }

        #container {
            position: relative;
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            overflow: hidden;
        }

        #list {
            position: absolute;
            z-index: 1;
            width: 4200px;
            height: 400px;
        }

        #list img {
            float: left;
            width: 600px;
            height: 400px;
        }

        #buttons {
            position: absolute;
            left: 250px;
            bottom: 20px;
            z-index: 2;
            height: 10px;
            width: 100px;
        }

        #buttons span {
            float: left;
            margin-right: 5px;
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
        }

        #buttons .on {
            background: orangered;
        }

        .arrow {
            position: absolute;
            top: 180px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
        }

        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }

        #container:hover .arrow {
            display: block;
        }

        #prev {
            left: 20px;
        }
        #next {
            right: 20px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="list" style="left: -600px;">
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动" />
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动" />
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动" />
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动" />
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动" />
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

<script type="text/javascript">
   window.onload=function(){
       var container = document.getElementById("container");
       var list = document.getElementById("list");
       var buttons = document.getElementById("buttons").getElementsByTagName('span');
       var prev = document.getElementById("prev");
       var next = document.getElementById("next");
       var index = 1;
     function animate(offset){
         var newLeft = parseInt(list.style.left) + offset;
         list.style.left = newLeft + 'px';

         if(newLeft<-3000){
             list.style.left= -600 +'px';
         }
         if(newLeft>-600){
             list.style.left = -3000 + 'px';
         }

     }
     function buttonsshow(){
         for(var i =0; i<buttons.length;i++){
             if(buttons[i].className == 'on'){
                 buttons[i].className='';
             }
         }
         buttons[index-1].className='on';
     }
     prev.onclick = function(){
         index-=1;
         if(index<1)
         {
             index=5;
         }
         buttonsshow();
         animate(600);
     };
     next.onclick = function(){
         index+=1;
         if(index>5){
             index=1;
         }
         buttonsshow();
         animate(-600);
     };

     //自动播放
     var timer;
       function play(){
           timer= setInterval(function(){
               next.onclick();
           },1000)
       }
       play();
       function stop(){
           clearInterval(timer);
       }
       container.onmouseover=stop;
       container.onmouseout=play;

for(var i=0; i<buttons.length; i++){
    ( function(i){
           buttons[i].onclick=function(){
               var clickindex= parseInt(this.getAttribute('index'));
               var offset = 600*(index-clickindex);
               animate(offset);
               index = clickindex;
               buttonsshow();
           }
    })(i);
}

   }
</script>
</body>
</html>

赵圆圆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯js实现轮播图

这几天一直在看js动画，今天又get到了一个轮播图，使用纯js实现的，但是没有美化哈，需要的小伙伴自己美化喔如下代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:
复制链接

扫一扫

专栏目录