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 相关文章推荐
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
VUE长按事件需求详解
Oct 18 Javascript
实例教学如何写vue插件
Nov 30 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python实现树形打印目录结构
2018/03/29 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android