图片滚动代码

最新推荐文章于 2023-06-15 22:00:00 发布
最新推荐文章于 2023-06-15 22:00:00 发布
阅读量1.6k 收藏 5
点赞数 2
分类专栏： 网页制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloliuhai/article/details/14126633
版权

这是个非常简单的设置图片滚动效果的代码，但是注意这段代码在使用时不能加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

图片滚动代码 (从右向左滚动)


<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src="要滚动的图片地址1"> 

<img border="0" src="要滚动的图片地址2"> 

</marquee>

 

 

 图片滚动代码 (从下往上滚动)

 

 <marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src="要滚动的图片地址1"> 

<img border="0" src="要滚动的图片地址2"> 

</marquee>

 

 

改版：

<marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1

SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>

<img border="0" src="要滚动的图片地址1"> 

<img border="0" src="要滚动的图片地址2"> 
</marquee>


说明：


1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。


<marquee direction=left>从右向左滚动</marquee>


<marquee direction=right>从左向右滚动</marquee>


2.behavior属性:指定文本的滚动方式，分为三种:


Scroll:从一端消失后，在另一端出现并继续滚动。


<marquee behavior=scroll>一圈一圈地滚动</marquee>


Slide:从一端滚动，接触到另一端后停止


<marquee behavior=slide>只滚动一次就停止</marquee>


Alternate:从一端滚动到另一端后，反向滚动。

 
<marquee behavior=alternate>来回滚动</marquee>


direction=up（left、right、down） 这个属性可以更改，这样就可以实现上下左右了

 

3.scrolldelay属性设置移动每步的延时单位为毫秒

 

4.scrollamount 属性 设置滚动速度 单位为秒，取值 1-60

 

 

示例:


<!****图片滚动****>

<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=1 direction=right behavior=alternate width=300 height=200 BORDER="0" ALIGN="middle"><IMG src="http://s2.sinaimg.cn/small/610b0f0fg6fd0fbf26971&amp;690" border=0> <IMG src="http://s13.sinaimg.cn/small/610b0f0fg6fd0fbc4a5ac&amp;690" border=0> <IMG src="http://s12.sinaimg.cn/small/610b0f0fg6fd0fb96f46b&amp;690" border=0> <IMG src="http://s15.sinaimg.cn/small/610b0f0fg6fd0fadfde7e&amp;690" border=0> <IMG src="http://s10.sinaimg.cn/small/610b0f0fg6fd0fab21c49&amp;690" border=0> <IMG src="http://s16.sinaimg.cn/small/610b0f0fg6fd0fa74f83f&amp;690" border=0> <IMG src="http://s15.sinaimg.cn/small/610b0f0fg6fd0fcd74ece&amp;690" border=0> <IMG src="http://s14.sinaimg.cn/small/610b0f0fg6fd0fc9a62cd&amp;690" border=0> <IMG src="http://s12.sinaimg.cn/small/610b0f0fg6fd0fc6c840b&amp;690" border=0>/MARQUEE>/DIV>

<!****图片滚动结束****>

 

 

请看效果：

