栏目图片左右滚动代码

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

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

以下是栏目图片左右滚动代码的示例演示效果:

当前平台(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>
<TITLE>代码笔记</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/index.css" rel="stylesheet" type="text/css">
<script language=javascript src="js/Designer.js"></script>
</head>
<body>
<div class="h_tonglan xiant">
	<dl><dd><img src="images/shejifengyunbang.gif" border="0" /></dd><dt>
<a href="#">高端工作室</a> | <a href="#">首席设计师</a> | <a href="#">主任设计师</a> | <a href="#">优秀设计师</a> | <a href="#">普通设计师</a> | <a href="#">更多>></a>&nbsp;</dt></dl>
    <ul class="h218px">
<table width="938" height="200" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr><th width="19" valign="top"><img src="images/leftjt.gif" class="pointer" id="arrLeft" border="0" /></th>
    <td width="900" valign="top">
    	<div id="scrollbox">
        <ul>

<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>
<li><A href="###"><IMG src="images/des.jpg" border="0" ><br />朱蕊<br />首席设计师</A></li>


        </ul>
        </div>
    </td>
    <th width="19" valign="top"><img src="images/rightjt.gif" class="pointer" id="arrRight" border="0" /></th></tr>
</table>
<script language=javascript type=text/javascript>
		var scrollPic_02 = new ScrollPic();
		scrollPic_02.scrollContId   = "scrollbox"; //内容容器ID
		scrollPic_02.arrLeftId      = "arrLeft";//左箭头ID
		scrollPic_02.arrRightId     = "arrRight"; //右箭头ID
		scrollPic_02.frameWidth     = 900;//显示框宽度
		scrollPic_02.pageWidth      = 900; //翻页宽度
		scrollPic_02.speed          = 8; //移动速度(单位毫秒，越小越快)
		scrollPic_02.space          = 8; //每次移动像素(单位px，越大越快)
		scrollPic_02.autoPlay       = false; //自动播放
		scrollPic_02.autoPlayTime   = 3; //自动播放间隔时间(秒)
		scrollPic_02.initialize(); //初始化
</script>
    </ul>
</div>
</body>
</html>

JS代码(Designer.js):

var sina={
	$:function(objName){
	if(document.getElementById){
	return eval('document.getElementById("'+objName+'")')}
else{
	return eval('document.all.'+objName)}
}
,isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,addEvent:function(l,i,I){
	if(l.attachEvent){
	l.attachEvent("on"+i,I)}
else{
	l.addEventListener(i,I,false)}
}
,delEvent:function(l,i,I){
	if(l.detachEvent){
	l.detachEvent("on"+i,I)}
else{
	l.removeEventListener(i,I,false)}
}
,readCookie:function(O){
	var o="",l=O+"=";
	if(document.cookie.length>0){
	var i=document.cookie.indexOf(l);
	if(i!=-1){
	i+=l.length;
	var I=document.cookie.indexOf(";
	",i);
	if(I==-1)I=document.cookie.length;
	o=unescape(document.cookie.substring(i,I))}
}
;
	return o}
,writeCookie:function(i,l,o,c){
	var O="",I="";
	if(o!=null){
	O=new Date((new Date).getTime()+o*3600000);
	O=";
	expires="+O.toGMTString()}
;
	if(c!=null){
	I=";
	domain="+c}
;
	document.cookie=i+"="+escape(l)+O+I}
,readStyle:function(I,l){
	if(I.style[l]){
	return I.style[l]}
else if(I.currentStyle){
	return I.currentStyle[l]}
else if(document.defaultView&&document.defaultView.getComputedStyle){
	var i=document.defaultView.getComputedStyle(I,null);
	return i.getPropertyValue(l)}
else{
	return null}
}
}
;
	function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId){
	this.scrollContId=scrollContId;
	this.arrLeftId=arrLeftId;
	this.arrRightId=arrRightId;
	this.dotListId=dotListId;
	this.dotClassName="dotItem";
	this.dotOnClassName="dotItemOn";
	this.dotObjArr=[];
	this.pageWidth=0;
	this.frameWidth=0;
	this.speed=10;
	this.space=10;
	this.pageIndex=0;
	this.autoPlay=true;
	this.autoPlayTime=5;
	var _autoTimeObj,_scrollTimeObj,_state="ready";
	this.stripDiv=document.createElement("DIV");
	this.listDiv01=document.createElement("DIV");
	this.listDiv02=document.createElement("DIV");
	if(!ScrollPic.childs){
	ScrollPic.childs=[]}
;
	this.ID=ScrollPic.childs.length;
	ScrollPic.childs.push(this);
	this.initialize=function(){
	if(!this.scrollContId){
	throw new Error("?scrollContId.");
	return}
;
	this.scrollContDiv=sina.$(this.scrollContId);
	if(!this.scrollContDiv){
	throw new Error("scrollContId??.(scrollContId = \""+this.scrollContId+"\")");
	return}
;
	this.scrollContDiv.style.width=this.frameWidth+"px";
	this.scrollContDiv.style.overflow="hidden";
	this.listDiv01.innerHTML=this.listDiv02.innerHTML=this.scrollContDiv.innerHTML;
	this.scrollContDiv.innerHTML="";
	this.scrollContDiv.appendChild(this.stripDiv);
	this.stripDiv.appendChild(this.listDiv01);
	this.stripDiv.appendChild(this.listDiv02);
	this.stripDiv.style.overflow="hidden";
	this.stripDiv.style.zoom="1";
	this.stripDiv.style.width="32766px";
	this.listDiv01.style.cssFloat="left";
	this.listDiv02.style.cssFloat="left";
	sina.addEvent(this.scrollContDiv,"mouseover",Function("ScrollPic.childs["+this.ID+"].stop()"));
	sina.addEvent(this.scrollContDiv,"mouseout",Function("ScrollPic.childs["+this.ID+"].play()"));
	if(this.arrLeftId){
	this.arrLeftObj=sina.$(this.arrLeftId);
	if(this.arrLeftObj){
	sina.addEvent(this.arrLeftObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].rightMouseDown()"));
	sina.addEvent(this.arrLeftObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].rightEnd()"));
	sina.addEvent(this.arrLeftObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].rightEnd()"))}
}
;
	if(this.arrRightId){
	this.arrRightObj=sina.$(this.arrRightId);
	if(this.arrRightObj){
	sina.addEvent(this.arrRightObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].leftMouseDown()"));
	sina.addEvent(this.arrRightObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].leftEnd()"));
	sina.addEvent(this.arrRightObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].leftEnd()"))}
}
;
	if(this.dotListId){
	this.dotListObj=sina.$(this.dotListId);
	if(this.dotListObj){
	var pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;
	for(i=0;
	i<pages;
	i++){
	tempObj=document.createElement("span");
	this.dotListObj.appendChild(tempObj);
	this.dotObjArr.push(tempObj);
	if(i==this.pageIndex){
	tempObj.className=this.dotClassName}
else{
	tempObj.className=this.dotOnClassName}
;
	tempObj.title=""+(i+1)+"?";
	sina.addEvent(tempObj,"click",Function("ScrollPic.childs["+this.ID+"].pageTo("+i+")"))}
}
}
;
	if(this.autoPlay){
	this.play()}
}
;
	this.leftMouseDown=function(){
	if(_state!="ready"){
	return}
;
	_state="floating";
	_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveLeft()",this.speed)}
;
	this.rightMouseDown=function(){
	if(_state!="ready"){
	return}
;
	_state="floating";
	_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveRight()",this.speed)}
;
	this.moveLeft=function(){
	if(this.scrollContDiv.scrollLeft+this.space>=this.listDiv01.scrollWidth){
	this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+this.space-this.listDiv01.scrollWidth}
else{
	this.scrollContDiv.scrollLeft+=this.space}
;
	this.accountPageIndex()}
;
	this.moveRight=function(){
	if(this.scrollContDiv.scrollLeft-this.space<=0){
	this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-this.space}
else{
	this.scrollContDiv.scrollLeft-=this.space}
;
	this.accountPageIndex()}
;
	this.leftEnd=function(){
	if(_state!="floating"){
	return}
;
	_state="stoping";
	clearInterval(_scrollTimeObj);
	var fill=this.pageWidth-this.scrollContDiv.scrollLeft%this.pageWidth;
	this.move(fill)}
;
	this.rightEnd=function(){
	if(_state!="floating"){
	return}
;
	_state="stoping";
	clearInterval(_scrollTimeObj);
	var fill=-this.scrollContDiv.scrollLeft%this.pageWidth;
	this.move(fill)}
;
	this.move=function(num,quick){
	var thisMove=num/5;
	if(!quick){
	if(thisMove>this.space){
	thisMove=this.space}
;
	if(thisMove<-this.space){
	thisMove=-this.space}
}
;
	if(Math.abs(thisMove)<1&&thisMove!=0){
	thisMove=thisMove>=0?1:-1}
else{
	thisMove=Math.round(thisMove)}
;
	var temp=this.scrollContDiv.scrollLeft+thisMove;
	if(thisMove>0){
	if(this.scrollContDiv.scrollLeft+thisMove>=this.listDiv01.scrollWidth){
	this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+thisMove-this.listDiv01.scrollWidth}
else{
	this.scrollContDiv.scrollLeft+=thisMove}
}
else{
	if(this.scrollContDiv.scrollLeft-thisMove<=0){
	this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-thisMove}
else{
	this.scrollContDiv.scrollLeft+=thisMove}
}
;
	num-=thisMove;
	if(Math.abs(num)==0){
	_state="ready";
	if(this.autoPlay){
	this.play()}
;
	this.accountPageIndex();
	return}
else{
	this.accountPageIndex();
	setTimeout("ScrollPic.childs["+this.ID+"].move("+num+","+quick+")",this.speed)}
}
;
	this.next=function(){
	if(_state!="ready"){
	return}
;
	_state="stoping";
	this.move(this.pageWidth,true)}
;
	this.play=function(){
	if(!this.autoPlay){
	return}
;
	clearInterval(_autoTimeObj);
	_autoTimeObj=setInterval("ScrollPic.childs["+this.ID+"].next()",this.autoPlayTime*1000)}
;
	this.stop=function(){
	clearInterval(_autoTimeObj)}
;
	this.pageTo=function(num){
	if(_state!="ready"){
	return}
;
	_state="stoping";
	var fill=num*this.frameWidth-this.scrollContDiv.scrollLeft;
	this.move(fill,true)}
;
	this.accountPageIndex=function(){
	this.pageIndex=Math.round(this.scrollContDiv.scrollLeft/this.frameWidth);
	if(this.pageIndex>Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4)-1){
	this.pageIndex=0}
;
	var i;
	for(i=0;
	i<this.dotObjArr.length;
	i++){
	if(i==this.pageIndex){
	this.dotObjArr[i].className=this.dotClassName}
else{
	this.dotObjArr[i].className=this.dotOnClassName}
}
}
}
;

CSS代码(index.css):

@charset "gb2312";.h_tonglan{width:958px;background:#FFFFFF;padding:14px 10px;margin:0 auto;}
.h_tonglan dl{width:938px;height:32px;_height:32px;background:url(/image/huixian2.gif) repeat-x top;margin-left:10px;margin-right:10px;}
.h_tonglan dl dd{float:left;width:196px;height:32px;_height:32px;background:url(/image/lvx2.gif) repeat-x top;}
.h_tonglan dl dt{float:right;width:700px;text-align:right;line-height:25px;min-height:25px;color:#6A6A6A;}
.h_tonglan ul{overflow:hidden;}
.h190px{overflow:hidden;margin-left:10px;margin-right:10px;padding-bottom:3px;padding-top:14px;}
.h190px img{width:938px;border:0px;}
.h218px{width:938px;height:200px;_height:200px;padding-top:14px;margin:0 auto;}
.h218px th{padding-top:67px;}
.h218px td{overflow:hidden;}
#scrollbox ul{overflow:hidden;}
#scrollbox ul LI{FLOAT:left;width:150px;_width:150px;height:200px;_height:200px;vertical-align:top;font-size:12px;line-height:18px;min-height:18px;text-align:center;padding:0px;overflow:hidden;}
#scrollbox ul LI img{width:130px;height:160px;border:0px;}
.pointer{CURSOR:pointer}
*{padding:0px;margin:0px;}
html{overflow-y:scroll;}
body{margin:0;padding:0px;font-size:12px;background:url(/image/t_ds.gif) repeat-x top;background-color:#F2F2F2;color:#252525;}
div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
ol,ul{list-style:none;}
address,cite,code,em,th,i{font-weight:normal;font-style:normal;}
.fB{font-weight:bold;}
.fred{color:#ff0000;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.f14pxbai{font-size:14px;color:#ffffff;font-weight:bold;}
.f16px{font-size:16px;}
.f18px{font-size:18px;}
.f22px{font-size:22px;color:#FFFFFF;}
.center{margin:0px auto;}
.left{float:left;}
.right{float:right;}
.rejm{width:60px;height:20px;border:#7E9DB9 1px solid;line-height:20px;}
/* link css */
a{color:#252525;text-decoration:none;}
a:hover{color:#058F04;text-decoration:none;}
a:active{color:#058F04;text-decoration:none;}

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