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控制图片滚动的效果

猜你喜欢

使用PHP Socket 编程模拟Http post和get请求

Go Gin实现文件上传下载的示例代码

python爬虫神器Pyppeteer入门及使用

如何理解PHP程序执行的过程原理

音频处理 windows10下python三方库librosa安装教程

Python使用Turtle模块绘制五星红旗代码示例

Python实现的网页截图功能【PyQt4与selenium组件】

一个不错的网页拾色器

MYSQL复杂查询练习题以及答案大全(难度适中)

浅谈python处理json和redis hash的坑

PHP实现二维数组中的查找算法小结

Python的垃圾回收机制详解

Go语言设计实现在任务栏里提醒你喝水的兔子

mssql 大小写区分方法

详解python字节码

Python中使用wxPython开发的一个简易笔记本程序实例

mysql设置指定ip远程访问连接实例

SQL Server中通过reverse取某个最后一次出现的符号后面的内容(字符串反转)

python实现飞机大战游戏(pygame版)

代码详解Python的函数基础(2)