当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现无缝轮播图特效

js实现无缝轮播图特效

2020年05月10日  | 移动技术网IT编程  | 我要评论

用原生js实现无缝轮播图，供大家参考，具体内容如下

index.js：

var config = {
 imgwidth:380,//图片尺寸
 dotwidth:8,//小圆点尺寸
 doms:{
 divimgs:document.queryselector('.imgs'),
 divdots:document.queryselector('.circle'),
 divdirection:document.queryselector('.direction'),
 divcontainer:document.queryselector('.container')
 },
 curindex:0,//实际图片索引，0 ~ imgnumber-1
 timer:{
 duration:16,//运动间隔时间
 total:1000,//总时间
 id:null//计时器编号
 }
}
//图片的数量
config.imgnumber = config.doms.divimgs.children.length;
//初始化元素尺寸
config.imgswidth = (config.imgnumber + 2)*config.imgwidth;
config.dotswidth = (config.imgnumber + 2)*config.dotwidth;

//初始化
function inti(){
 intiwidth();
 inticount();
 intielement();
 intiposition();
 function intiwidth(){
 config.doms.divimgs.style.width = config.imgswidth + 'px';
 config.doms.divdots.style.width = config.dotswidth + 'px';
 }
 function inticount(){
 for(var i = 0; i < config.imgnumber; i ++){
 var p = document.createelement('p');
 config.doms.divdots.appendchild(p);
 }
 }
 function intielement(){
 var first = config.doms.divimgs.children[0],last = config.doms.divimgs.children[config.imgnumber-1];
 var newimg = first.clonenode(true);//深度克隆
 config.doms.divimgs.appendchild(newimg);
 newimg = last.clonenode(true);
 config.doms.divimgs.insertbefore(newimg,first);
 }
 function intiposition(){
 var left = (-config.curindex-1)*config.imgwidth;
 config.doms.divimgs.style.marginleft = left + 'px';
 setdots();//小圆点的激活状态位置设置
 }
}
inti();

//小圆点的激活状态位置设置
function setdots(){
 for(var i = 0; i < config.doms.divdots.children.length; i++){
 var dot = config.doms.divdots.children[i];
 if(i === config.curindex){
 dot.classname = 'select';
 }else{
 dot.classname = '';
 }
 }
}

/*
 图片切换
 index: 图片索引
 directions: 图片切换方向（left,right）
*/
function switchto(index,directions){
 if(index === config.curindex){
 return;
 }
 if(!directions){
 directions = 'right';//默认状态下向右切换图片
 }

 //最终的显示图片; 图片容器的marginleft
 var newleft = (-index-1)*config.imgwidth;
 animateswitch();
 //config.doms.divimgs.style.marginleft = newleft + 'px';
 
 //小圆点的激活状态位置设置
 config.curindex = index;
 setdots();

 //一张图片的总运动次数
 var number = math.ceil(config.timer.total/config.timer.duration);
 //当前运动次数
 var curnumber = 0;
 
 var distance,//总运动距离
 totalwidth = config.imgnumber*config.imgwidth,
 marginleft = parsefloat(getcomputedstyle(config.doms.divimgs).marginleft);
 if(directions === 'left'){
 if(newleft < marginleft){
 distance = newleft - marginleft;
 }else{
 distance = -(totalwidth-math.abs(newleft - marginleft));
 }
 }
 if(directions === 'right'){
 if(newleft > marginleft){
 distance = newleft - marginleft;
 }else{
 distance = totalwidth-math.abs(newleft - marginleft);
 }
 } 

 //每次改变的距离
 var everdistence = distance/number; 

 //逐步改变marginleft
 function animateswitch(){
 clearanimate();
 config.timer.id = setinterval(function(){

 marginleft += everdistence;
 if(directions === 'left' && math.abs(marginleft) > totalwidth){
 marginleft += totalwidth;
 }
 else if(directions === 'right' && math.abs(marginleft) < config.imgwidth){
 marginleft -= totalwidth;
 }
 config.doms.divimgs.style.marginleft = marginleft + 'px';

 curnumber ++;
 if(curnumber === number){
 clearanimate();
 }
 },config.timer.duration);
 }

 //清空计时器
 function clearanimate(){
 clearinterval(config.timer.id);
 config.timer.id = null;
 }
}

//默认情况下自动向右轮播图片
var timer = setinterval(function(){
 toright();
},2000);
config.doms.divcontainer.onmouseleave = function() {
 timer = setinterval(function(){
 toright();
 },2000);
}
//鼠标移出则清空定时器
config.doms.divcontainer.onmouseover = function() {
 clearinterval(timer);
}

//左右点击事件
config.doms.divdirection.onclick = function(e){
 clearinterval(timer);
 if(e.target.classlist.contains('left')){
 toleft();
 }
 if(e.target.classlist.contains('right')){
 toright();
 }
}

function toleft(){
 var index = config.curindex - 1;
 if(index < 0){
 index = config.imgnumber - 1;
 }
 switchto(index,'right');
}
function toright(){
 var index = config.curindex + 1;
 if(index > config.imgnumber - 1){
 index = 0;
 }
 switchto(index,'left');
}

//小圆点点击事件
config.doms.divdots.onclick = function(e){
 if(e.target.tagname === 'p'){
 var index = array.from(this.children).indexof(e.target);
 switchto(index,index > config.curindex? 'left' : 'right')
 }
}

：

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>无缝轮播图</title>
 <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
 <div class="container">
 <div class="imgs">
 <img class="item" src="../imagejpg/1.jpg" alt="">
 <img class="item" src="../imagejpg/2.jpg" alt="">
 <img class="item" src="../imagejpg/3.jpg" alt="">
 </div>
 <div class="circle">
 <!-- <p></p>
 <p class="select"></p>
 <p></p>
 <p></p>
 <p></p> -->
 </div>
 <div class="direction">
 <div class="item left">&lt;</div>
 <div class="item right">&gt;</div>
 </div>
 </div>
 <script src="./index.js">
 
 </script>
</body>
</html>

index.css：

.container{
 width:380px;
 height:250px;
 border:1px solid;
 margin:0 auto;
 position:relative;
 overflow: hidden;
}
.container .imgs{
 
}
.container .imgs .item{
 width:380px;
 height:250px;
 display:block;
 float:left;
 top:0;
}
.container .circle{
 position:absolute;
 left:0;
 right:0;
 margin:0 auto;
 background:rgba(0,0,0,.3);
 bottom:8px;
 border-radius:5px;
}
.container .circle p{
 width:8px;
 height:8px;
 background:#fff;
 border-radius:50%;
 float:left;
 margin:2px;
 cursor:pointer;
}
.container .circle p.select{
 background:#f40;
}
.container .direction .item{
 background:rgba(0,0,0,.4);
 position:absolute;
 top:120px;
 width:20px;
 height:26px;
 padding:2px;
 box-sizing:border-box;
 display:none;
 cursor:pointer;
}
.container .direction .item:hover{
 background:rgba(0,0,0,.5);
}
.container:hover .direction .item{
 display:block;
}
.container .direction .left{
 left:0;
 border-radius:0 15px 15px 0;
}
.container .direction .right{
 right:0;
 padding-left:6px;
 border-radius:15px 0 0 15px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网