原生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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
微信小程序 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和ACCESS写聊天室(五)
2006/10/09 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP count()函数讲解
2019/02/03 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
ASP Json Parser修正版
2009/12/06 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python列表生成器迭代器实例解析
2019/12/19 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
虚拟机下载python是否需要联网
2020/07/27 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
小学生防溺水广播稿
2014/01/12 职场文书
四风问题对照检查材料
2014/09/22 职场文书
护林员个人总结
2015/03/04 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书