<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.4.min.js.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;padding: 0;list-style: none; ;
}
#box{
width: 218px;
height: 300px;
border: #000000 solid 1px;
position: absolute;
overflow: hidden;
}
ul {
position:absolute;
right:0;
bottom: 0;
z-index: 99;
}
ul li{
display: inline-block;
text-align: center;
}
ol{
position: relative;
}
.active{
background-color: rgba(85, 170, 127, 0.5);
}
button{
width: 20px;
}
img{
display: block;
}
</style>
<script type="text/javascript">
$(function(){
var i=0;
$("ul li").click(function(){
i=$(this).index(); // i用来获取被点击的li标签的下标
// console.log(i);
tab();
})
var timer=null;
timer=setInterval(function(){
i++;
tab();
},3000)
$("#box").mouseenter(function(){
clearInterval(timer);
$("img").css("opacity",0.8)
}).mouseleave(function(){
$("img").css("opacity","")
timer=setInterval(function(){
i++;
tab();
},3000)
})
/* tab图片移动函数 */
function tab(){
$("button").attr("class","").eq(i).attr("class","active"); // 先把button的class置空,根据定时器或者点击事件传过来的i值来控制按钮的颜色变化
if(i==$("ul li").size()){
$("button").eq(0).attr("class","active");
}
// console.log(i);
$("ol").stop().animate({top:-300*i},1000,function(){
if(i==$("button").size()){
$("ol").css("top",0);
i=0;
}
});
}
})
</script>
</head>
<body>
<div id="box">
<ul>
<li><button class="active">1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
</ul>
<!-- 要把所有img用个父容器套起来,滑动整个父容器,如果不套容器,轮播图片将会错乱 -->
<ol>
<li><img src="img/introduce1.jpg" /></li>
<li><img src="img/introduce2.jpg" /></li>
<li><img src="img/introduce3.jpg" /></li>
<li><img src="img/introduce1.jpg" /></li>
</ol>
</div>
</body>
</html>
轮播图的容器最好和照片一样大,这样图片清晰一点;
引入的jquery-min-js版本:1.12.4
功能实现:自动轮播,点击按钮可以切换图片,鼠标移入图片透明度提高and停止轮播,移出继续轮播