<!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>
<style type="text/css">
*{ margin:0px; padding:0px;}
ul,li{ list-style:none;}
.p_show{ float:left; position:relative; padding:10px;}
.b_img {width:441px; height:518px; background:url(../images/p_show_bg.png) right no-repeat;}
.b_img img{ width:438px; height:518px; position:absolute; }
.s_img img{ width:95px; height:95px; border:1px solid gray;}
.s_img li{ float:left; padding:15px 17px 10px 0px;}
</style>
<script src="js/jquery-1.6.2.min.js" type="text/javascript" ></script>
<script src="js/menu.js" type="text/javascript" ></script>
<SCRIPT type=text/javascript>
var _c = _h = 0;
$(function () {
$('.s_img li').hover(function(){
var i = $(this).index();
_c = i;
//play();
change(i);
clearInterval(_h);
},function(){play();}).eq(0).mouseover();
$(".b_img img").hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval("auto()", 5000);
}
function change(i)
{
// $('.s_img li').removeClass("p_on").eq(i).addClass("p_on");
$(".b_img img").stop(true,true).fadeOut('fast').eq(i).fadeIn('fast');
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</SCRIPT>
</head>
<body>
<div class="p_show">
<div class="b_img">
<a href="#"><img src="images/b_pro_img1.jpg" /></a>
<a href="#"><img src="images/b_pro_img2.jpg" /></a>
<a href="#"><img src="images/b_pro_img3.jpg" /></a>
<a href="#"><img src="images/b_pro_img4.jpg" /></a>
</div>
<ul class="s_img">
<li><img src="images/s_pro_img1.jpg" /></li>
<li><img src="images/s_pro_img2.jpg" /></li>
<li><img src="images/s_pro_img3.jpg" /></li>
<li><img src="images/s_pro_img4.jpg" /></li>
</ul>
</div>
</body>
</html>
jquery淡入淡出效果
最新推荐文章于 2024-04-11 20:08:56 发布