位置：首页>> 网络编程>> JavaScript>> 3个JS控制图片滚动的效果

3个JS控制图片滚动的效果

　来源：蓝色理想　发布时间：2007-10-23 13:40:00　

标签：图片,滚动,相册

这个是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="https://img.aspxhome.com/file/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="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="640" height="400" border="0" id="main_img" rel="/file/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /></td> <td width="110" align="center" valign="top"> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341743.gif" width="100" height="14" id="gotop" /> <div id="showArea"> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341303.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145341546.jpg" link="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" border="0" class="thumb_img" rel="/file/UploadPic/200710/23/20071023145336409.jpg" link="http://www.tblog.com.cn" /> </div> <img src="https://img.aspxhome.com/file/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="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="640" height="400" id="mainphoto" rel="/file/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> </div> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145342948.gif" width="11" height="56" id="goleft" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145342429.gif" width="11" height="56" id="goright" /> <div id="photos"> <div id="showArea">  <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145336409.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341303.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341303.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145341546.jpg" alt="番茄红了..." width="80" height="50" rel="/file/UploadPic/200710/23/20071023145341546.jpg" name="http://www.tblog.com.cn" /> <img src="https://img.aspxhome.com/file/UploadPic/200710/23/20071023145336409.jpg" alt="番茄红了..." width="80" height="50" rel="/file/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 = '/file/UploadPic/200710/23/20071023145342881.gif'; MyMar=setInterval(goleft, speed);}$('goleft').onmouseout = function() {this.src = '/file/UploadPic/200710/23/20071023145342948.gif'; clearInterval(MyMar);}$('goright').onmouseover = function() {this.src = '/file/UploadPic/200710/23/20071023145343607.gif'; MyMar=setInterval(goright,speed);}$('goright').onmouseout = function() {this.src = '/file/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>

速度比较慢，没做载入效果，需要等待一下

投稿

3个JS控制图片滚动的效果

猜你喜欢