HTML+CSS+JavaScript实现轮播图从mooc⽹站哔哩哔哩上学到的：视频BV号为BV16W41127aQ和BV1hW411y79J，up：红点⼯⼚HTML
<div class="lunboContainer">
css鼠标点击样式<div class="lunboLeft"><!--轮播图向左移动-->
<img src="选择您的路径/icon-slides.png" id="leftImg">
</div>
<div class="lunboRight"><!--轮播图向右移动-->
<img src="选择您的路径/icon-slides.png" id="rightImg">
</div>
<ul id="imgList">
<li class="item active"><img src="选择您的路径/1.jpg"></li>
<li class="item"><img src="选择您的路径/2.jpg"></li>
<li class="item"><img src="选择您的路径/3.jpg"></li>
<li class="item"><img src="选择您的路径/4.jpg"></li>
<li class="item"><img src="选择您的路径/5.jpg"></li>
</ul>
<ul id="pointList"><!-- 轮播图下⾯的⼩点点，点哪个点显⽰对应的图⽚-->
<li class="point active" data-index='0'></li>
<li class="point" data-index='1'></li>
<li class="point" data-index='2'></li>
<li class="point" data-index='3'></li>
<li class="point" data-index='4'></li>
</ul>
</div>
CSS
.lunboContainer{
width:100%;
height:400px;
margin:0 auto;
position:relative;
}
.lunboLeft{
position:absolute;
z-index:10;
margin-left:0px;
margin-top:130px;
width:60px;
height:100px;
overflow:hidden;
}
.lunboLeft img{
height:100px;
margin-left:-120px;
}
.lunboRight{
position:absolute;
z-index:10;
right:0px;
margin-top:130px;
width:60px;
height:100px;
overflow:hidden;
}
.lunboRight img{
height:100px;
margin-left:-180px;
}
#imgList{
width:100%;
height:400px;
padding:0;        /* padding 设置0 */
margin:0;        /* margin 设置0 */
position:relative;
}
.item{
position:absolute;
width:100%;
list-style-type: none;
height:100%;
float: left;
opacity:0;
transition:opacity 1s;
}
.lunboContainer ul img{
width:100%;
height:100%;
.item.active{
opacity:1;
z-index:5;
}
#pointList{
padding:0;
list-style-type: none;
position:absolute;
right:20px;
bottom:20px;
z-index:10;
}
.point{
width:8px;
height:8px;
border-radius:100%;
background-color:rgb(10,10,10);
float:left;
z-index:10;
margin-right:18px;
border-style:solid;
border-width:2px;
border-color:white;
cursor:pointer;
}
.point.active{
background-color:rgba(255,255,255,0.6);
}//为正在显⽰的点点设置特殊样式
Javascript
var index=0;
var ElementsByClassName("item");//图⽚
var ElementById("leftImg");//向左
var ElementById('rightImg');//向右
var ElementsByClassName("point");//⼩点点
var timeOut=0;
function clearActive(){
for(var i=0;i<imgs.length;i++){
imgs[i].className='item';
points[i].className='point';
}
}
function goNext(){
clearActive();
index++;
index=index%imgs.length;
imgs[index].className='item active';
points[index].className='point active';
timeOut=0;
}
function goPre(){
clearActive();
index--;
if(index<0){
index=imgs.length-1;
}
imgs[index].className='item active';
points[index].className='point active';
}
/*当⿏标悬停在向左向右的图⽚上⽅时需要改变图⽚样式使⽤户得到相应的反馈，这⾥学习了⼩⽶商城主页轮播图的做法，只⽤⼀张图⽚，通过改变这张图⽚到边界的距离实现样式改变*/ function preHover(){
leftImg.style.marginLeft="0px";
}
function nextHover(){
rightImg.style.marginLeft="-60px";
}
function preHout(){
leftImg.style.marginLeft="-120px";
}
function nextHout(){
rightImg.style.marginLeft="-180px";
}
/*************************************************/
function jmpByPoint(pointIndex){
clearActive();
index=pointIndex;
imgs[index].className="item active";
points[index].className='point active';
timeOut=0;
}
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var Attribute("data-index");
jmpByPoint(pointIndex);
}
leftImg.addEventListener('click',function(){
goPre();
})
leftImg.addEventListener('mouseover',function(){
preHover();
})
leftImg.addEventListener('mouseout',function(){
preHout();
})
rightImg.addEventListener('click',function(){
goNext();
})
rightImg.addEventListener('mouseover',function(){
nextHover();
})
rightImg.addEventListener('mouseout',function(){
nextHout();
})
setInterval(function(){
timeOut++;
if(timeOut==10){
goNext();
timeOut=0;
}
},500)/*此⽅法使得timeOut参数每隔0.5（500ms）秒加⼀，当timeOut加到10时（即5秒）显⽰下⼀张图⽚，同时timeOut清零，
使⽤timeOut参数⽽不直接使⽤setInterval(fun(),5000)函数定时的⽬的在于：
假设当⽤户点击点点跳到某张图⽚时，距离到达5000毫秒只剩⼀丝丝时间，那张图⽚就马上跳⾛了，⽽⽤户可能还没来得及看清除图⽚，
使⽤timeOut定时后，当⽤户通过点跳转之后，将timeOut参数清零，可实现重新计时，就不会马上跳⾛，见function jmpByPoint(pointIndex)；*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。