漂亮的滑动图片效果Javascript+CSS

发布者: bicman 2010年01月21日围观次点赞:1

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
img{ border:0; display:block;vertical-align:middle}
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
#imgBox,#imgBox ul,#imgBox li{ float:left;}
#imgBox ul{ width:4100px;}
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
</style>
</head>
<body>
<div id="imgBox">
<ul>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 001" src="http://www.zishu.cn/attachments/month_0902/1.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 002" src="http://www.zishu.cn/attachments/month_0902/2.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 003" src="http://www.zishu.cn/attachments/month_0902/3.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 004" src="http://www.zishu.cn/attachments/month_0902/4.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/4.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 005" src="http://www.zishu.cn/attachments/month_0902/5.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/5.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 006" src="http://www.zishu.cn/attachments/month_0902/6.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/6.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 007" src="http://www.zishu.cn/attachments/month_0902/1.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 008" src="http://www.zishu.cn/attachments/month_0902/2.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 009" src="http://www.zishu.cn/attachments/month_0902/3.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 010" src="http://www.zishu.cn/attachments/month_0902/4.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/4.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 011" src="http://www.zishu.cn/attachments/month_0902/5.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/5.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 012" src="http://www.zishu.cn/attachments/month_0902/6.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/6.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 013" src="http://www.zishu.cn/attachments/month_0902/1.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 014" src="http://www.zishu.cn/attachments/month_0902/2.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 015" src="http://www.zishu.cn/attachments/month_0902/3.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 001" src="http://www.zishu.cn/attachments/month_0902/1.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 002" src="http://www.zishu.cn/attachments/month_0902/2.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 003" src="http://www.zishu.cn/attachments/month_0902/3.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 004" src="http://www.zishu.cn/attachments/month_0902/4.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/4.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 005" src="http://www.zishu.cn/attachments/month_0902/5.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/5.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 006" src="http://www.zishu.cn/attachments/month_0902/6.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/6.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 007" src="http://www.zishu.cn/attachments/month_0902/1.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 008" src="http://www.zishu.cn/attachments/month_0902/2.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 009" src="http://www.zishu.cn/attachments/month_0902/3.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 010" src="http://www.zishu.cn/attachments/month_0902/4.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/4.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 011" src="http://www.zishu.cn/attachments/month_0902/5.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/5.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 012" src="http://www.zishu.cn/attachments/month_0902/6.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/6.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 013" src="http://www.zishu.cn/attachments/month_0902/1.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 014" src="http://www.zishu.cn/attachments/month_0902/2.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn" _fcksavedurl="http://www.zishu.cn"><img alt="this is 015" src="http://www.zishu.cn/attachments/month_0902/3.gif" _fcksavedurl="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
</ul>
</div>
<script>
ScrollImg = function(imgBoxId){
 this.imgBoxId = imgBoxId;
 this.table = this.createTable();
 this.imgBoxP = this.$(this.imgBoxId).parentNode;
 this.setSpan();
 this.setOnclick();
 this.$(this.imgBoxId).appendChild(this.table)
}

ScrollImg.prototype = {
 $:function(objId){ 
  return document.getElementById(objId);
 },
 $$:function(n){ 
  return document.createElement(n);
 },
 createTable:function(){
  var table = this.$$('table');
  var tr = this.$$('tr'); 
  for(var k=0; k<3; k++) tr.appendChild(this.$$('td'));
  var tbody = this.$$('tbody');
  tbody.appendChild(tr);
  table.appendChild(tbody);
  return table;
 },
 setSpan:function(){
  var links = this.$(this.imgBoxId).getElementsByTagName('a');
  for(var k=0; k<links.length; k++){
   var span = this.$$('span');
   span.appendChild(document.createTextNode(links[k].getElementsByTagName('img')[0].alt));
   links[k].appendChild(span);
  }
  return;
 },
 setOnclick:function (){
  var imgArray = ['left', ,'right'];
  var tds = this.table.getElementsByTagName('td');
  for(var k=0; k
</body>
</html>

提示：您可以先修改部分代码再运行

这种效果适合做图片站，真的不错哦！

顶(1)

踩(0)

【搜索相关内容】[打印] [关闭]

上一篇：用JS实现图片轮换效果-公告栏

下一篇：鼠标滑过图片出现大图片提示层效果js代码

最新评论

漂亮的滑动图片效果Javascript+CSS

您可能还会对下面的文章感兴趣：

相关文章