微客导航 » 文章资讯 » js实现轮播图特效

js实现轮播图特效

2023-07-24 02:16:03 169

本文实例为大家分享了js实现轮播图特效的具体代码，供大家参考，具体内容如下

只需要修改图片的src即可

html:

< >

style:

*{
margin:0;
padding:0;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
#rollImgBox{
/*这里让盒子居中，应用到具体页面删除即可*/
margin:20pxauto;

/*如果该轮播图不是独占一行，需要将其改为行内块元素*/
display:block;
position:relative;
/*在这里设置装载图片的框框的宽高*/
width:947px;
height:585px;

/*在这里设置边框的样式用outline，这样就不会影响到后面的js了
/*加边框，用outline即可，不会影响实际的距离*/
outline:5pxsolidblue;
overflow:hidden;
}
#rollImgBox.photos.moveimg{
/*在这里设置图片的宽高，与边框的宽高相同*/
width:947px;
height:585px;
}
#rollImgBox.photos{
position:relative;
/*移动的是图片的宽度,左移947px*/
left:-947px;
}
#rollImgBox:hover{
cursor:pointer;
}
#rollImgBox.photosdiv{
float:left;
}
#rollImgBox.points{
position:absolute;
/*在这里修改圆点导航的位置*/
bottom:30px;
right:170px;/*右下方*/
text-align:center;
}
#rollImgBox.pointsspan{
display:inline-block;
/*在这里可以更改圆点的大小*/
text-align:center;
line-height:66px;
font-size:24px;
font-family:微软雅黑;
width:66px;
height:66px;
background:rgba(112,117,112,.6);
border-radius:50%;
margin-left:15px;
}
#rollImgBox.points.pointsNow{
background:rgba(62,255,49,.6);
}

/*左右按钮*/
#rollImgBox.leftPoint{
width:60px;
height:60px;
background:rgba(0,0,0,.5);
text-align:center;
line-height:60px;
position:absolute;
font-size:30px;
color:white;
top:290px;
left:0;
}
#rollImgBox.rightPoint{
width:60px;
height:60px;
background:rgba(0,0,0,.5);
text-align:center;
line-height:60px;
position:absolute;
font-size:30px;
color:white;
top:290px;
right:0;
}
#rollImgBox.leftPoint:hover{
background:rgba(255,0,0,.5);
}
#rollImgBox.rightPoint:hover{
background:rgba(255,0,0,.5);
}

script:

window.onload=function(){
letrollImgBox=document.querySelector("#rollImgBox");
letphotos=document.querySelector("#rollImgBox.photos");
letallimg=document.querySelectorAll("#rollImgBox.moveimg");
letindex=2;
//动态设计移动图片的框框宽高
//(rollImgBox.offsetWidth)是要剪去边框的宽度
photos.style.width=(allimg.length)*(rollImgBox.offsetWidth)+"px";
photos.style.height=rollImgBox.offsetHeight+"px";
//动态创建小圆点
letpoint=newArray();
letpoints=document.querySelector("#rollImgBox.points");
for(leti=0;i<(allimg.length-2);i++){
point[i]=document.createElement("span");
point[i].innerHTML=(i+1);
points.appendChild(point[i]);
}
point[0].className="pointsNow";

letrollImgIterval=setInterval(function(){
//图片的轮播
if(index===allimg.length){
photos.style.left=0;
index=1;
photos.style.transition="0s";
point[0].className="pointsNow";
}else{
photos.style.transition="1.5s";
}
photos.style.left=-(rollImgBox.offsetWidth)*index+"px";
index++;
//小圆点的变换
for(letj=0;j<(allimg.length-2);j++){
if(j===index-2){
point[j].className="pointsNow";
}else{
point[j].className="";
}
}
//这里是最后一张图片（与展现的第一张一样的图）设置小圆点样式
if(index===allimg.length){
point[0].className="pointsNow";
}
},2000);

//当用户把鼠标放到rollImgBox盒子中，需要查看图片，自动轮播停止
rollImgBox.onmouseover=function(){
clearInterval(rollImgIterval);
};
rollImgBox.onmouseout=function(){
rollImgIterval=setInterval(function(){
//图片的轮播
if(index===allimg.length){
photos.style.left=0;
index=1;
photos.style.transition="0s";
point[0].className="pointsNow";
}else{
photos.style.transition="1.5s";
}
photos.style.left=-(rollImgBox.offsetWidth)*index+"px";
index++;
//小圆点的变换
for(letj=0;j<(allimg.length-2);j++){
if(j===index-2){
point[j].className="pointsNow";
}else{
point[j].className="";
}
}
//这里是最后一张图片（与展现的第一张一样的图）设置小圆点样式
if(index===allimg.length){
point[0].className="pointsNow";
}
},2000);
};

//点击小圆点，跳转到对应的图片位置
for(letk=0;k<(allimg.length-2);k++){
point[k].onmousedown=function(){
photos.style.left=-(rollImgBox.offsetWidth)*(k+1)+"px";
//小圆点的变换
for(letj=0;j<(allimg.length-2);j++){
if(j===k){
point[j].className="pointsNow";
}else{
point[j].className="";
}
}
//点击小圆点之后更改index的值
index=k+2;
}
}

//点击左右方向键，对图片进行滑动
letleftPoint=document.querySelector('#rollImgBox.leftPoint');
letrightPoint=document.querySelector('#rollImgBox.rightPoint');
leftPoint.onclick=function(){
photos.style.transition="1s";
//向左滑动一张图片，并修改index的值（index--）
letdis=index-2;
//当dis为1时，圆点到达第一个位置，如果再往左移动一个，圆点应该到达最后一个位置
if(dis<1){
dis=allimg.length-2;
photos.style.left=0;
point[dis-1].className="pointsNow";
point[0].className="";
index=allimg.length;
}else{
photos.style.left=-(rollImgBox.offsetWidth)*dis+"px";
point[dis-1].className="pointsNow";
point[dis].className="";
}

//从第一张顺滑切换到最后一张
setTimeout(function(){
if(photos.style.left==='0px'){
photos.style.left=-(rollImgBox.offsetWidth)*(allimg.length-2)+"px";
photos.style.transition='0s';
index=allimg.length-1;
}
},1000);
index--;
};
rightPoint.onclick=function(){
photos.style.transition="1s";
//向右滑动一张图片，并修改index的值（index++）
letdis=index-1;
//当dis为5时，圆点到达最后一个位置，如果再往右移动一个，圆点应该到达第一个位置
if(dis>=(allimg.length-2)){
photos.style.left=-(rollImgBox.offsetWidth)*(allimg.length-1)+"px";
point[0].className="pointsNow";
point[allimg.length-3].className="";
index=1;
}else{
photos.style.left=-(rollImgBox.offsetWidth)*index+"px";
point[dis].className="pointsNow";
point[dis-1].className="";
}

//从最后一张顺滑切换到第一张
setTimeout(function(){
if(photos.style.left===((-(rollImgBox.offsetWidth)*(allimg.length-1))+'px')){
photos.style.left=-(rollImgBox.offsetWidth)+"px";
photos.style.transition='0s';
index=2;
}
},1000);
index++;
};
};

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票，大家继续关注更多精彩焦点轮播图。

返回顶部
3162201930
czq8825@qq.com