本文实例讲述了javascript实现图片左右滚动效果。分享给大家供大家参考，具体如下：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>图片滚动</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img{border:0;}
.scroll{width:358px;height:63px;}
.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}
.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}
.pic{width:312px;height:73px;float:left;}
.pic ul{display:block;}
.pic li{float:left;display:inline;width:104px;text-align:center;}
</style>
</head>
<body>
<p style="margin:100px auto;width:358px;">
<p>
<p id="leftarr"></p>
<p id="scrollpic">
<ul>
<li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li>
<li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li>
</ul>
</p>
<p id="rightarr"></p>
</p>
</p>
</body>
</html>
<script src="scrollpic.js"></script>
<script>
window.onload = function(){
scrollpic();
}
function scrollpic() {
var scrollpic = new scrollpic();
scrollpic.scrollcontid = "scrollpic"; //内容容器id
scrollpic.arrleftid = "leftarr";//左箭头id
scrollpic.arrrightid = "rightarr"; //右箭头id
scrollpic.framewidth = 312;//显示框宽度
scrollpic.pagewidth = 104; //翻页宽度
scrollpic.speed = 10; //移动速度(单位毫秒，越小越快)
scrollpic.space = 10; //每次移动像素(单位px，越大越快)
scrollpic.autoplay = true; //自动播放
scrollpic.autoplaytime = 3; //自动播放间隔时间(秒)
scrollpic.initialize(); //初始化
}
</script>
scrollpic.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
}
}
};
//滚动图片构造函数
//ui&ue dept. mengjia
//080623
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";
if(-[1,]){
this.listdiv01.style.cssfloat = "left";
this.listdiv02.style.cssfloat = "left";
}else{
this.listdiv01.style.stylefloat = "left";
this.listdiv02.style.stylefloat = "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
}
}
}
};
参数说明：
var scrollpic = new scrollpic(); //定义变量，并初始化方法
scrollcontid //滚动容器的id
arrleftid //左按钮id
arrrightid //右按钮id
framewidth //显示框宽度
pagewidth //翻页宽度
speed //移动速度(单位毫秒，越小越快)
space //每次移动像素(单位px，越大越快)
autoplay //自动播放
autoplaytime //自动播放间隔时间(秒)
initialize() //初始化
希望本文所述对大家javascript程序设计有所帮助。
更多javascript实现图片左右滚动效果【可自动滚动，有左右按钮】。