图片滚动代码 图片滚动代码 图片滚动代码 图片滚动代码 图片滚动代码 图片滚动代码 图片滚动代码 图片滚动代码 图片滚动代码
hello刘海
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html网页图片滚动代码用css和div,DIV+CSS网页图片滚动源代码
weixin_36352025的博客
08-04 1564
DIV+CSS网页图片滚动源代码style="overflow:hidden;width:500px;">border="0">id="butong_net_left1" valign="top"align="center">border="0">src="src="插入需要滚动的图片">src="插入需要滚动的图片">src="插入需要滚动的图片">sr...
web前端js基础------制作滚动图片
m0_64148419的博客
11-07 1450
使用JS制作一个滚动图片
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 8833
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
好看的图片滚动JS代码
12-04
好看的图片滚动JS代码
Html网页图片滚动代码
06-08
Html网页图片滚动代码，有用的哦；内容丰富!!!
jQuery图片滚动代码，漂亮实用的网页图片滚动代码
05-12
摘要:脚本资源,jQuery,图片滚动　jQuery图片滚动代码，带左右按钮控制图片左右滚动，漂亮实用的网页图片滚动代码，点击一下向左整体滚动，支持自动间隔时间自动滚动，很有门户风格的图片滚动效果，适合大部分网站...
购物商城图片滚动代码.rar_购物商城图片滚动代码
09-15
jQuery购物商城图片滚动代码是一款左侧限时抢购倒计时js效果，以及中间商品切换左右切换，无限循环，以及右侧 自动滚动jq效果。
一个页面放2段图片滚动代码出现冲突的问题如何解决
09-05
然而，当在一个页面上放置两段相同的图片滚动代码时，可能会遇到代码冲突的问题，导致图片无法正常流动显示。这个问题通常发生在JavaScript或者CSS中，因为它们都控制着元素的行为。以下是一些解决此类冲突的方法和...
swiper新闻内容图片滚动代码
07-24
swiper新闻内容图片滚动代码是一款基于jQuery+swiper制作的响应式新闻内容和图片组合滚动展示，带索引按钮和鼠标触屏拖动切换效果代码。
jQuery购物商城图片滚动代码
06-24
jQuery购物商城图片滚动代码是一款左侧限时抢购倒计时js效果，以及中间商品切换左右切换，无限循环，以及最右侧 自动滚动jq效果。
图片左右滚动特效，很简单，你绝对看的懂
04-19
这是一个左右图片滚动的特效，代码很短，但是功能却完成实现了，你绝对可以看的懂。
图片滑动源代码
01-23
图片滑动源代码，打开html文件就能展示，直接打开就可以哦
淘宝首页图片滚动特效
12-16
淘宝首页的浮动图片效果，你看过肯定就会喜欢上他的，不要错过这么好的机会了，赶快下载吧
图片从右向左循环滚动
04-19
NULL 博文链接：https://scyy.iteye.com/blog/1874409
js图片向上下左右滚动的代码 图片向上滚动js代码
12-21
js图片向上下左右滚动的代码 图片向上滚动js代码 图片向下滚动js代码 图片向左滚动js代码 图片向右滚动js代码
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
weixin_39663258的博客
05-31 4781
1.概述循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：setTimeout(function,milliseconds,[arguments])参数说明：a. function：要调用的JavaScript自定义函数名称...
超简单的图片左右滑动代码
h422274755的专栏
03-08 4549
id="demoj" style="OVERFLOW: hidden; WIDTH:650px; HEIGHT: 200px;"> width="100%" border="0" cellspacing="0" cellpadding="0">     valign="top" id="demok">   border="0" align="cen
图片滑动代码
爱生活
08-11 1448
onmouseout="doscroll()">http://www.baidu.com/img/logo-yy.gif" height=20 width=104 border=0>http://www.google.cn/intl/zh-CN/images/logo_cn.gif" height=20 width=104 border=0>var t=demo.scrollWidth
网页图片上下滚动效果代码
04-17 8089
网页图片上下滚动代码 网页图片上下滚动代码 网页图片上下滚动代码 网页图片上下滚动代码 网页图片上下滚动代码                                                                           var speed=50 var feng=document.getElementById("feng");
html图片滚动代码
最新发布
12-27
图片滚动代码通常使用HTML、CSS和JavaScript实现。以下是一个简单的示例： 1. HTML部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片滚动</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> <!-- 更多图片... --> </div> <script src="script.js"></script> </body> </html> ``` 2. CSS部分（style.css）： ```css body { margin: 0; padding: 0; } .container { position: relative; width: 100%; height: 400px; overflow: hidden; } img { position: absolute; width: 100%; height: 400px; opacity: 0; transition: opacity 1s; } ``` 3. JavaScript部分（script.js）： ```javascript const images = document.querySelectorAll('.container img'); let currentIndex = 0; function changeImage() { images[currentIndex].style.opacity = 0; currentIndex = (currentIndex + 1) % images.length; images[currentIndex].style.opacity = 1; } setInterval(changeImage, 3000); // 每隔3秒切换一张图片 ``` 这个示例中，我们首先在HTML中创建了一个包含多张图片的容器。然后，我们使用CSS设置容器的样式，使其能够容纳图片并隐藏超出容器范围的部分。接着，我们在JavaScript中编写一个函数`changeImage`，用于切换图片的透明度，从而实现图片滚动的效果。最后，我们使用`setInterval`函数设置定时器，每隔3秒调用一次`changeImage`函数，实现图片的自动切换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值