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;
							}
        	}

posted @ 2017-10-15 17:36 soulsjie 阅读(365) 评论(0) 收藏举报

刷新页面返回顶部

soulsjie

JavaScript学习---简易图片轮播

公告