Tags标签 网战地图
当前位置: 主页 > 网页设计 > JavaScript >

js实现无缝轮播图特效

2020-05-30 16:40 [JavaScript] 来源于:网络整理
导读:这篇文章主要为大家详细介绍了js实现无缝轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了js实现无缝轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

用原生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>

(编辑:le__seul)

相关内容
网友评论

栏目列表

推荐文章