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 中添加一张或多张图片?

如何在ppt的一页 实现横向多张图片循环滚动播放的效果

如何合并图像并相互施加

用java怎么获得一张图片上的一个文字的坐标点 求高手解答

Phonegap-(Android/iphone) 多张图片的图库有问题吗?

Python如何重叠图片?