<html>
<head>
<meta charset='utf-8'>
<title>圖檔輪播</title>
<style>
* {
margin:0;
padding:0;
}
.box {
width:600px;
height:400px;
margin:50px auto;
position:relative;
overflow:hidden;
}
.ctrl {
width:50px;
height:50px;
color:gray;
font-size:50px;
text-align:canter;
line-height:50px;
border:none;
background:none;
outline:none;
cursor:pointer;
position:absolute;
z-index:1;
top:40%;
display:none;
}
.next {
right:0;
}
.content {
width:1800px;
height:400px;
position:relative;
left:-600px;
}
img {
width:600px;
height:400px;
display:block;
float:left;
}
.dot {
width:100%;
height:50px;
position:relative;
bottom:50px;
text-align:center;
line-height:50px;
}
.dot div {
width:10px;
height:10px;
background:white;
display:inline-block;
border-radius:5px;
margin:0px 5px;
}
.dot .selected {
background:gold;
}
</style>
</head>
<body>
<div class="box">
<button class="ctrl prev"><</button>
<button class="ctrl next">></button>
<div class="content">
<img src="haizei2.jpg"/>
<img src="haizei3.jpg"/>
<img src="haizei1.jpg"/>
</div>
<div class="dot">
<div class="selected"></div>
<div></div>
<div></div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function () {
//記錄顯示圖檔的序号
var index = 0
//光标移入顯示控制按鈕 光标移出隐藏控制按鈕
$('.box').hover(function() {
$('.ctrl').show(300)
},function () {
$('.ctrl').hide(300)
})
//prec按鈕
$('.prev').click(function() {
//判斷是否正在動畫
if ($('.content').is(':animated')){
return
}
$('.content').animate({left:0},'slow','linear',function() {
$('.content').prepend($('img:last'))
$('.content').css('left','-600px')
//更新顯示圖檔的序号
if (--index == -1) {
index=2
}
//設定對應的頁碼辨別
$('.dot div').eq(index).addClass('selected').siblings().removeClass('selected')
})
})
//next按鈕
$('.next').click(function() {
//判斷是否正在動畫
if ($('.content').is(':animated')){
return
}
$('.content').animate({left:'-1200px'},'slow','linear',function() {
$('.content').append($('img:first'))
$('.content').css('left','-600px')
//更新顯示圖檔的序号
if (++index==3){
index=0
}
//設定對應的頁碼辨別
$('.dot div').eq(index).addClass('selected').siblings().removeClass('selected')
})
})
})
</script>
![CSS3圖檔懸停放大動畫[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)