JS 图片切换效果
<style type="text/css">
#play img {border:0px}
#play {width:1013px;height:78px;overflow:hidden;margin: 0 auto; border: 0px solid #fff; padding:0px;}
#play_bg {position:absolute;background-color:#000;margin-top:0px;height:78px;width:1013px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}
#play_text {position:absolute;margin:58px 0 0 900px;height:50px;width:60px;z-index:1002}
#play_text ul {list-style-type:none; width:60px;height:50px;display:block;padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}
#play_text ul li {width:14px;height:14px;float:left;background-color:#000;display:block;color:#FFF;text-align:center;margin:1px;cursor:pointer;font-family:"微软雅黑"; font-size:9px;}
#play_list a{display:block;width:1004px;height:78px;position:absolute;overflow:hidden}
</style>
<div id="play">
<div id="play_bg"></div>
<div id="play_text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="play_list">
<a href="#" target="_blank">
<img src="images/j01.jpg" title="" alt="" border="0" />
</a>
<a href="#" target="_blank">
<img src="images/j02.jpg" title="" alt="" border="0" />
</a>
<a href="#" target="_blank">
<img src="images/j03.jpg" title="" alt="" border="0" />
</a>
</div>
</div>
<script type="text/javascript">
var t = n = 0, count = $("#play_list a").size();
$(function(){
$("#play_list a:not(:first-child)").hide();
$("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
$("#play_text li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#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()", 6000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 6000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#play_text li").eq(n).trigger('click');
}
</script>
效果图:

- 图片预加载 图片自动缩放(2009-4-1 9:50:26)
- js 按钮链接整理(2009-3-18 13:6:11)
- javascript 实现页面无刷新更新数据(检测会员帐号是否存在)(2009-3-12 15:54:54)
- 单选框跳转(2009-3-12 10:45:12)
- 用图片实现reset 的功能(js)(2009-3-12 10:38:56)
- 向上分页滚动(2009-3-4 16:50:21)
- 不错的文本框+CSS(2009-2-14 9:24:47)
- 时间格式化函数(2009-2-13 14:37:25)
- 用DIV+JS实现的支持键盘操作的菜单(2009-2-13 13:35:35)
- 无限级分类选框(2009-2-13 13:26:59)
- asp 首页静态化(2009-2-12 16:37:0)
- 将一幅图片作为按纽(2009-2-6 13:7:8)
- 鼠标经过显示隐藏图层(2009-1-16 10:30:30)
- 几个比较常用的在线代码生成网站(2009-1-15 15:26:44)

EN:Learlon
QQ:9907004
MSN:learlon@hotmail.com
Email:learlon@163.com
喜欢蓝色,因为它不艳丽也不惨淡;喜欢大海,是因为它宽广,时而风起浪卷,时而静若止水;喜欢听钢琴曲,是因为它悠闲、恬静。喜欢[在路上]这个名字,是因为离成功的彼岸还很远,还要努力奋斗。