纯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自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
JS实现省市县三级下拉联动
Apr 10 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
vue组件与复用详解
2018/04/08 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Node.js JSON模块用法实例分析
2019/01/04 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
详解在Python中处理异常的教程
2015/05/24 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
web页面录屏实现
2019/02/12 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
个性发展自我评价2015
2015/03/09 职场文书
2015年外联部工作总结
2015/04/03 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers