javascript 图片滑动切换代码

更新时间：2010年03月03日 15:37:44 作者：

nVida网站的图片滑动特效，这里为了快速演示效果，去掉了原有的图片用数字来代替，你完全可以插入你想要的图片，本特效使用JS实现，用CSS配合固定图片，以滑动的方式切换相应的多张图片。

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>nVida网站图片滑动-https://www.jb51.net</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:#000000; float:left;font:700 55px Arial, Helvetica, sans-serif; color:#FFFFFF;text-align:center;} #changebox #changeAction #links #threePro{ height:194px;float:left;} #changebox #changeAction #links #threePro dl{width:203px; height:190px; margin:0; padding:0; float:left;} #changebox #changeAction #links #threePro dl dt{width:203px;height:150px;margin:0;padding:0;float:left;overflow:hidden;position:relative;} #changebox #changeAction #links #threePro dl dt #Motherboard{margin:0 0 0 7px;position:absolute;left:0;top:0; text-align:center; float:left;} #changebox #changeAction #links #threePro dl dt #GraphicsCard{margin:0 0 0 7px;position:absolute;left:-203px;top:0; text-align:center; float:left;} #changebox #changeAction #links #threePro dl dt #Notebook{margin:0 0 0 7px;position:absolute;left:-410px;top:0; text-align:center; float:left;} #changebox #changeAction #links #threePro dl dd{width:147px;height:23px; background:url(indexPic.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(indexPic.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(indexPic.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 id="changebox"> <div id="changeAction" style="left:0px;"> <div id="links"> 1 </div> <div 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

发一个自己用JS写的实用看图工具实现代码
所以决定慢慢来照顾一下博客吧，这里先把眼前就有的一个小东西拿出来和大家分享一下，这是2006年的时候（文本里记下了时间，不然也忘记了）为了自己看网络图片方便而写的。
2008-07-07
JavaScript 控制图片改变重叠顺序的代码(鼠标移动切换)
JavaScript实例，通过控制Html网页元素，来控制图片的重叠顺序，鼠标移上某一张，那一张就显示在最前面，移动到最后层，它会显示在最前，有意思吧，其实挺简单。
2010-10-10
從博客網扣了一個效果出來
從博客網扣了一個效果出來...
2007-05-05
js 图片缩放（按比例）控制代码
js 图片缩放（按比例）实现代码。
2009-05-05
多图幻灯Pixelate马赛克效果
多图幻灯Pixelate马赛克效果...
2006-12-12
javascript IE7 浏览器本地图片预览
在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通。需要用 AlphaImageLoader
2009-03-03
js 上传图片预览问题
我们写网页的时候一般的用IE进行开发，一般的人都是按照IE进行些程序，做网站的时候遇到浏览器兼容问题是非常烦躁的事情。
2010-12-12
多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。
多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。...
2006-12-12
纯CSS实现的漂亮的立体图片边框效果，阴影代码
纯CSS 漂亮的立体图片边框效果，图片阴影代码，个人觉得这个挺实用，CSs实现的，定义成类，可让你整个网页上的图片都是有立体阴影的，不错吧，感谢作者分享。
2010-10-10
SuperSlide2实现图片滚动特效
SuperSlide2,实现图片滚动，感觉很强大，这里只是简单的演示其中一种类型，想看更多类型的话，可以去http://www.superslide2.com 查看，
2014-06-06

javascript 图片滑动切换代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具