<!doctype html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>轮播图</title> <style> *{ margin:0; padding:0; } li{ list-style:none; } #lun{ width:790px; height:340px; border:1px solid #ccc; margin:0 auto; position:relative; cursor:pointer; } #lun img{ display:block; }
#lun>ul>li{
opacity:0;
/*
默认情况下：
所有的li全部设置透明度为0
设置过渡效果 opacity 发生改变，在1s钟内完成
*/
transition:opacity .5s linear;
/* 设置元素的定位方式为absolute,保证所有的li元素全部在lun元素内 */
position:absolute;
}
/*
给元素添加class="active"属性，相当于设置元素具有opacity样式，值是1
*/
#lun>ul>.active{
opacity:1;
}
#listnum{
width:180px;
height:20px;
background:rgba(255,255,255,0.3);
position:absolute;
bottom:20px;
left:50%;
margin-left:-90px;
border-radius:10px;
}
#listnum>ul>li{
width:12px;
height:12px;
background:#fff;
border-radius:6px;
float:left;
margin-top:4px;
margin-left:9.5px;
}
#listnum>ul>.activenum{
background:#DB192A;
}
#left,#right{
width:30px;
height:60px;
position:absolute;
background:rgba(0,0,0,0.1);
display:none;
color:#fff;
font-size:20px;
text-align:center;
line-height:60px;
opacity:0.5;
}
#left{
top:50%;
margin-top:-30px;
}
#right{
top:50%;
right:0px;
margin-top:-30px;
}
#left:hover,#right:hover{
background:rgba(0,0,0,0.6);
opacity:1;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head> <body> <div id=“lun”> <ul id=“imglist”> <li class=“active”><img src="./images/lun1.jpg" alt=""></li> <li><img src="./images/lun2.jpg" alt=""></li> <li><img src="./images/lun3.jpg" alt=""></li> <li><img src="./images/lun4.jpg" alt=""></li> <li><img src="./images/lun5.jpg" alt=""></li> <li><img src="./images/lun6.jpg" alt=""></li> <li><img src="./images/lun7.jpg" alt=""></li> <li><img src="./images/lun8.jpg" alt=""></li> </ul>
<div id="listnum">
<ul>
<li class="activenum"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 定义左箭头和右箭头 -->
<div id="left"><</div>
<div id="right">></div>
</div>
</body> <script> var run; function autoRun(){ if(run){ return; } run=setInterval(function(){ var nextLi=$(’.active’).next(); var NextNumLi=$(’.activenum’).next(); if(nextLi.length==0){ nextLi=$(’#imglist li:first’); } if(NextNumLi.length==0){ NextNumLi=$(’#listnum ul li:first’); } $(’.active’).removeAttr(‘class’); $(’.activenum’).removeAttr(‘class’); nextLi.attr(‘class’,‘active’); NextNumLi.attr(‘class’,‘activenum’);
},2000);
}
autoRun();
$('#lun').mouseover(function(){
clearInterval(run);
run=undefined;
$('#left').css('display','block');
$('#right').css('display','block');
}).mouseout(function(){
$('#left').css('display','none');
$('#right').css('display','none');
autoRun();
});
$('#listnum ul li').each(function(index,li){
$(li).attr('index',index);
});
$('#listnum ul li').mouseover(function(){
var index=$(this).attr('index');
$('.active').removeAttr('class');
$('.activenum').removeAttr('class');
$('#imglist li').eq(index).attr('class','active');
$('#listnum ul li').eq(index).attr('class','activenum');
});
$('#right').click(function(){
var nextLi=$('.active').next();
var NextNumLi=$('.activenum').next();
if(nextLi.length==0){
nextLi=$('#imglist li:first');
}
if(NextNumLi.length==0){
NextNumLi=$('#listnum ul li:first');
}
$('.active').removeAttr('class');
$('.activenum').removeAttr('class');
nextLi.attr('class','active');
NextNumLi.attr('class','activenum');
});
$('#left').click(function(){
var prevLi=$('.active').prev();
var prevNumLi=$('.activenum').prev();
if(prevLi.length==0){
prevLi=$('#imglist li:last');
}
if(prevNumLi.length==0){
prevNumLi=$('#listnum ul li:last');
}
$('.active').removeAttr('class');
$('.activenum').removeAttr('class');
prevLi.attr('class','active');
prevNumLi.attr('class','activenum');
});
</script>
</html>
