这个是JS控制图片滚动的效果，当鼠标结果新闻标题时开始滚动到对应的图片，可以作为图片新闻。
效果图：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css+js控制图片展示</title> <style> body{ padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; font: 70% verdana, geneva, arial, helvetica, sans-serif; color: #000; padding-top: 0px; text-align: center } #outer{ padding-right: 0px; padding-left: 0px; background: url(/images/bg-outer.gif) repeat-y center top; padding-bottom: 0px; margin: 0px auto; width: 780px; padding-top: 0px; text-align: left } #wrapper{ background: #fff; margin: 0px 4px } #content{ padding-right: 0px; padding-left: 0px; min-height: 400px; padding-bottom: 20px; margin: 20px 30px; padding-top: 0px; position: relative } #focus{ border-right: #ccc 2px solid; padding-right: 0px; border-top: #ccc 2px solid; padding-left: 0px; min-height: 188px; background: url(/images/tile.gif) #eee repeat-y left top; padding-bottom: 10px; margin: 25px 0px 30px; border-left: #ccc 2px solid; width: 100%; padding-top: 15px; border-bottom: #ccc 2px solid; position: relative; height: 188px } #beni{ padding-right: 0px; padding-left: 0px; left: 0px; padding-bottom: 0px; margin: 0px; width: 250px; padding-top: 0px; list-style-type: none; position: absolute; top: 15px } #beni li{ border-top: #fff 1px solid; font-size: 12px; float: left; width: 250px; text-indent: 24px; line-height: 26px } #beni li.first{ border-top: 0px } #beni li a{ border-right: 0px; padding-right: 0px; border-top: 0px; display: block; padding-left: 0px; font-weight: bold; background: #eee; padding-bottom: 0px; margin: 0px; border-left: 0px; padding-top: 0px; border-bottom: 0px; text-decoration: none } #beni li a:hover{ background: #f9f9f9 } #description{ width:420px; height:188px; overflow:hidden; float:right; margin-right:15px; } </STYLE> <script> window.onload=function(){ var ele=document.getElementById("description"); var w=ele.clientWidth; var n=20,t=20; var timers=new Array(n); var c=document.getElementById("beni").getElementsByTagName("li"); for(var i=0;i<c.length;i++){ c[i].index=i; c[i].onmouseover=doSlide; } c=null; function doSlide(){ var x=ele.scrollLeft; var d=this.index*w-x; if(!d) return; for(var i=0;i<n;i++)(function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; timers[i]=setTimeout(function(){ ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n))); },(i+1)*t); })(); } } </script> </head> <body id=home> <div id=outer> <div id=wrapper> <div id=content> <div id=focus> <ul id=beni> <li class=first><a href="#">opere e oggetti d'arte</a></li> <li><a href="#">architettzure</a></li> <li><a href="#">reperti archeologici</a></li> <li><a href="#">stampe e matrici di incisione</a></li> <li><a href="#">fotografie</a></li> <li><a href="#">beni etnoantropologici</a></li> </ul> <div id=description> <img src="/article/UploadPic/200710/23/20071023145336818.jpg" /> </div> </div> </div> </div> </div> </body> </html> [提示：你可先修改部分代码，再按运行]
（下面两个代码作者 aultoale） 看下面的两个纵向和横向的，可以作为js图片相册，效果不错；
纵向的，写的第一个版本，没加滤镜：
<!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" content="text/html; charset=gb2312" /> <meta name="Author" content="番茄红了" /> <title>JS相册效果 -- 纵向</title> <style> body {background:#000000;margin:20px 0;font:12px Verdana, Arial, Tahoma;text-align:center;vertical-align:middle;color:#FFFFFF} img {border:none} .txt_1 {font:bold 24px Verdana, Tahoma;color:#fff} img.thumb_img {cursor:pointer;display:block;margin-bottom:10px} img#main_img {cursor:pointer;display:block;} #gotop {cursor:pointer;display:block;} #gobottom {cursor:pointer;display:block;} #showArea {height:355px;margin:10px;overflow:hidden} .info {color:#666;font:normal 9px Verdana;margin-top:20px} .info a:link, .info a:visited {color:#666;text-decoration:none} .info a:hover {color:#fff;text-decoration:none} </style> </head> <body> <table width="760" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td height="75" colspan="2" align="left" class="txt_1">JS相册效果</td> </tr> <tr> <td width="640" align="center"><img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="640" height="400" border="0" id="main_img" rel="/article/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /></td> <td width="110" align="center" valign="top"> <img src="/article/UploadPic/200710/23/20071023145341743.gif" width="100" height="14" id="gotop" /> <div id="showArea"> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/article/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> </div> <img src="/article/UploadPic/200710/23/20071023145342458.gif" width="100" height="14" id="gobottom" /></td> </tr> </table> <center class="info"><a href="http://www.tblog.com.cn" title="番茄's Blog">http://www.tblog.com.cn</a> | Akon By 2006/12/26</center> </body> </html> <script language="javascript" type="text/javascript"> function $(e) {return document.getElementById(e);} document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\b'); var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; } var MyMar; var speed = 1; //速度，越大越慢 var spec = 1; //每次滚动的间距, 越大滚动越快 var ipath = 'http://www.tblog.com.cn/test/images/'; //图片路径 var thumbs = document.getElementsByClassName('thumb_img'); for (var i=0; i<thumbs.length; i++) { thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;}; thumbs[i].onclick = function () {location = this.link} } $('main_img').onclick = function () {location = this.link;} $('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; MyMar=setInterval(gotop,speed);} $('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearInterval(MyMar);} $('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; MyMar=setInterval(gobottom,speed);} $('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearInterval(MyMar);} function gotop() {$('showArea').scrollTop-=spec;} function gobottom() {$('showArea').scrollTop+=spec;} </script> [提示：你可先修改部分代码，再按运行]
横向的，第二个版本，加了兼容IE、FF、Opera的滤镜效果
<!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" content="text/html; charset=gb2312" /> <meta name="Author" content="番茄红了" /> <title>JS相册效果 -- 横向</title> <style> body {background:#000;margin:0;font:12px Verdana;text-align:center;} #tbody {width:650px;margin:50px auto;} #mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px} #mainphoto {cursor:pointer;display:block;} #goleft {float:left;clear:left;margin:6px 5px 0 3px;} #goright {float:right;clear:right;margin:6px 3px 0 5px;} #photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;} #showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222} </style> </head> <body> <div id="tbody"> <div id="mainbody"> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="640" height="400" id="mainphoto" rel="/article/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> </div> <img src="/article/UploadPic/200710/23/20071023145342948.gif" width="11" height="56" id="goleft" /> <img src="/article/UploadPic/200710/23/20071023145342429.gif" width="11" height="56" id="goright" /> <div id="photos"> <div id="showArea"> <!-- SRC: 缩略图地址 REL: 大图地址 NAME: 网址 --> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="/article/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/article/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> </div> </div> </div> </body> </html> <script language="javascript" type="text/javascript"> var browse = window.navigator.appName.toLowerCase(); var MyMar; var speed = 1; //速度，越大越慢 var spec = 1; //每次滚动的间距, 越大滚动越快 var minOpa = 50; //滤镜最小值 var maxOpa = 100; //滤镜最大值 var spa = 2; //缩略图区域补充数值 var w = 0; spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20); function $(e) {return document.getElementById(e);} function goleft() {$('photos').scrollLeft -= spec;} function goright() {$('photos').scrollLeft += spec;} function setOpacity(e, n) { if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')'; else e.style.opacity = n/100; } $('goleft').style.cursor = 'pointer'; $('goright').style.cursor = 'pointer'; $('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);} $('mainphoto').onmouseout = function() {setOpacity(this, minOpa);} $('mainphoto').onclick = function() {location = this.getAttribute('name');} $('goleft').onmouseover = function() {this.src = '/article/UploadPic/200710/23/20071023145342881.gif'; MyMar=setInterval(goleft, speed);} $('goleft').onmouseout = function() {this.src = '/article/UploadPic/200710/23/20071023145342948.gif'; clearInterval(MyMar);} $('goright').onmouseover = function() {this.src = '/article/UploadPic/200710/23/20071023145343607.gif'; MyMar=setInterval(goright,speed);} $('goright').onmouseout = function() {this.src = '/article/UploadPic/200710/23/20071023145342429.gif'; clearInterval(MyMar);} window.onload = function() { setOpacity($('mainphoto'), minOpa); var rHtml = ''; var p = $('showArea').getElementsByTagName('img'); for (var i=0; i<p.length; i++) { w += parseInt(p[i].getAttribute('width')) + spa; setOpacity(p[i], minOpa); p[i].onclick = function() {location = this.getAttribute('name');} p[i].onmouseover = function() { setOpacity(this, maxOpa); $('mainphoto').src = this.getAttribute('rel'); $('mainphoto').setAttribute('name', this.getAttribute('name')); setOpacity($('mainphoto'), maxOpa); } p[i].onmouseout = function() { setOpacity(this, minOpa); setOpacity($('mainphoto'), minOpa); } rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />'; } $('showArea').style.width = parseInt(w) + 'px'; var rLoad = document.createElement("div"); $('photos').appendChild(rLoad); rLoad.style.width = "1px"; rLoad.style.height = "1px"; rLoad.style.overflow = "hidden"; rLoad.innerHTML = rHtml; } </script> [提示：你可先修改部分代码，再按运行]
速度比较慢，没做载入效果，需要等待一下
请稍等，评论加载中...
请稍等，评论加载中...