成都创新互联网站制作重庆分公司

原生JavaScript怎么实现轮播图效果

小编给大家分享一下原生JavaScript怎么实现轮播图效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联于2013年创立，是专业互联网技术服务公司，拥有项目网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元平远做网站,已为上家服务,为平远各地企业和个人服务,联系电话:13518219792

javascript是一种什么语言

javascript是一种动态类型、弱类型的语言，基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能，现在JavaScript也可被用于网络服务器，如Node.js。

HTML代码如下：




  
  淘宝轮播图
  
  



  
    
    
    
    
    
    
    
  
                              
  <   >

CSS样式如下：

/*
  第一步：设置外部框的样式
  第二步: 设置图片框的样式
  第三步: 设置箭头的样式
  第四步: 设置小圆点的样式
*/
#container {
  margin: 50px auto;
  position: relative;
  width: 520px;
  height: 280px;
  overflow: hidden;
}
#list {
  position: absolute;
  z-index: 1;
  width: 3640px;
}
#list img {
  float: left;
  width: 520px;
  height: 280px;
}
#buttons {
  height: 10px;
  width: 100px;
  position: absolute;
  left: 0;/*设置水平垂直居中*/
  right: 0;/*设置水平垂直居中*/
  margin: 0 auto;/*设置水平垂直居中*/
  bottom: 20px;
  z-index: 2;
}
#buttons span {
  float: left;
  margin-right: 5px;
  width: 10px;
  height: 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
}
#buttons .on {
  background: orangered;
}
.arrow {
  width: 40px;
  height: 40px;
  display: none;
  position: absolute;
  top: 0; /*设置水平垂直居中*/
  bottom: 0; /*设置水平垂直居中*/
  margin: auto 0; /*设置水平垂直居中*/
  font-size: 36px;
  font-weight: bold;
  line-height: 39px;
  text-align: center;
  color: #fff;
  background-color: RGBA(0, 0, 0, .3);
  cursor: pointer;
  z-index: 2;
}
.arrow:hover{
  background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
  display: block;
}
#prev{
  left: 10px;
}
#next{
  right: 10px;
}

javascript代码如下

/**
 * Created by zhm on 17.1.15.
 */
  /*
  *知识点：
  *  this使用
  *  DOM事件
  *  定时器
  *
  *  思路：
  *  （1）设置它左右移动
  *    问题：传入数字为NAN??
  *    解决：在页面中增加属性style：left:0
  *  （2）平滑移动（移动时间固定，每次移动的距离不一样）
  *    问题：连续点击出现晃动？---设置标志位
  *       出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张
  *               在类list的标签中增加属性style：left:-520px;
  *               设置无限滚动判断
  *
  *  （3）设置小圆点
  *    首先将所有的类置为空，当前类置为on
  *    绑定小圆点和图片
  *    绑定小圆点和左右箭头
  *    设置定时器，鼠标划上去停止，移开自动轮播
  *
  * */
  //1.获取元素
  var container = document.getElementById("container");
  var list = document.getElementById("list");
  var prev = document.getElementById("prev");
  var next = document.getElementById("next");
  var buttons = document.getElementById('buttons').getElementsByTagName('span');
  var timer = null;
  var timer2 = null;
  var flag = true;
  var index =0;
  //2.设置函数
  function moveImg(dis) {
    var time = 400;//运动的总时间
    var eachTime = 10;//每次小移动的时间
    var eachDis = dis/(time/eachTime);//每次小移动的距离
    var newWeizhi = parseInt(list.style.left) + dis;//新位置
    flag = false;
    function eachMove(){
      if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){
        list.style.left = parseInt(list.style.left) + eachDis + 'px';
      }else {
        flag = true;
        clearInterval(timer);
        list.style.left = newWeizhi + 'px';
        //无限滚动判断
        if (newWeizhi == 0) {
          list.style.left = -2600 + 'px';
        }
        if (newWeizhi == -3120) {
          list.style.left = -520 + 'px';
        }
      }
    }
    timer = setInterval(eachMove, 10);
  }
  //3.设置点击切换图片
  next.onclick = function () {
    if(!flag) return;
    moveImg(-520);
    //绑定箭头和小圆点
    if (index == 4) {
      index = 0;
    } else {
      index++;
    }
    buttonsShow();
  };
  prev.onclick = function () {
    if(!flag) return;
    moveImg(520);
  //绑定箭头和小圆点
    if (index == 0) {
      index = 4;
    } else {
      index--;
    }
    buttonsShow();
  };
  //4.设置小圆点的绑定
  function buttonsShow() {
    //将之前的小圆点的样式清除
    for (var i = 0; i < buttons.length; i++) {
      if (buttons[i].className == "on") {
        buttons[i].className = "";
        break;
      }
    }
    buttons[index].className = "on";
  }
  for(var i = 0 ;i
以上是“原生JavaScript怎么实现轮播图效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
            
            
                        

            网站名称：原生JavaScript怎么实现轮播图效果            

            网页网址：http://cxhlcq.com/article/jghhdg.html
        
    



    
其他资讯

    




    

        

            
        

        

            
全国免费咨询:

            400-028-6601
            
业务咨询：028-86922220 / 13518219792

            
节假值班：18980820575 / 13518219792

            
联系地址：成都市太升南路288号锦天国际A幢1002号

        

    

    

        

            
Copyright © 成都创新互联科技有限公司重庆分公司  渝ICP备2021005571号

            
        

    

    

        

            友情链接:：
            成都网站建设
            重庆网站建设
            四川网站建设
            重庆建设网站
            移动服务器托管
            成都服务器托管
            云服务器
            广告设计制作
            重庆网页设计
            重庆做网站
            重庆网站制作
            重庆网站建设
            重庆网站公司
            渝中网站制作
            重庆网站设计
        

    





    




    

        

            
                
                
在线咨询

            
        

    

    

        
微信咨询

        

    

    

        
电话咨询

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回顶部