纯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 判断指定字符串是否为有效数字
May 11 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
React diff算法的实现示例
Apr 20 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
react组件基本用法示例小结
Apr 27 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
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python队列原理及实现方法示例
2019/11/27 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Django admin组件的使用
2020/10/24 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
党员剖析材料范文
2014/12/18 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
如何用python清洗文件中的数据
2021/06/18 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