js代码编写无缝轮播图
本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下
前言
这个是一个轮播图
提示:
请让最后一个img和第一个img是一张图片相同
且li数目为img数目-1;
一、无缝轮播图
让第一张和最后一张相同
type:第一张和最后一张相同;
在最后一张向下一张切换时,立刻跳到第一张然后向第二张正常切换
二、使用步骤
1.html代码
代码如下(示例):
本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下
前言
这个是一个轮播图
提示:
请让最后一个img和第一个img是一张图片相同
且li数目为img数目-1;
一、无缝轮播图
让第一张和最后一张相同
type:第一张和最后一张相同;
在最后一张向下一张切换时,立刻跳到第一张然后向第二张正常切换
二、使用步骤
1.html代码
代码如下(示例):
css代码
*{ margin:0; padding:0; } .banner{ position:relative; margin:auto; margin-top:20px; width:1140px; height:600px; border:1pxsolid#000; overflow:hidden; } .bannerul{ position:relative; width:10000px; } .bannerulli{ width:1140px; height:100%; float:left; } .bannerulimg{ width:1140px; height:100%; object-fit:cover; } .banner>div{ position:absolute; } .banner.qh{ position:absolute; bottom:0; right:0; height:20px; z-index:1; } .banner.qhdiv{ margin-right:10px; width:10px; height:10px; background:transparent; border:1pxsolid#f0f; border-radius:5px; float:left; z-index:1; } .left{ top:0; bottom:0; margin:auto; height:40px; width:20px; background:#f0f; left:0; z-index:1; } .right{ top:0; bottom:0; margin:auto; height:40px; background:#f0f; width:20px; right:0; z-index:1; }
2.js代码
代码如下:
startMove是一个运动框架缓冲运动;当然你也可以用其他的
varodiv=document.querySelector(".banner"); varoul=document.querySelector(".banner_img"); varaimg=oul.querySelectorAll("img"); varoqh=document.querySelector(".qh") varaqh_div=oqh.querySelectorAll("div"); varalist=aimg[0].offsetWidth; vari=0; init(); functioninit(){ for(varj=0;j0?Math.ceil(iSpeed):Math.floor(iSpeed); //3.检测所有运动是否到达目标 if(objAttr!=json[attr]){ bStop=false; } if(attr=="opacity"){ obj.style.filter='alpha(opacity='+(objAttr+iSpeed)+')'; obj.style.opacity=(objAttr+iSpeed)/100; }else{ obj.style[attr]=objAttr+iSpeed+'px';//需要又.属性名的形式改成[] } } if(bStop){//表示所有运动都到达目标值 clearInterval(obj.timer); if(fn){ fn(); } } },10); } /** *获取行间/内联/外部样式,无法设置 *@paramobj *@paramattr */ functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returngetComputedStyle(obj,false)[attr]; } }
精彩专题分享:jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。