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父窗口控制只弹出一个子窗口
Apr 10 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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中一个控制字符串输出的函数
2006/10/09 PHP
php session应用实例 登录验证
2009/03/16 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php文件上传类的分享
2017/07/06 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
javascript 函数式编程
2007/08/16 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
Python应用库大全总结
2018/05/30 Python
Python 变量的创建过程详解
2019/09/02 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
品质保证书格式
2015/02/28 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
python开发制作好看的时钟效果
2022/05/02 Python