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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue实现公共方法抽离
Jul 31 Javascript
原生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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
js实现简单的打印表格
2020/01/15 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
学校教学工作总结2015
2015/05/19 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
MySQL如何解决幻读问题
2021/08/07 MySQL
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL