Jquery图片轮换代码，求大神注释下JS，新手看不懂。 10
-----------------------------------------------------代码------------------------------...
-----------------------------------------------------代码-----------------------------------------------------------------------
</head>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<body>
<div id="play">
<div id="play_bg"></div>
<div id="play_info"></div>
<div id="play_text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="play_list">
<a href="#" target="_blank"><img src="1.jpg" title="温泉镇的风流事" alt="温泉镇的风流事"/></a>
<a href="#" target="_blank"><img src="2.jpg" title="北京镜鉴记" alt="免费海岛游"/></a>
<a href="#" target="_blank"><img src="3.jpg" title="蜀山飞仙" alt="蜀山飞仙"/></a>
<a href="#" target="_blank"><img src="4.jpg" title="圣枪传奇" alt="飞出老人院"/></a>
</div>
</div>
<!--这段是轮播的主要实现JS可以提取为一个外部Js文件-->
<script type="text/javascript">
var t = n = 0, count = $("#play_list a").size();
$(function(){
$("#play_list a:not(:first-child)").hide();
$("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
$("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
$("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")});
$("#play_text li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
$("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")})
$("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
});
t = setInterval("showAuto()", 2000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#play_text li").eq(n).trigger('click');
}
</script>
</body>
--------------------------------------------------------------------------------------------------------------------------- 展开
</head>
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<body>
<div id="play">
<div id="play_bg"></div>
<div id="play_info"></div>
<div id="play_text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="play_list">
<a href="#" target="_blank"><img src="1.jpg" title="温泉镇的风流事" alt="温泉镇的风流事"/></a>
<a href="#" target="_blank"><img src="2.jpg" title="北京镜鉴记" alt="免费海岛游"/></a>
<a href="#" target="_blank"><img src="3.jpg" title="蜀山飞仙" alt="蜀山飞仙"/></a>
<a href="#" target="_blank"><img src="4.jpg" title="圣枪传奇" alt="飞出老人院"/></a>
</div>
</div>
<!--这段是轮播的主要实现JS可以提取为一个外部Js文件-->
<script type="text/javascript">
var t = n = 0, count = $("#play_list a").size();
$(function(){
$("#play_list a:not(:first-child)").hide();
$("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
$("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
$("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")});
$("#play_text li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
$("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")})
$("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
});
t = setInterval("showAuto()", 2000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#play_text li").eq(n).trigger('click');
}
</script>
</body>
--------------------------------------------------------------------------------------------------------------------------- 展开
1个回答
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
