js实现图片左右滚动

2023-03-05 17:01:02JavaScript013

js实现图片左右滚动,第1张

代码：

<style>

body{

margin:0

padding:0

background-color:transparent

}

div{

width:350px

overflow:hidden

}

table img{

width:100px

height:100px

}

</style>

</head>

<body>

<table>

<tr>

</tr>

</table>

</div>

</body>

</html>

var target = $('#picScroll')

var left = 0

var speed = 30

function Marqeen() {

if (target[0].offsetWidth <= left) {

left -= target[0].offsetWidth

}

else {

left++

}

target.scrollLeft(left)

}

$(function () {

var marQueen = window.setInterval(Marqeen, speed)

target.mouseover(function () {

clearInterval(marQueen)

})

target.mouseout(function () {

marQueen = window.setInterval(Marqeen, speed)

})

</script>

这段代码可以： <!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/htmlcharset=gb2312" /><title>图片</title><script language="javascript"></script><style type="text/css"></style></head><body><DIV class=blk_18><A onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0)" target=_self></A><DIV class=pcont id=ISL_Cont_1><DIV class=ScrCont><DIV id=List1_1><A class=pl href=" http://info.china.alibaba.com/news/detail/v3000103-d1002527920.html" target=_blank><IMG height=72 alt=20-50元夏装抢疯 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>美女小凡最新夏装</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v5000180-d1002468482.html" target=_blank><IMG height=72 alt=韩国人气小耳环 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>韩国人气小耳环</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v9-d1002531301.html" target=_blank><IMG height=72 alt=3万6超值装修88平 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>3万6超值装修88平</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v8-d1002530067.html" target=_blank><IMG height=72 alt=牛干巴敲开财富门 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>牛干巴敲开财富门</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v5003519-d1002285304.html" target=_blank><IMG height=72 alt=4K至7K高性能本本 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>4K至7K高性能本本</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v5001800-d1002511645.html" target=_blank><IMG height=72 alt=7万装修102平婚房 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>7万装修102平婚房</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v5003463-d1002527336.html" target=_blank><IMG height=72 alt=最新小车节油为主 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>最新小车节油为主</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v5003000-d1002505656.html" target=_blank><IMG height=72 alt="热门项目 BT烤翅" src=" http://www.baidu.com/img/baidu_logo.gif" width=96>热门项目 BT烤翅</A><A class=pl href=" http://info.china.alibaba.com/news/detail/v3000103-d1002421590.html" target=_blank><IMG height=72 alt=流行T恤+裤装 src=" http://www.baidu.com/img/baidu_logo.gif" width=96>要显瘦就这么穿！</A></DIV><DIV id=List2_1></DIV></DIV></DIV><A onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() href="javascript:void(0)" target=_self></A></DIV><SCRIPT type=text/javascript></SCRIPT></body></html>

1.jquery.imgScroll.js

2.html结构

a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s-o-transition:all .2s ease-in-out 0s-moz-transition:all .2s ease-in-out 0s-ms-transition:all .2s ease-in-out 0stransition:all .2s ease-in-out 0s}

.lbCon{margin-top:33pxmargin-bottom:37pxposition: relative}

.lbBtn{display:blockposition: absolutetop:0width:40pxheight:143pxborder:1px solid #D7D2CAbackground:url('../../../images/special/140801/ctr_prev.png') no-repeat center center}

.lbPrev{left:0}.lbNext{right:0background-image:url('../../../images/special/140801/ctr_next.png')}

.lbBtn:hover{background-color: #ddd}

.lbBox{width:900pxheight:145pxmargin-left: 50pxoverflow: hiddenposition: relative}

.lbList{width:1000%}

.lbBox ul{float:left}

.lbBox li{float:leftwidth:150pxheight:145pxoverflow: hidden}

.lbPeo{text-align:centerline-height:18pxfont-family:"微软雅黑"color:#333}

.lbPeo img{display:blockborder: 1px solid #dddwidth:84pxheight:103pxmargin-left:32px*margin-left:5px}

.lbPeo h5{font-weight: boldfont-size:12pxpadding-top: 5px*padding-top: 0}

.lbPeo h6{font-size:12px}

.lbBox li a:hover{text-decoration: none}

.lbBox li a:hover .lbPeo{color:#ff9600}