原生js实现焦点轮播图效果


Posted in Javascript onJanuary 12, 2017

原生js焦点轮播图主要注意这几点:

1、前后按钮实现切换,同时注意辅助图

2、中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index

3、间隔调用与无限轮播。

4、注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行

5、另外在切换图片的时候,底部的Button动画效果,是从底部开始往上升的,要用到transform:scale()和transform-origin:0 100%两个转换属性,代码如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>
 <meta name="viewpoint" content="width=device-width,initial-scale=1,user-scalable="no">
 <title>20170101</title>
 <style type="text/css">
 a{text-decoration:none;color:#3DBBF5;}
 .wrapper{width:750px;height:350px;background:#001032;margin:20px auto;text-align:center;box-shadow:0 0 12px 2px hsla(0,20%,30%,0.5);padding:10px 15px;position:relative;}
 .effect{position:relative;cursor:pointer;}
 .effect:hover{color:#02a0e9;}
 .effect:before{width:100%;display:inline-block !important;position:absolute;height:1px;background:#02a0e9;transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transform:scale(0,1);content:'';bottom:-5px;left:0;}
 .effect:hover:before{transform:scale(1);-webkit-transform:scale(1);}
 #lunBo{margin-top:20px;overflow:hidden;height:300px;width:750px;position:relative;}
 #list{position:absolute;z-index:22;height:300px;width:5250px;}
 #list img{float:left;}
 #buttons { position: absolute; height: 20px; width: 150px; z-index: 99; bottom: 20px; left: 40%;}
    span { cursor: pointer; float: left; width: 10px; height: 5px; background: #333; margin-right: 10px;}
     .on { background: yellow;transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transform:scale(1,4);-ms-transform:scale(1,4);-moz-transform:scale(1,4);-webkit-transform:scale(1,4);transform-origin:0% 0%;-webkit-transform-origin:0% 100%;-moz-transform-origin:0% 100%;}
  .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 100px; line-height:100px;position: absolute; z-index: 92; top: 30%; background-color: RGBA(0,0,0,.3); color: #fff;}
    .arrow:hover { background-color: RGBA(0,0,0,.7);}
    #lunBo:hover .arrow { display: block;}
    #prev { left: 0px;}
    #next { right: 0px;}
 </style>
 </head>
 <body>
 <div class="wrapper">
  <a class="effect" href="#">2016完了,2017来了</a>
  <div id="lunBo">
  <div id="list" style="left:-750px;">
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg" alt=""/>
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.jpg" alt=""/>
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856m1bhxxx1d8jfnblb.jpg" alt=""/>
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856z48mfrrr8u064rf6.jpg" alt=""/>
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856e95yze236lvq7y2a.jpg" alt=""/>
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/03/175856saeagzgsnwal15n5.jpg" alt=""/>
   <img src="http://cdn.attach.qdfuns.com/notes/pics/201701/02/235009drzwcaxem2wfgmdc.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:;" id="prev" class="arrow"><</a>
  <a href="javascript:;" id="next" class="arrow">></a>
  </div>
 </div>
 <script>
 window.onload = function(){
  var lunBo = document.getElementById('lunBo');
  var list = document.getElementById('list');
  var buttons = document.getElementById('buttons').getElementsByTagName('span');
  //console.log(buttons);
  var prev = document.getElementById('prev');
      var next = document.getElementById('next');
  var index = 1;
  var animated = false;
  var interval = 3000;
  var timer;
  //显示按钮的索引
  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 += 1;
        }
        animate(-750);
        showButton();
      };
      prev.onclick = function () {
        if (animated) {
          return;
        }
        if (index == 1) {
          index = 5;
        }
        else {
          index -= 1;
        }
        animate(750);
        showButton();
      };
  //parseInt()转换为纯数值
  function animate(offset){
  animated = true;
  var newLeft = parseInt(list.style.left) + offset; //目标值
  var time = 300; //位移总时间为300
  var interval = 10; //
  var speed = offset/(Math.floor(time/interval)); //每次位移量
  function go(){
  if( (speed < 0 && parseInt(list.style.left) > newLeft) || ( speed > 0 && parseInt(list.style.left) < newLeft) ){
   list.style.left = parseInt(list.style.left) + speed + 'px';
    setTimeout(go,interval);
  }else{
   animated = false;
   list.style.left = newLeft+ 'px';  //现在的位移
   if( newLeft > -750){           //假的辅助图
   list.style.left = -3750 + 'px';
   }
   if( newLeft < -3750){
   list.style.left = -750 + 'px';
   }
  }
  };
  go();  
  };
  //小按钮
  for(var i=0;i < buttons.length;i++){
  buttons[i].onclick = function(){

  if(this.className == 'on'){
   return;
  };
   var myIndex = parseInt(this.getAttribute('index'));
   var offset = -750 * (myIndex - index);

   animate(offset);
          index = myIndex;
          showButton();
  }
  }
  lunBo.onmouseout = play;
  lunBo.onmouseover = stop;
  play();
 }
 </script>
 </body>
</html>

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

Javascript 相关文章推荐
JsDom 编程小结
Aug 09 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
jquery实现图片预加载
Dec 25 Javascript
纯JS代码实现气泡效果
May 04 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
bootstrap 表单验证使用方法
Jan 11 #Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 #Javascript
原生js实现放大镜效果
Jan 11 #Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 #Javascript
You might like
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JS无限树状列表实现代码
2011/01/11 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
PHP统计代码行数的小代码
2019/09/19 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Python实现代码块儿折叠
2020/04/15 Python
Python pip使用超时问题解决方案
2020/08/03 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
Shell如何接收变量输入
2012/09/24 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
满月酒主持词
2014/03/27 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014国庆节标语口号
2014/09/19 职场文书
辞职信如何写
2015/02/27 职场文书
英文版辞职信
2015/02/28 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python