微客导航 » 文章资讯 » js代码编写无缝轮播图

js代码编写无缝轮播图

2023-07-16 20:20:04 344

本文实例为大家分享了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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js代码编写无缝轮播图

热门推荐

随机推荐