网页设计与制作-日职网络教学平台

网页设计与制作
唐海和

1

2

3

4

5

6

7

8

9

10

11

任务7.3 在网页中自动滚动图片

发布时间：2017-09-24 15:16 发布人：唐海和浏览次数：3088

【任务7-3】在网页中自动滚动图片

【任务描述】

在网页文档0703.html中的合适位置编写javascript代码，实现自右向左的横向滚动图片和自下向上的纵向滚动图片效果。

自右向左横向滚动图片的浏览效果如下图所示，图片以一定速度向左滚动，自下向上纵向滚动图片的，效果如下图所示，图片以一定速度向上滚动。

【任务实施】

1．实现自右向左的横向滚动图片效果

打开网页文档0703.html，切换到【代码】视图，在<body>与</body>之间分别输入HTML代码和javascript代码，实现自右向左的横向滚动图片功能，代码如下所示。

var ad_speed = 30;

ad_r.innerHTML = ad_l.innerHTML;

function ad_Marquee() {

if (ad_r.offsetWidth - scroll_logo1.scrollLeft <= 0)

scroll_logo1.scrollLeft -= ad_l.offsetWidth;

else {

scroll_logo1.scrollLeft ;

}

var ad_mymar = setInterval(ad_Marquee, ad_speed)

scroll_logo1.onmouseover = function() {

clearInterval(ad_mymar);

}

scroll_logo1.onmouseout = function() {

ad_mymar = setInterval(ad_Marquee, ad_speed);

}

</script>

2．实现自下向上的纵向滚动图片效果

在网页文档0703.html中合适位置分别输入HTML代码和javascript代码，实现自下向上的横向滚动图片功能，代码如下所示。

var speed=30;

pic_box_b.innerHTML = pic_box.innerHTML;

function marquee2(){

if(pic_box_b.offsetTop - scroll_logo2.scrollTop <= 0) {

scroll_logo2.scrollTop -= pic_box.offsetHeight;

}

else {

scroll_logo2.scrollTop ;

}

var mymar2 = setInterval(marquee2,speed);

scroll_logo2.onmouseover = function() {

clearInterval(mymar2);

}

scroll_logo2.onmouseout = function(){

mymar2 = setInterval(marquee2,speed);

}

</script>

效果图如下所示：

+添加讨论

韩燕洁 2017-09-28 10:17:21
老师讲课很详细，很有耐心，讲的很好
杨永吉 2017-09-28 10:18:55
老师讲的很好，很详细。
徐勤翰 2017-09-28 10:23:03
老师讲课很细致
张传坤 2017-09-28 10:26:27
老师讲的比较清晰明白，我学会了，谢谢老师!

网页设计与制作唐海和

任务7.3 在网页中自动滚动图片

网页设计与制作
唐海和