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   id="vfxvprn"   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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些