記得先前用js實現了圖片的切換，但是顯示效果顯示的很生硬，使用jQuery這種生硬得到了很好的緩解。但是由於技術問題，我寫的效果雖然得到了一定的改善，可還是沒有達到理想的效果。下面便是菜鳥代碼，有很多不足有待改善，希望各位大神多多指導。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show</title>
<meta name="author" content="Administrator" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<!-- Date: 2014-09-04 -->
<style type="text/css">
body {margin:0;padding:0;}img{border:none;}
.banner{margin:0 auto;width:1002px;height:520px;background:#123555;position: relative;}
.banner span{width:1002px;height: 520px;}
.banner span img{width:1002px;height: 520px;}
.hide{display: none;}
.left,.right{width:64px;height:64px;top:208px;display:none;cursor:pointer;position:absolute;}
.left{left:5px;}
.right{right: 5px;}
.explain{width:100%;height:40px;top:480px;text-align:center;background:#000000;position:absolute; }
.explain ul{margin:0;padding:0;}
.explain ul li{width:24px;height:40px;list-style:none;cursor:pointer;display:inline-block;background:url(images/triggers.png) no-repeat 6px 14px;}
.explain .bannerNow{background:url(images/triggers_cur.png) no-repeat 6px 14px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
//隱藏或者顯示箭頭
$(".banner").mousemove(function(){
$(".left,.right").css("display","block");
});
$(".banner").mouseout(function(){
$(".left,.right").css("display","none");
});
//自動循環條件，hover()事件，mousemov和mouseout方法的結合
var canLoop=true;
$(".banner").hover(function(){
canLoop=false;
},function(){
canLoop = true;
});
var imgs=$(".banner span");
var imgsIndex=0;
//自動循環
var loop=setInterval(plays, 5000);
function plays(){
if(canLoop){//判斷條件
imgsIndex=++imgsIndex;//imgsIndex++是錯誤的。
if(imgsIndex>imgs.length-1){
imgsIndex=0;
}
changeImg(imgsIndex);
}}
$(".left").click(function(){
imgsIndex=--imgsIndex;
if(imgsIndex<0){
imgsIndex=imgs.length-1;
}
changeImg(imgsIndex);
});
$(".right").click(function(){
imgsIndex=++imgsIndex;
if(imgsIndex>imgs.length-1){
imgsIndex=0;
}
changeImg(imgsIndex);
});
$('.explain ul li').click(function() {
imgsIndex = $('.explain ul li').index($(this));
changeImg(imgsIndex);
});
});
function changeImg(index){
//stop(),停止動畫.animate(css，time).
$(".banner span").hide().stop().animate({"filter":"alpha(opacity=0),","opacity":"0"},2000).eq(index).show().animate({"filter":"alpha(opacity=1),","opacity":"1"},2000);
$(".explain ul li").eq(index).addClass("bannerNow").siblings().removeClass("bannerNow");
}
</script>
</head>
<body>
<div class="banner">
<span><a href="#"><img src="images/1.jpg"></a></span>
<span class="hide"><a href="#"><img src="images/2.jpg"></a></span>
<span class="hide"><a href="#"><img src="images/3.jpg"></a></span>
<span class="hide"><a href="#"><img src="images/4.jpg"></a></span>
<span class="hide"><a href="#"><img src="images/5.jpg"></a></span>
<div class="left"><img src="images/left.png"></div>
<div class="right"><img src="images/right.png"></div>
<div class="explain">
<ul>
<li class="bannerNow"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
源文件源代碼免費下載地址：http://download.csdn.net/detail/u014703834/7862627
