jq滚动图片
ScrollImg.js
function ScrollImg(obj)
{
this.oUl=obj.getElementsByTagName('ul')[0];
this.aLi=obj.getElementsByTagName('li');
this.iLiLen=this.aLi.length;
this.iLiWidth=this.aLi[0].offsetWidth;
this.timer=null;
this.init(obj);
}
ScrollImg.prototype = {
//初始函数
init : function(obj)
{
this.oUl.style.width=this.iLiLen*this.iLiWidth+'px';
this.liHover();
this.scrollFn(obj);
this.objOver(obj);
this.objOut(obj);
},
//li的hover事件，放上去其它图片半透明
liHover : function()
{
var This=this;
for(var i=0; i<this.aLi.length; i++)
{
this.aLi[i].onmouseover = function()
{
for(var i=0; i<This.aLi.length; i++)
{
setStyle(This.aLi[i],'opacity',0.65);
}
setStyle(this,'opacity',1);
}
this.aLi[i].onmouseout = function()
{
for(var i=0; i<This.aLi.length; i++)
{
setStyle(This.aLi[i],'opacity',1);
}
}
}
},
//滚动事件
scrollFn : function(obj)
{
this.startScroll(obj);
},
startScroll : function(obj)
{
var This=this;
this.timer=setInterval(function(){
startMove(obj.getElementsByTagName('ul')[0],{'left':-165},function()
{
This.oUl.appendChild(This.aLi[0]);
This.oUl.style.left='0px';
});
}, 3000);
},
stopScroll : function()
{
clearInterval(this.timer);
},
//obj的over事件
objOver : function(obj)
{
var This=this;
obj.onmouseover = function()
{
This.stopScroll();
}
},
//obj的out事件
objOut : function(obj)
{
var This=this;
obj.onmouseout = function()
{
This.startScroll(obj);
}
}
}
base.js
function myAddEvent(obj, sEv, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+sEv, function (){
if(false==fn.call(obj))
{
event.cancelBubble=true;
return false;
}
});
}
else
{
obj.addEventListener(sEv, function (ev){
if(false==fn.call(obj))
{
ev.cancelBubble=true;
ev.preventDefault();
}
}, false);
}
}
//根据class选元素
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b', 'i');
for(var i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
//取得样式的方法
function getStyle(obj,attr)
{
var result=0;
if(obj.currentStyle)
{
result=obj.currentStyle[attr];
}
else
{
result=getComputedStyle(obj,false)[attr];
}
if(attr=='opacity')
{
result*=100;
result=Math.round(result);
}
return parseInt(result);
}
//设置样式的方法
function setStyle(obj,attr,value)
{
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value*100+")";
obj.style.opacity=value;
break;
default:
obj.style[attr]=value;
}
}
function startMove(obj,json,fn)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isFinihed=true;
for(var attr in json)
{
var iCur=getStyle(obj, attr);
var iTarget=json[attr];
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
var iNew=iCur+iSpeed;
if(iCur!=iTarget)
{
isFinihed=false;
}
setStyle(obj,attr,iNew);
}
if(isFinihed)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},30);
}
--------
gundong.css
@charset "utf-8";
body{margin:0;padding:0;font:12px/1.5 "\5B8B\4F53",san-serif;background:#F8F9F3;color:#000;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;}
table,td,tr,th{font-size:12px;}li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}
address,cite,code,em,th,i{font-weight:normal;font-style:normal;}
label{vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* pic-list */
.scrollbox{width:990px;margin:40px auto 0 auto;}
.pic-list{height:164px;overflow:hidden;border-bottom:solid 1px #fff;position:relative;}
.pic-list ul{position:absolute;left:0px;top:0px;}
.pic-list .picture{float:left;width:164px;height:164px;border-right:solid 1px #fff;position:relative;background:#eee;}
.pic-list .picture em{display:inline-block;background:#000;opacity:0.75;filter:alpha(opacity:75);color:#fff;padding:0px 5px;height:20px;line-height:20px;position:absolute;right:0px;bottom:0px;text-decoration:none;}
----
html:
<!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>js多排图片自动滚动特效 - xw素材网</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/gundong.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/scrollImg.js"></script>
<script type="text/javascript">
myAddEvent(window,'load',scrollImg);
function scrollImg(){
var aPicList=getByClass(document,'pic-list');
var i=0;
function next(){
if(i<aPicList.length){
new ScrollImg(aPicList[i]);
timer=setTimeout(next, 1000);
}
i++;
}
next();
}
</script>
</head>
<body>
<div class="scrollbox">
<div class="pic-list">
<ul class="wrap">
<li class="picture"><a href="#"><img alt="xw素材网" src="img/img/T1z_LkXfdpXXaGP9rV-164-164.jpg" width="164" height="164" /><em>xw素材网</em></a></li>
<li class="picture"><a href="#"><img alt="请叫我羊驼先生" src="img/img/T1NTfkXmdoXXaGP9rV-164-164.jpg" width="164" height="164" /><em>请叫我羊驼先生</em></a></li>
<li class="picture"><a href="#"><img alt="又到一年粽叶香" src="img/img/T18UnkXn4mXXaGP9rV-164-164.jpg" width="164" height="164" /><em>又到一年粽叶香</em></a></li>
<li class="picture"><a href="#"><img alt="一毕业就结婚" src="img/img/T1sUrlXkXhXXaGP9rV-164-164.jpg" width="164" height="164" /><em>一毕业就结婚</em></a></li>
<li class="picture"><a href="#"><img alt="小资最爱mini窝" src="img/img/T1jCLgXaBuXXaGP9rV-164-164.jpg" width="164" height="164" /><em>小资最爱mini窝</em></a></li>
<li class="picture"><a href="#"><img alt="人尽可帽相！" src="img/img/T1VQjmXjBcXXaGP9rV-164-164.jpg" width="164" height="164" /><em>人尽可帽相！</em></a></li>
<li class="picture"><a href="#"><img alt="除了二还有爱" src="img/img/T1HhjmXmJjXXaGP9rV-164-164.jpg" width="164" height="164" /><em>除了二还有爱</em></a></li>
<li class="picture"><a href="#"><img alt="锋芝恋被曝复合" src="img/img/T1Sh_mXi0eXXaGP9rV-164-164.jpg" width="164" height="164" /><em>锋芝恋被曝复合</em></a></li>
<li class="picture"><a href="#"><img alt="夏天别穿背背佳" src="img/img/T1MdLmXfFfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>夏天别穿背背佳</em></a></li>
<li class="picture"><a href="#"><img alt="如果真有海角天涯" src="img/img/T1siLmXkJgXXaGP9rV-164-164.jpg" width="164" height="164" /><em>如果真有海角天涯</em></a></li>
</ul>
</div>
<div class="pic-list">
<ul class="wrap">
<li class="picture"><a href="#"><img alt="当时我就震惊了" src="img/T1BgYlXhFnXXaGP9rV-164-164.jpg" width="164" height="164" /><em>当时我就震惊了</em></a></li>
<li class="picture"><a href="#"><img alt="糖果色夏日美甲" src="img/T1XrDnXbVaXXaGP9rV-164-164.jpg" width="164" height="164" /><em>糖果色夏日美甲</em></a></li>
<li class="picture"><a href="#"><img alt="欧美夏日潮搭" src="img/T1sSPmXeJbXXaGP9rV-164-164.jpg" width="164" height="164" /><em>欧美夏日潮搭</em></a></li>
<li class="picture"><a href="#"><img alt="开心时记得笑" src="img/T1CN2lXcRnXXaGP9rV-164-164.jpg" width="164" height="164" /><em>开心时记得笑</em></a></li>
<li class="picture"><a href="#"><img alt="夏天最爱睡地毯" src="img/T1nffmXfBhXXaGP9rV-164-164.jpg" width="164" height="164" /><em>夏天最爱睡地毯</em></a></li>
<li class="picture"><a href="#"><img alt="007裸体冰激凌" src="img/T1t2jlXfVkXXaGP9rV-164-164.jpg" width="164" height="164" /><em>007裸体冰激凌</em></a></li>
<li class="picture"><a href="#"><img alt="世上最帅100张脸" src="img/T1UWHhXopuXXaGP9rV-164-164.jpg" width="164" height="164" /><em>世上最帅100张脸</em></a></li>
<li class="picture"><a href="#"><img alt="做没心没肺的一对" src="img/T1Dk2lXfXkXXaGP9rV-164-164.jpg" width="164" height="164" /><em>做没心没肺的一对</em></a></li>
<li class="picture"><a href="#"><img alt="我的宠物叫笑笑" src="img/T1UyrmXhxbXXaGP9rV-164-164.jpg" width="164" height="164" /><em>我的宠物叫笑笑</em></a></li>
<li class="picture"><a href="#"><img alt="烟雨江南几时休" src="img/T1DfzmXj4hXXaGP9rV-164-164.jpg" width="164" height="164" /><em>烟雨江南几时休</em></a></li>
</ul>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</body>
</html>
