原生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中继承的一些示例方法与属性参考
Aug 07 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript类型转换示例
2014/04/29 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python基础之函数用法实例详解
2014/09/10 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
《菜园里》教学反思
2014/04/17 职场文书
敬老院标语
2014/06/27 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
2014年文员工作总结
2014/11/18 职场文书
社区工作者个人总结
2015/02/28 职场文书
奔腾年代观后感
2015/06/09 职场文书
严以用权学习心得体会
2016/01/12 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
4种非常实用的python内置数据结构
2021/04/28 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python