纯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 相关文章推荐
Opacity.js
Jan 22 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
实例讲解React 组件生命周期
Jul 08 Javascript
用JS实现飞机大战小游戏
Jun 09 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
destoon复制新模块的方法
2014/06/21 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
Laravel实现表单提交
2017/05/07 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
值得收藏的10道python 面试题
2019/04/15 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python-openCV开运算实例
2020/07/05 Python
Python字典dict常用方法函数实例
2020/11/09 Python
Python的信号库Blinker用法详解
2020/12/31 Python
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
编写strcpy函数
2014/06/24 面试题
介绍一下木马病毒的种类
2015/07/26 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
个人维稳承诺书
2015/05/04 职场文书
导游词之太湖
2019/10/08 职场文书
Python装饰器的练习题
2021/11/23 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
Python之matplotlib绘制饼图
2022/04/13 Python