jquery淡入淡出效果

最新推荐文章于 2021-09-25 18:48:31 发布

xjinza

最新推荐文章于 2021-09-25 18:48:31 发布

阅读量384

点赞数

分类专栏： javascript css html 文章标签： jquery function class xhtml float border

本文链接：https://blog.csdn.net/xjinza/article/details/6855337

版权

css 同时被 3 个专栏收录

89 篇文章 0 订阅

订阅专栏

javascript

56 篇文章 0 订阅

订阅专栏

html

52 篇文章 0 订阅

订阅专栏

<!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>

xjinza

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery淡入淡出效果

无标题文档*{ margin:0px; padding:0px;}ul,li{ list-style:none;}.p_show{ float:left; position:relative; padding:10px;}.b_img {width:441px; hei
复制链接

扫一扫