JS实现动态无缝轮播


Posted in Javascript onJanuary 11, 2020

在同学的帮助下,终于使用纯js代码实现了动态轮播,学无止境加油吧!

JS实现动态无缝轮播

效果图是这样的,我们需要定义一个div,并放入三张图片,还需要左右两个按钮,以及底下三个按钮三个div。

先看布局代码

<div class="banner" id="banner">
    <ul class="clear" >
      <li style="left:0" ><img src="k1.jpg"></li>
      <li style="left:100%" ><img src="k-2.jpg"></li>
      <li style="left:100%"><img src="k-3.jpg"></li>
    </ul>
    <div class="pageNav"></div>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

如何是css部分

.clear:after{
     display:block;
     content:"";
     clear:both;
    }
    .banner{
      width: 100%;
      position:relative;
      height: 390px;
    }
    .banner ul{
      width: 100%;
      height: 390px;
      list-style-type:none;
      overflow: hidden;
    }
    .banner ul li{
      width: 100%;
      position: absolute;
    }
    .pageNav{
      position: absolute;
      left:50%;
      bottom:20px;
      transform: translateX(-50%);
    }
    .pageNav a{
      display:inline-block;
      margin:0 5px;
      width: 20px;
      height: 20px;
      background-color:#fff;
      border-radius:50%;
      border:2px solid #000;
      cursor:pointer;
    }
    .pageNav a.cur{
      background-color:red;
    }
    .leftBtn, .rightBtn{
      position:absolute;
      top: 50%;
      transform:translateY(-50%);
      width: 40px;
      height: 50px;
      background-color:rgba(0, 0, 0, 0.5);
      cursor:pointer;
    }
    .leftBtn{
      left:0;
    }
    .rightBtn{
      right:0;
    }
    .leftBtn:hover,.rightBtn:hover{
      background-color:rgba(0, 0, 0, 0.8);
 }

接下来是js部分

var banner=document.getElementById("banner");
  var ul=banner.getElementsByTagName("ul")[0];
  var li=ul.getElementsByTagName("li");
  var pageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false;
  for(var i=0;i<li.length;i++){//给图片底下添加按钮
    pageA=document.createElement("a");
    if(i==0){
      pageA.className="cur";
    }
    pageNav.appendChild(pageA);
  }
  pageNav.addEventListener('click',pageNavClick,false);
  function pageNavClick(e){
    if(state){
      return;
    }
    e=e||window.event;//兼容性考虑
    for(var i=0;i<li.length;i++){
      if(pageNav.children[i]==e.target){
        index=n;
        var offset=i-n;
        n=i;
        showBtn(n);
        if(offset>0){
          showImg(-100);
        }else{
          showImg(100);
        }
      }
    }
  }
  function showBtn(index){
    for(var z=0;z<li.length;z++){
      pageNav.children[z].className="";
    }
    pageNav.children[index].className="cur";
  }
  function showImg(offset){
    clearInterval(timerElem);
    var speed=offset/20;
    timerElem=setInterval(function(){
      state=true;
      if(parseInt(li[n].style.left)==0){
        state=false;
        clearInterval(timerElem);
        li[n].style.left="0";
        for(var l=0;l<n;l++){
          li[l].style.left="-100%"
        }
        for(var r=n+1;r<li.length;r++){
          li[r].style.left="100%";
        }
      }else{
        li[n].style.left=parseInt(li[n].style.left)+speed+"%";
        li[index].style.left=parseInt(li[index].style.left)+speed+"%";
      }
    },100)
  }
  leftBtn.onclick=function(){
    if(state){
      return;
    }
    index=n;
    n--;
    if(n<0){
      n=li.length-1;
      li[n].style.left="-100%";
    }
    showBtn(n);
    showImg(100);
  }
  rightBtn.onclick=function(){
    if(state){
      return;
    }
    index=n;
    n++;
    if(n>li.length-
      1){
      n=0;
      li[n].style.left="100%";
    }
    showBtn(n);
    showImg(-100);
  }
  var timer;
  timer=setInterval(autoLunbo,3000);
  function autoLunbo(){
    rightBtn.onclick();
  }
  banner.onmouseover=function(){
    clearInterval(timer);
  }
  banner.onmouseout=function(){
    timer=setInterval(autoLunbo,3000);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
原生js实现无缝轮播图
Jan 11 #Javascript
JS实现轮播图效果
Jan 11 #Javascript
js实现带搜索功能的下拉框
Jan 11 #Javascript
js实现select下拉框选择
Jan 11 #Javascript
js实现二级联动简单实例
Jan 11 #Javascript
jQuery实现轮播图效果demo
Jan 11 #jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 #Javascript
You might like
PHP入门速成教程
2007/03/19 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python描述器descriptor详解
2015/02/03 Python
python中zip和unzip数据的方法
2015/05/27 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python输出数学符号实例
2020/05/11 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
白酒营销策划方案
2014/08/17 职场文书
2015年公司工作总结
2015/04/25 职场文书
锦旗赠语
2015/06/23 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android