jquery 自动轮换内容_图片特效特效

jquery 自动轮换内容，如果不想让其轮番的话，也可以让它定时显示一条信息，代码里可以经过设置修改。

<!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" mrc="text/html;charset=utf-8" />
<title>jquery 自动轮换内容</title>
<script type="text/javascript" src="http://p1.mb5u.com/texiao/jquery1.3.2.js"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
.change{margin:100px;padding:5px;width:500px;height:390px;border:#e7e7e7 1px solid;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
	var objStr = ".change ul li";
	$(objStr + ":not(:first)").css("display","none");
	setInterval(function(){
	if( 
	    $(objStr + ":last").is(":visible")){
		$(objStr + ":first").fadeIn("slow").addClass("in");
		$(objStr + ":last").hide()
	}
	else{
		$(objStr + ":visible").addClass("in");
		$(objStr + ".in").next().fadeIn("slow");
		$(objStr + ".in").hide().removeClass("in")}
	},4000) //每3秒钟切换
})
</script>

<div class="change">
	<ul>
        <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160550605.jpg"/></a></li>
        <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160550606.jpg"/></a></li>
        <li><a href="#"><img src="http://p1.mb5u.com/texiao/1/20110225160550607.jpg"/></a></li>
    </ul>
</div>

也可以是定时显示一条信息
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-15

[收藏][报错][返回列表]

jquery 自动轮换内容_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些