1、在初始化的时候只显示第一张图片,并在显示标题的地方显示第一张图片的 alt 等。
$("#playShow a:not(:first-child)").hide();
$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});
2、为下面的数字设置一个点击的事件
$("#playNum a").click(function(){
var i=$(this).text()-1;
n=i;
if(i>=count)return ;
$("#playText").html($("#playShow a").eq(i).find("img").attr("alt"));
$("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")});
$("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
$(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
});
3、为了使它能够自动的切换设置定时切换
t=setInterval("autoShow()",1000);
4、当鼠标在图片上的时候就不自动切换
$("#play").hover(function(){clearInterval(t)},function(){t=setInterval("autoShow()",1000);});
具体代码：
<style type="text/css">
#play{width:500px;height:230px; border:#ccc 1px solid;}
#playBg{margin-top:200px;z-index:1;filter:alpha(opacity=70);opacity:0.7;width:500px;position:absolute;height:30px;background:#000;}
#playText{margin-top:200px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}
#playNum{margin:205px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}
#playNum a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}
#playShow img{width:500px;height:230px;}
</style>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<div id="play">
<ul>
<li id="playBg"></li>
<li id="playText"></li>
<li id="playNum"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
<li id="playShow">
<a href="#" target="_blank"><img src="images/01.jpg" alt="description about picture"></a>
<a href="#" target="_blank"><img src="images/02.jpg" alt="description about picture"></a>
<a href="#" target="_blank"><img src="images/03.jpg" alt="description about picture"></a>
<a href="#" target="_blank"><img src="images/04.jpg" alt="description about picture"></a>
<a href="#" target="_blank"><img src="images/05.jpg" alt="description about picture"></a>
<a href="#" target="_blank"><img src="images/03.jpg" alt="description about picture"></a>
</li>
</ul>
</div>
<script type="text/javascript">
var t=n=0,count=$("#playShow a").size();
$(function(){
$("#playShow a:not(:first-child)").hide();
$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});
$("#playNum a").click(function(){
var i=$(this).text()-1;
n=i;
if(i>=count)return ;
$("#playText").html($("#playShow a").eq(i).find("img").attr("alt"));
$("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")});
$("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
$(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
});
t=setInterval("autoShow()",1000);
$("#play").hover(function(){clearInterval(t)},function(){t=setInterval("autoShow()",1000);});
});
function autoShow(){
n=n>=(count-1) ? 0: ++n ;
$("#playNum a").eq(n).trigger('click');
}
</script>
</body>
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
