码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript学习---自己动手写的图片轮播

时间:2017-10-15 19:25:01      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:获取   obj   cti   mouse   tle   add   图像   href   http   

效果如下:

技术分享

 

图片定时轮播

点击左右控制显示下一张或上一张图片

 

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

 

JavaScript学习---自己动手写的图片轮播

标签:获取   obj   cti   mouse   tle   add   图像   href   http   

原文地址:http://www.cnblogs.com/soulsjie/p/7672831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!