網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>圖片特效特效代碼>

nVida 網(wǎng)站圖片滑動切換代碼_圖片特效特效

nVida網(wǎng)站的圖片滑動特效，這里為了快速演示效果，去掉了原有的圖片用數(shù)字來代替，你完全可以插入你想要的圖片，本特效使用JS實(shí)現(xiàn)，用CSS配合固定圖片，以滑動的方式切換相應(yīng)的多張圖片。

<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>nVida網(wǎng)站圖片滑動</title>
<style type="text/css">
#changebox{width:610px;height:342px;overflow:hidden; position:relative;}
#changebox #changeAction{width:1220px;height:342px; position:absolute; }
#changebox #changeAction #links{width:610px;height:342px;background:url(http://p1.mb5u.com/texiao/1/20110225160535491.gif) 0 -339px; text-align:center;font:700 14px Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; padding:6px 0 0 0; margin:0 0 0 30px;cursor:pointer;}
#changebox #changeAction #links #support{width:600px; height:28px; overflow:hidden; position:relative; background:url(http://p1.mb5u.com/texiao/1/20110225160535491.gif) 0 -300px;font:700 15px Arial, Helvetica, sans-serif; color:#FFCC00; padding:10px 0 0 10px;}
#changebox #changeAction #links #support img{ position:absolute; left:0; top:-300px;}
#changebox #changeAction #links ul{width:203px; margin:0; padding:0; float:left;}
#changebox #changeAction #links ul li{ list-style:none;width:203px; margin:0; padding:0; float:left; color:#FFCC00; font:700 14px Arial, Helvetica, sans-serif; text-align:center;}
#changebox #changeAction #links ul li.nVidia{width:126px;height:100px;overflow:hidden;position:relative;margin:0 0 10px 40px; padding:0; }
#changebox #changeAction #links ul li.nVidia img{position:absolute; bottom:0; right:0;}
#changebox #changeAction #links ul li.button{width:122px; height:20px; padding:4px 0 0 0; margin:0 0 10px 42px; overflow:hidden; background:url(http://p1.mb5u.com/texiao/1/20110225160535491.gif) 0 -369px; font:700 12px Arial, Helvetica, sans-serif;text-align:center;color:#FFFFFF; cursor:pointer;}
#schoolButton{ color:#FFFFFF;width:50px; height:18px; font:700 12px Arial, Helvetica, sans-serif; background: #006600; text-align:center; padding:2px 0 0 0; margin:0 10px 0 0; float:left; cursor:pointer;}
#schoolButton:hover{ background: #FFFF00; color:#000000;}
#indexButton{ color:#FFFFFF;width:50px; height:18px; font:700 12px Arial, Helvetica, sans-serif; background: #006600; text-align:center; padding:2px 0 0 0; margin:0 10px 0 0; float:left; cursor:pointer;}
#indexButton:hover{ background: #FFFF00; color:#000000;}
#changebox #changeAction #links2{width:610px;height:342px; float:left; background:#333;font:700 55px Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center;}
</style>
<script type="text/javascript">
    var tt;
    function move(){
        var obj = document.getElementById('changeAction');
        if(parseInt(obj.style.left) < 0){
            obj.style.left = parseInt(obj.style.left) + 10 + "px";  
        }
    }
    function move2(){
        var obj = document.getElementById('changeAction');
        if(parseInt(obj.style.left) > -610){
            obj.style.left = parseInt(obj.style.left) - 10 + "px";  
        }
    }
    function button1click(){
        clearInterval(tt);
        tt = setInterval('move()',1);
	document.getElementById("indexButton").style.display = "none";
	document.getElementById("schoolButton").style.display = "block";
    }
    function button2click(){
        clearInterval(tt);
        tt=setInterval('move2()',1);
	document.getElementById("indexButton").style.display = "block";
	document.getElementById("schoolButton").style.display = "none";
    }
</script>
</head>
<body>
		<div   class="uumsyao"   id="changebox">
			<div   class="kwo4wk0"   id="changeAction" style="left:0px;">
					<div   class="qoiogg2"   id="links">
						1
					</div>
					
					<div   class="20q40wg"   id="links2">
						2
					</div>
					
			</div>
		
		</div>
		
		<a id="schoolButton" onclick="button2click()">Next</a>
		<a id="indexButton" onclick="button1click()" style="display:none">Back</a>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-20

[收藏][報錯][返回列表]

相關(guān)圖片特效特效：

nVida 網(wǎng)站圖片滑動切換代碼_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些