欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现无缝轮播图特效

程序员文章站 2022-06-07 23:13:05
用原生js实现无缝轮播图,供大家参考,具体内容如下index.js:var config = { imgwidth:380,//图片尺寸 dotwidth:8,//小圆点尺寸 doms:{ divim...

用原生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')
 }
}

index.html:

<!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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。