html语言能制作图片幻灯片吗?就是两张或多张图片在同一个地方轮换播放,请大侠们赐教!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html语言能制作图片幻灯片吗?就是两张或多张图片在同一个地方轮换播放,请大侠们赐教!相关的知识,希望对你有一定的参考价值。
懂的请提供一个最简单的模板,小弟感谢了!!!
js实现起来应该简单些吧,网上随便搜下就好多,下载下来就能用 参考技术A 给个邮箱 我给你发一个JavaScript学习---自己动手写的图片轮播
效果如下:
图片定时轮播
点击左右控制显示下一张或上一张图片
index.html文件
<html> <head> <title> js编写实现幻灯片效果 </title> <meta content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> js编写实现幻灯片效果 <div class="content"> <div id="cimg1" > <img src="images/1.jpg" id="imgs"/> <div id="cimg4"><img src="images/left.png" /></div> <div id="cimg5"><img src="images/right.png" /></div> <div id="text"> <p id="textfont"> </p> </div> </div> </div> </body> <script src=\'js/index.js\'></script> </html>
css样式代码:(css/style.css)
.content{ width:450px; height:300px; margin: 120px auto; } #cimg1 img{ width:450px; height:300px; } #cimg4{ width:30px; height:25px; position:relative; left:0px; top:-150px; } #cimg5{ width:30px; height:25px; position:relative; left:420px; top:-175px; } #cimg4 img{ width:20px; height:25px; } #cimg5 img{ width:20px; height:25px; } #text{ height:50px; width:100%; background:#222222; position:relative; left:0px; top:-100px; } #text p{ color:#fff; text-align:center; }
JavaScript代码(js/idnex.js)
//获取放置图片div的对象 cimg1obj=document.getElementById("cimg1"); imgsobj=document.getElementById("imgs"); textobj=document.getElementById("textfont"); //左右翻转的图片 cimg4obj=document.getElementById("cimg4"); cimg5obj=document.getElementById("cimg5"); cimg4obj.onmouseover=function () { cimg4obj.style.background="#b3b3b3"; cimg4obj.style.borderRadius="20px" } cimg4obj.onmouseout=function () { cimg4obj.style.background=""; } cimg5obj.onmouseover=function () { cimg5obj.style.background="#b3b3b3"; cimg5obj.style.borderRadius="20px" } cimg5obj.onmouseout=function () { cimg5obj.style.background=""; } //向左的图标被点击时 //变量i用于记录当前的图片 //可以控制图片轮播的数量当前i的最大值只能为3,最小为0 i=1; imgsobj.src="images/"+i+".jpg";//默认幻灯片出来的图片是第一张 textadd(); //向左的图标被点击时 cimg4obj.onclick=function () { i--; if(i==0){ i=3; } imgsobj.src="images/"+i+".jpg";//重写图片路径 textadd(); } //向右的图标被点击时 cimg5obj.onclick=function () { i++; if(i==4){ i=1; } imgsobj.src="images/"+i+".jpg";//重写图片路径 textadd(); } //创建定时器实现自动图片轮播每隔5秒换一张图 setInterval("jishi()",5000);//1000为1秒钟 function jishi() { i++; if(i==4){ i=1; } imgsobj.src="images/"+i+".jpg";//重写图片路径 textadd(); } //为相应的图像添加文字 function textadd(){ switch (i) { case 1: textobj.innerHTML="《霸王别姬》<br/>说的是一辈子!差一年,一个月,一天,一个时辰,都不算一辈子! "; break; case 2: textobj.innerHTML="《春光乍泄》<br/>试问谁不想从头来过,但世间又有多少爱可以重来呢?"; break; case 3: textobj.innerHTML="《东邪西毒》<br/>你不能再拥有的时候。你唯一可以做的,就是让自己不要忘记。"; break; } }
以上是关于html语言能制作图片幻灯片吗?就是两张或多张图片在同一个地方轮换播放,请大侠们赐教!的主要内容,如果未能解决你的问题,请参考以下文章
如何在 UITableViewCell 中添加一张或多张图片?