纯JS实现轮播图


Posted in Javascript onFebruary 22, 2017

这几天一直在看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:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></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>

以上所述是小编给大家介绍的纯JS实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
layui实现三级联动效果
Jul 26 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 #Javascript
js实现简易垂直滚动条
Feb 22 #Javascript
微信小程序 引用其他js文件实现代码
Feb 22 #Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 #Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 #Javascript
JS实现一个简单的日历
Feb 22 #Javascript
You might like
第十二节--类的自动加载
2006/11/16 PHP
织梦模板标记简介
2007/03/11 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
AngularJS中的模块详解
2015/01/29 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
办公室文书岗位职责
2013/12/16 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
安全标语大全
2014/06/10 职场文书
写得不错的求职信范文
2014/07/11 职场文书
民事调解书范文
2015/05/20 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript