这个效果一般称为图片轮播，实现的方法有很多，像b站的这种较为简单，可以用css3来实现。
以4张图片为例：
1.基本布局：
将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，
相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。
2.设置动画：
然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。
4张图片，需要切换3次.
根据需要可以对各个图片添加相应的序号和图片简介。
3.代码如下：
<div id="frame" ><div id="photos" class="play">
<img src="images/1.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
<img src="images/5.jpg" >
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div> 1 <style>
2 #frame{position:absolutewidth:300pxheight:200pxoverflow:hiddenborder-radius:5px}
3 #dis{position:absoluteleft:-50pxtop:-10pxopacity:.5}
4 #dis li{display:inline-blockwidth:200pxheight:20pxmargin:0 50pxfloat:lefttext-align:centercolor:#fffborder-radius:10pxbackground:#000}
5 #photos img{float:leftwidth:300pxheight:200px}
6 #photos { position: absolutez-index:9 width: calc(300px * 4)/*---修改图片数量的话需要修改下面的动画参数*/ }
7 .play{ animation: ma 20s ease-out infinite alternate}
8 @keyframes ma {
9 0%,25% { margin-left: 0px }
10 30%,50% { margin-left: -300px }
11 55%,75% { margin-left: -600px }
12 80%,100% { margin-left: -900px }
13
14 }
15 </style>
用编缉类软件打开公告所在网页，把滚动公告的HTML代码粘贴在你需要的位置。然后保存并用FTP软件上传到空间。再次打开网页就会看到滚动公告的。语法：<marquee>…</marquee>
使用移动属性marquee，不仅仅可以舞动你的文字，还可以应用于图片，表格等等。
例：<marquee direction=left>欢迎光临梦泽科技网站！</marquee>
direction=left，表示方向。上面文字效果是“欢迎光临梦泽科技网站！”从右向左移动！另外，方向还有right，up，down。
除了方向，我们还可以添加其他限制的元素：
移动的方式：
循环移动：loop＝n（n，表示次数） 绕圈移动：behavior=scroll 只走一次：behavior=slide 来回移动：behavior=alternate
外观：
字号：<font size=n>（n，变量） 对齐方式：align=top/middle/bottom 底色：bgcolor=Blue（预定义色彩，如：Black，Olive，Teal，Red，Blue，Maroon， Navy，Gray，Lime，Fuchsia，White，Green，Purple，Silver，Yellow，Aqua或16进制数码）
其它：
速度：scrollamount=n（n，变量） 延时：scrolldelay==n（n，变量）
<marquee direction="向什么方向移动" height="移动区域高度" width="移动区域宽度" scrollamount="移动速度" onmouseover=this.stop() onmouseout=this.start()>"
onmouseover 设置鼠标放在移动区域的时候暂停移动
onmouseout 鼠标离开的时候继续滚动
要完成此效果把如下代码加入到<body>区域中<script language="JavaScript">
<!--
done = 0
step = 1
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp
else document.all["napis"].style.top=yp
if(yp>yk) step = -1
if(yp<60) step = 1
setTimeout('anim('+(yp+step)+','+yk+')', 35)
}
function start()
{
if(done) return
done = 1
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145
anim(60,innerHeight - 60)
}
else {
napis.style.left=11
anim(60,document.body.offsetHeight - 60)
}
}
//-->
</script>
<div id="napis" style="position: absolutetop: -50color: #000000font-family:宋体font-size:9pt">
<p>
<a href=http://typhoon.500.to>升降文字特效</a>
</p></div>
<script language="JavaScript">
<!--
setTimeout('start()',10)
//-->
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）