原生js轮播(仿慕课网)


Posted in Javascript onFebruary 15, 2017

效果如下:

原生js轮播(仿慕课网)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>javascript</title>
 <style>
 *{margin:0;padding:0;border:0;}
 a{text-decoration:none;color:#fff;font-size:40px;line-height:200px;display:none;text-align:center;}
 #container{width:300px;height:200px;margin:50px auto;position:relative;overflow:hidden;}
 #list{width:2100px;height:200px;position:absolute;top:0;}
 #list span{width:300px;height:200px;display:inline-block;text-align:center;font-size:22px;float:left;color:#fff;}
 .one{background:red;}
 .two{background:orange;}
 .three{background:blue;}
 .four{background:green;}
 .five{background:black;}
 #buttons{width:200px;height:30px;position:absolute;bottom:0px;left:100px;z-index:9;}
 #buttons span{display:inline-block;cursor:pointer;width:12px;height:12px;border-radius:6px;background: #2a2a2a}
 #prev{width:40px;height:200px;position:absolute;left:0px;}
 #next{width:40px;height:200px;position:absolute;right:0px;}
 #container .on{background:#fff;}
 </style>
</head>
<body>
 <div id="container">
 <div id="list" style="left:-300px">
 <span class="five">我是黑色第五张</span>
 <span class="one">我是红色第一张</span>
 <span class="two">我是黄色第二张</span>
 <span class="three">我是蓝色第三张</span>
 <span class="four">我是绿色第四张</span>
 <span class="five">我是黑色第五张</span>
 <span class="one">我是红色第一张</span>
 </div>
 <div id="buttons">
 <span class="on" index="1"></span>
 <span index="2"></span>
 <span index="3"></span>
 <span index="4"></span>
 <span index="5"></span>
 </div>
 <a id="prev" href="javascript:;" rel="external nofollow" rel="external nofollow" ><</a>
 <a id="next" href="javascript:;" rel="external nofollow" rel="external nofollow" >></a>
 </div>
 <script>
  var container = document.getElementById('container'),
   list = document.getElementById('list'),
   buttons = document.getElementById('buttons').getElementsByTagName('span'),
   prev = document.getElementById('prev'),
   next = document.getElementById('next'),
   index = 1,
   len = 5,
   interval = 3000,
   animated = false,
   timer;
  function animate(offset){
  if(offset == 0) return;
  animated = true;
  var time = 150,
  inter = 5,
  speed = offset/(time/inter),
  left = parseInt(list.style.left) + offset;
 var go = function(){
 if((speed>0 && parseInt(list.style.left)<left) || (speed<0 && parseInt(list.style.left)>left)){
  list.style.left = parseInt(list.style.left) + speed + 'px';
  setTimeout(go,inter);
 }else{
  list.style.left = left + 'px';
  if(left > -100){
  list.style.left = -300*len + 'px';
  }
  if(left < (-300*len)){
  list.style.left = '-300px'
  }
  animated = false;
 }
 }
 go();
  }
  function showButton(){
  for(var i=0 ; i<buttons.length ; i++){
  if(buttons[i].className == 'on'){
  buttons[i].className = '';
  break;
  }
  }
  buttons[index - 1].className = 'on';
  }
  function play(){
  timer = setTimeout(function(){
  next.onclick();
  play();
  },interval);
  }
  function stop(){
  clearTimeout(timer);
  }
  next.onclick = function(){
  if(animated) {
  return;
  }
  if(index == 5){
  index = 1;
  }else{
  index++;
  }
  animate(-300);
  showButton();
  }
  prev.onclick = function(){
  if(animated) {
  return;
  }
  if(index == 1){
  index = 5;
  }else{
  index--;
  }
  animate(300);
  showButton();
  }
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
     if (animated) {
      return;
     }
     if(this.className == 'on') {
      return;
     }
     var myIndex = parseInt(this.getAttribute('index'));
     var offset = -300 * (myIndex - index);
     animate(offset);
     index = myIndex;
     showButton();
    }
   }
  container.onmouseover = function(){
  prev.style.display = next.style.display = 'block';
  stop();
  }
  container.onmouseout = function(){
  prev.style.display = next.style.display = 'none';
  play();
 }
  play();
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 #Javascript
Canvas实现放射线动画效果
Feb 15 #Javascript
微信小程序 开发经验整理
Feb 15 #Javascript
bootstrap table操作技巧分享
Feb 15 #Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 #Javascript
JS原型与原型链的深入理解
Feb 15 #Javascript
js中数组插入、删除元素操作的方法
Feb 15 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
Vuex简单入门
2017/04/19 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python编写万花尺图案实例
2021/01/03 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
世界文化遗产导游词
2015/02/13 职场文书
售后服务质量承诺书
2015/04/29 职场文书
话题作文之学会尊重
2019/12/16 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP