1. 程式人生 > >jq簡單的淡入淡出圖片切換

jq簡單的淡入淡出圖片切換

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style>
body,ul,li{ margin:0; padding:0;}
.divbox{ width: 1000px; margin:0 auto; position: relative;}
.div_a{ width: 510px;border:1px solid #eee; margin:0 auto; position: relative; height: 500px; overflow: hidden;}
.div_a ul{ overflow:hidden; position: relative; height: 500px; width: 100%;}
.div_a li{ width:510px; float:left; list-style:none; text-align:center; position: absolute; left: 0; display: none;}
.div_a li span{ margin:0 auto;}
.next{ position: absolute; right: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
.prev{ position: absolute; left: 0; height: 50px; top: 0; width: 50px; display: block; background: #000;}
.btn{ position: absolute; bottom: 20px; height: 17px; width:100%; text-align: center;}
.btn span{ width:17px; height:17px; display:inline-block; background:#fff; margin:0 10px; border:1px solid #fdd;}
.btn .hover{width:17px; height:17px; display:inline-block; background:#000; margin:0 10px; border:1px solid #fdd;}
</style>
<script language="javascript">
$(function(){
var ii=0;
var stra=$("#fuck").find("li");
var len=stra.length;
stra.eq(0).show();
var orager=setInterval(timesar,3000);
function timesar(){
  ii++
  if(ii>len-1){
  ii=0;
  }
  dig(ii)
}
$(".prev,.next,#stra,.btn").hover(function(){ //滑鼠移上去停止動畫,移開執行
  clearInterval(orager)
},function(){
  orager=setInterval(timesar,3000);
})
function dig(ii){
  stra.eq(ii).fadeIn().siblings().fadeOut();
  $(".btn span").stop().removeClass("hover").eq(ii).stop().addClass("hover");
}
$(".btn span").mouseenter(function(){
  ii=$(this).index();
  dig(ii)
})

$(".prev").click(function(){
 ii--
 if(ii<0){
  ii=len-1;
 }
  dig(ii)
})
$(".next").click(function(){
 ii++
 if(ii>len-1){
  ii=0;
 }
  dig(ii)
})
})
</script>

</head>

<body>
<div class="divbox">
<div class="div_a">
   <ul id="fuck">
    <div id="stra">
     <li><span style="width:500px;height:500px;background:#000;display:block;"></span></li>
     <li><span style="width:500px;height:500px;background:#ff0;display:block;"></span></li>
     <li><span style="width:500px;height:500px;background:#f00;display:block;"></span></li>
     <li><span style="width:500px;height:500px;background:#dff;display:block;"></span></li>
    </div>

   </ul>
      <div class='btn'>
    <span class="hover"></span><span></span><span></span><span></span>
   </div>
</div>
    <a class="prev" href="javascript:;"></a>
   <a class="next" href="javascript:;"></a>
</div>

</body>
</html>