当前位置：首页 > news >正文

JavaScript控制图片横向滚动代码

news 来源：原创 2024/5/2 15:37:14

代码简介：

一个JavaScript图片滚动效果，与其它不同的区别是，它是可以被控制的，向左向右滚动都需要点击两端的小箭头，图片滚动时候带有缓冲效果，演示图片没有加链接，你决定用了就好好完善它，现在只是一个基础的框架，也没有怎么美化，请注意，JavaScript代码一定要放在调用图片的代码之后，否则会失效。

代码内容：

View Code

<! 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=gb2312" />
< title > JavaScript控制图片横向滚动代码 - www.webdm.cn </ title >
< style >
ul { margin : 0 ; padding : 0 ; list-style : none ; width : 100000px }
li { margin : 0 ; padding : 0 ; width : 100px ; height : 90px ; display : block ; float : left ; margin-right : 5px ; background : #009900 }
#img_bag { width : 640px ; height : 90px ; background : #FF9900 ; margin : 0 auto ; font-size : 9pt ; }
#img_bag a { float : left ; width : 20px ; display : block ; height : 20px ; font-weight : bold ; }
#img_bag #img { width : 600px ; height : 90px ; background : #ccc ; overflow : hidden ; float : left ; border : 0px ; }
#scrollBar { width : 600px ; height : 20px ; background : #FF0000 ; margin : 0 auto ; position : relative }
#scroll { width : 30px ; height : 20px ; background : #000000 ; cursor : pointer ; position : absolute ; }
</ style >
</ head >
< body >
< div id ="img_bag" >
< a href ="javascript:void(0)" onmousedown ="moveLeft()" >< <</a >
< div id ="img" >
< ul >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall7_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall2_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall3_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall1_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall4_s.jpg" ></ li >
< li >< img src ="http://www.webdm.cn/images/wall5_s.jpg" ></ li >
</ ul >
</ div >
< a href ="javascript:void(0)" onmousedown ="moveRight()" > >> </ a >
</ div >
< div style ="clear:both;" ></ div >
< div id ="scrollBar" >< div id ="scroll" style ="left:0" ></ div ></ div >
< script >
function $(obj){ return document.getElementById(obj)}
var maxWidth = $( " img " ).getElementsByTagName( " ul " )[ 0 ].getElementsByTagName( " li " ).length * 105 ;
var isScroll = false ;
var modiLeft;
$( " scroll " ).onmousedown = function (evt){
isScroll = true ;
evt = (evt) ? evt:((window.event) ? window.event: null );
if (evt.offsetX){
modiLeft = parseInt(evt.offsetX)
}
else {modiLeft = parseInt(evt.layerX)}
}
document.onmouseup = function (){
isScroll = false ;
}
document.onmousemove = function (evt){
evt = (evt) ? evt:((window.event) ? window.event: null );
if (evt && isScroll){
$( " scroll " ).style.left = parseInt(evt.clientX) - parseInt($( " scrollBar " ).offsetLeft) - modiLeft + " px " ;
if (parseInt($( " scroll " ).style.left) < 0 ){$( " scroll " ).style.left = 0 + " px " }
if (parseInt($( " scroll " ).style.left) > 570 ){$( " scroll " ).style.left = 570 + " px " }
$( " img " ).scrollLeft = parseInt($( " scroll " ).style.left) * ((maxWidth - 600 ) / 570);
}
}
var targetx = 200 ; // 一次滚动距离
var dx;
var a = null ;
function moveLeft(){
var le = parseInt($( " img " ).scrollLeft);
if (le > 200 ){
targetx = parseInt($( " img " ).scrollLeft) - 200 ;
}
else {targetx = parseInt($( " img " ).scrollLeft) - le - 1 }
scLeft();
}
function scLeft(){
dx = parseInt($( " img " ).scrollLeft) - targetx;
$( " img " ).scrollLeft -= dx * . 3 ;
$( " scroll " ).style.left = parseInt($( " img " ).scrollLeft) * ( 570 / (maxWidth-600))+"px";
if (parseInt($( " scroll " ).style.left) < 0 ){$( " scroll " ).style.left = 0 + " px " }
if (parseInt($( " scroll " ).style.left) > 570 ){$( " scroll " ).style.left = 570 + " px " }
clearScroll = setTimeout(scLeft, 50 );
if (dx * . 3 < 1 ){clearTimeout(clearScroll)}
}
function moveRight(){
var le = parseInt($( " img " ).scrollLeft) + 200 ;
var maxL = maxWidth - 600 ;
if (le < maxL){
targetx = parseInt($( " img " ).scrollLeft) + 200 ;
}
else {targetx = maxL}
scRight();
}
function scRight(){
dx = targetx - parseInt($( " img " ).scrollLeft);
$( " img " ).scrollLeft += dx * . 3 ;
$( " scroll " ).style.left = parseInt($( " img " ).scrollLeft) * ( 573 / (maxWidth-600))+"px";
if (parseInt($( " scroll " ).style.left) < 0 ){$( " scroll " ).style.left = 0 + " px " }
if (parseInt($( " scroll " ).style.left) >= 570 ){$( " scroll " ).style.left = 570 + " px " }
a = setTimeout(scRight, 50 );
if (dx * . 3 < 1 ){clearTimeout(a)}
}
</ script >
</ body >
</ html >
< br />
< p >< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/e12fb676-0a1b-4010-bf34-ae540d9cfa32.html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/29/2157430.html