jqueryで画像切り替えを実現
4392 ワード
以前jsで画像の切り替えを実現したのを覚えていますが、表示効果は硬く、jQueryという硬くてよく緩和されています.しかし、技術的な問題で、私が書いた効果は一定の改善を得たが、理想的な効果は得られなかった.以下は菜鳥コードで、多くの不足が改善されなければならないので、大神さんの指導を望んでいます.
ソースファイルのソースコードの無料ダウンロードアドレス:http://download.csdn.net/detail/u014703834/7862627
<!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