新闻广告图片滚动展示

本文介绍两种在门户网站首页实现图片展示的方法。一种是通过横向滚动显示多张图片,利用 JavaScript 控制图片滚动速度;另一种是在图层上显示固定图片索引,模拟翻页效果。文章提供了详细的代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在做门户网站时,首页面上经常会有新闻图片类的展示,下面收集两个图片展示的方式:

方法1.显示多个图片,横行滚动

  JS代码如下:

 

  页面代码如下:

 

 效果图如下:

   

 JS代码中设置的速度为50,上面的图片会按着此速度从右往左移动。

方法2.显示一张图片,图层上面有固定图片数码,类似于翻页功能。页面代码如下:

 效果显示如下:

 

 其中图片大小格式和页码样式,可以在样式和JS代码中调,注意,此显示为固定数值的图片。其中body上下两部分JS代码因为页面加载顺序的不同不可调换。在页面中初始化几张图片,在body下面代码 new SlideTrans()中要对应图片数。 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值