好资源导航 » 文章资讯 » JS轮播图实现简单代码

JS轮播图实现简单代码

2023-09-25 23:54:05 47

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

思路：

1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示

代码：





轮播图

.container{
margin:0auto;
width:600px;
height:400px;
position:relative;
overflow:hidden;
border:4pxsolidgray;
box-shadow:3px3px5pxgray;
border-radius:10px;
}
.list{
width:4200px;
height:400px;
position:absolute;
top:0px;
}
img{
float:left;
width:600px;
height:400px;
}
.dots{
position:absolute;
left:40%;
bottom:30px;
list-style:none;
}
.dotsli{
float:left;
width:8px;
height:8px;
border-radius:50%;
background:gray;
margin-left:5px
}
.dots.active{
background:white;
}
.pre,.next{
position:absolute;
top:40%;
font-size:40px;
color:white;
text-align:center;
background:rgba(128,128,128,0.5);
/*display:none;*/
}
.pre{
left:30px;
}
.next{
right:30px;
}

varindex=1,timer; functioninit(){ eventBind(); autoPlay(); } init(); functionautoPlay(){ timer=setInterval(function(){ animation(-600); dotIndex(true); },1000) } functionstopAutoPlay(){ clearInterval(timer); } functiondotIndex(add){ if(add){ index++; } else{ index--; } if(index>5){ index=1; } if(index<1){ index=5; } dotActive(); } functiondotActive(){ vardots=document.getElementsByClassName("dot"); varlen=dots.length; for(vari=0;i-600){ lists.style.left="-3000px"; } else{ lists.style.left=left+"px"; } }

精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播

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

返回顶部
514930285
czq8825@qq.com

JS轮播图实现简单代码

热门推荐

随机推荐