js多排图片自动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js多排图片自动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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多排图片自动滚动特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="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="内容" src="img/T1z_LkXfdpXXaGP9rV-164-164.jpg" width="164" height="164" /><em>内容</em></a></li>
			<li class="picture"><a href="#"><img alt="请叫我羊驼先生" src="img/T1NTfkXmdoXXaGP9rV-164-164.jpg" width="164" height="164" /><em>请叫我羊驼先生</em></a></li>
			<li class="picture"><a href="#"><img alt="又到一年粽叶香" src="img/T18UnkXn4mXXaGP9rV-164-164.jpg" width="164" height="164" /><em>又到一年粽叶香</em></a></li>
			<li class="picture"><a href="#"><img alt="一毕业就结婚" src="img/T1sUrlXkXhXXaGP9rV-164-164.jpg" width="164" height="164" /><em>一毕业就结婚</em></a></li>
			<li class="picture"><a href="#"><img alt="小资最爱mini窝" src="img/T1jCLgXaBuXXaGP9rV-164-164.jpg" width="164" height="164" /><em>小资最爱mini窝</em></a></li>
			<li class="picture"><a href="#"><img alt="人尽可帽相！" src="img/T1VQjmXjBcXXaGP9rV-164-164.jpg" width="164" height="164" /><em>人尽可帽相！</em></a></li>
			<li class="picture"><a href="#"><img alt="除了二还有爱" src="img/T1HhjmXmJjXXaGP9rV-164-164.jpg" width="164" height="164" /><em>除了二还有爱</em></a></li>
			<li class="picture"><a href="#"><img alt="锋芝恋被曝复合" src="img/T1Sh_mXi0eXXaGP9rV-164-164.jpg" width="164" height="164" /><em>锋芝恋被曝复合</em></a></li>
			<li class="picture"><a href="#"><img alt="夏天别穿背背佳" src="img/T1MdLmXfFfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>夏天别穿背背佳</em></a></li>
			<li class="picture"><a href="#"><img alt="如果真有海角天涯" src="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 class="pic-list">
		<ul class="wrap">
			<li class="picture"><a href="#"><img alt="有处仙境叫希腊" src="img/T1vWLlXlRqXXaGP9rV-164-164.jpg" width="164" height="164" /><em>有处仙境叫希腊</em></a></li>
			<li class="picture"><a href="#"><img alt="甜蜜情侣街头装" src="img/T1nyYlXflnXXaGP9rV-164-164.jpg" width="164" height="164" /><em>甜蜜情侣街头装</em></a></li>
			<li class="picture"><a href="#"><img alt="晃晃悠悠梦一场" src="img/T1UOrlXg0nXXaGP9rV-164-164.jpg" width="164" height="164" /><em>晃晃悠悠梦一场</em></a></li>
			<li class="picture"><a href="#"><img alt="我是水果店捡来的" src="img/T1x4TmXcxfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>我是水果店捡来的</em></a></li>
			<li class="picture"><a href="#"><img alt="贾斯汀携子走红毯" src="img/T1VFPlXXVrXXaGP9rV-164-164.jpg" width="164" height="164" /><em>贾斯汀携子走红毯</em></a></li>
			<li class="picture"><a href="#"><img alt="花朵草编休闲包" src="img/T1Z0zmXnFeXXaGP9rV-164-164.jpg" width="164" height="164" /><em>花朵草编休闲包</em></a></li>
			<li class="picture"><a href="#"><img alt="你是我的眼！" src="img/T1upLmXadiXXaGP9rV-164-164.jpg" width="164" height="164" /><em>你是我的眼！</em></a></li>
			<li class="picture"><a href="#"><img alt="百变发型DIY" src="img/T1j2HlXkRkXXaGP9rV-164-164.jpg" width="164" height="164" /><em>百变发型DIY</em></a></li>
			<li class="picture"><a href="#"><img alt="褪了色的一个梦" src="img/T1SmYgXeRwXXaGP9rV-164-164.jpg" width="164" height="164" /><em>褪了色的一个梦</em></a></li>
			<li class="picture"><a href="#"><img alt="俏丽流行爆美鞋" src="img/T120_mXgdfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>俏丽流行爆美鞋</em></a></li>       
		</ul>
	</div>
</div> 
</body>
</html>

JS代码(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);
}

JS代码(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);
}
}
}

CSS代码(style.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;}

附件:下载该文件资源,减少时间成本(增值服务)