<!DOCTYPE html>
<html>
<head>
<title>ads</title>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
.banner {
position: relative;
width: 100%;
overflow: hidden;
}
.banner-list img {
display: none;
width: 100%;
}
.dot {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -86px;
z-index: 10;
}
.dot li {
float: left;
width: 20px;
height: 20px;
margin: 0 6px;
border-radius: 10px;
background: #fff;
opacity: 0.6;
}
.active {
opacity: 1!important;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner-list">
<img src="images/ads/1.jpg" alt=""/>
<img src="images/ads/2.jpg" alt=""/>
<img src="images/ads/3.jpg" alt=""/>
<img src="images/ads/4.jpg" alt=""/>
<img src="images/ads/5.jpg" alt=""/>
</div>
<ul class="dot">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
</div>
<script type="text/javascript">
$(function(){
//benner塊高度
$(".banner-list").height($(".banner-list img").height());
var index = 0;
var adTimer = null;
//dot操作顯示不同圖片
$(".dot li").mouseover(function(){
imgLength = $(".banner-list img").length;
index=$(".dot li").index(this);
imgShow(index);
}).eq(0).mouseover();
//鼠標位於圖片上停止輪播，鼠標離開圖片開始輪播
$(".banner").hover(function(){
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer = setInterval(function(){
imgShow(index);
index++;
if(index == imgLength){index = 0;}
},2000);
}).trigger("mouseleave");
//顯示圖片
function imgShow(index){
$(".banner-list img").eq(index).fadeIn().siblings().fadeOut();
$(".dot li").eq(index).addClass("active").siblings().removeClass("active");
}
})
</script>
</body>
</html>
jquery - 焦點圖下標顯示、自動輪播（下標手動）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章