您的位置：首页 > Web前端 > JavaScript

js实现无缝轮播图特效

2020-05-05 07:06 615 查看

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

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 轮播图

相关文章推荐

新的分享

章节导航