介绍 & lt; ! DOCTYPE html>,
& lt; html>,
& lt; head lang=癳n"祝辞,
,& lt; meta charset=癠TF-8"祝辞,
,& lt; title> & lt;/title>,
& lt; style>大敌;
,*,{大敌;
,,,保证金:0;,
,,,填充:0,,
,,},
# div1 ul{才能,
,,,位置:绝对的,,
,,,左:0 px;,
,,,:0 px;,
,,},
#才能div1 ul li img {,
,,,宽度:187 px,,
,,,身高:125 px,,
,,},
李#才能div1 ul {,
,,,浮动:离开,,
,,,宽度:187 px,,
,,,身高:125 px,,
,,,list-style:没有,,
,,},
,# div1{大敌;
,,,宽度:748 px,,
,,,身高:125 px,,
,,,位置:相对,,
,,,背景颜色:黄绿色,,
,,,溢出:隐藏。,
,,,浮动:离开,,
,,},
身体,#{大敌;
,,,宽度:948 px,,
,,,身高:125 px,,
,,,保证金:100 px 汽车;,
,
,,},
# body # leftDiv{才能,
,,,浮动:离开,,
,,,宽度:100 px,,
,,,身高:100 px,,
,,},
# body # rightDiv{才能,
,,,浮动:离开,,
,,,宽度:100 px,,
,,,身高:100 px,,
,,},
,,
# body 才能{# leftDiv 按钮,
,,,背景图片:url(“图像/left.PNG");,
,,,宽度:100 px,,
,,,身高:100 px,,
,,},
# body # leftDiv 才能button img {,
,,,宽度:100 px,,
,,,身高:100 px,,
,,},
# body # rightDiv 才能button img {,
,,,宽度:100 px,,
,,,身高:100 px,,
,,},
& lt;/style>大敌;
& lt; script>大敌;
window=函数(){才能,
,,var oDiv=. getelementbyid (& # 39; div1& # 39;),,
,,var oUl=oDiv.getElementsByTagName (& # 39; ul # 39;) [0];,
,,var 奥利=oUl.getElementsByTagName(& # 39;李# 39;),,
,,var oLeft=. getelementbyid (& # 39; leftDiv& # 39;),,
,,var oright=. getelementbyid (& # 39; rightDiv& # 39;),,
,,oUl.innerHTML +=oUl.innerHTML;,
,,oUl.style.width=奥利[0].offsetWidth * oLi.length + & # 39; px # 39;,,
,,var 速度=2,,
,,function 移动(){,
,,,if (oUl.offsetLeft<-oUl.offsetWidth/2) {,
,,,,oUl.style.left=& # 39; 0 & # 39;,,
,,,}else 如果(oUl.offsetLeft> 0) {,
,,,,oUl.style.left=-oUl.offsetWidth/2 + & # 39; px # 39;,,
,,,},
,,,oUl.style.left=oUl.offsetLeft +速度+ & # 39;px # 39;,,
,,,};
,才能var 计时器=setInterval(移动,30),,
,,oLeft.onclick=function () {,
,,,速度=2,,
,,,};
,,oright.onclick=, function (), {,
,,,速度=2,,
,,,};
,,oUl.onmouseover=function () {,
,,,clearInterval(定时器),,
,,,};
,,oUl.onmouseout=function () {,
,,,计时器=setInterval(移动,30);,
,,,};
,,},
& lt;/script>大敌;
时间/head> & lt;
& lt; body>,
& lt; div id=癰ody"祝辞,
,& lt; div id=發eftDiv"祝辞& lt; button> & lt; https://www.yisu.com/zixun/img src="图像/left.PNG "/>
本篇文章为大家展示了使用JavaScript怎么实现一个滚动栏效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
具体如下:
-
<李>