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>

jq简单的淡入淡出图片切换

猜你喜欢