js实现幻灯片案例解析

最新推荐文章于 2020-12-06 13:14:59 发布

sgls652709

最新推荐文章于 2020-12-06 13:14:59 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/sgls652709/article/details/9098241

版权

用js实现幻灯片的原理解析

几张图片按照float=left的形式一字排开，然后将包含图片的div的css定义成position:absolute。每隔指定时间段将div的top值发生改变。

效果：一个300px 300px的方框，地下有一张300px 900px的图片，然后将底下的图片向左拉，就可以实现幻灯片的播放。

具体js代码：

<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Insert title here</title>
<style type="text/css">
	#box{
		width:300px;
		height:300px;
		overflow:hidden;
		position:relative;
	}
	#internal{
		position:absolute;
		width:300px;
		height:300px;
	}
	#internal img{
		float:left;
	}
	ul{
		list-style:none;
		position:absolute;
		left:150px;
		top:240px;
	}
	ul li{
		text-decoration: none;
		width:30px;
		height:30x;
		float:left;
	
	}
</style>
<script type="text/javascript">
	var obj;
	var obj2;
	var falg = 1;
	window.onload = function(){
		obj2 = document.getElementById("internal");
		obj = document.getElementsByTagName("li");
		obj[0].style.backgroundColor = "grey";
		var obj3 = document.getElementById("box");
		var time = window.setInterval("fun();",2000);
		obj3.onmouseover = function(){
			window.clearInterval(time);
		}
		obj3.onmouseout = function(){
			time = window.setInterval(fun,2000);
		}
		for(var i = 0; i < obj.length; i++){
			obj[i].onmouseover = function(){
				fun(this.innerHTML-1);
			}
		}
	}
	function fun(value){
		if(value!=null){
			falg = value;
		}
		if(falg > 2){
			falg = 0;
		}
		for(var i = 0; i < obj.length; i++){
			if(i==falg){
				obj[i].style.backgroundColor = "grey";
			}else{
				obj[i].style.backgroundColor = "#FFFFFF";
			}
		}
		obj2.style.top = falg*(-300)+"px";
		falg++;
	}

</script>
</head>
<body>
	<div id="box">
		<div id="internal">
			<a><img src="image/3.jpg"/></a>
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</body>
</html>

值得注意的地方：

#box{

width:300px;

height:300px;

overflow:hidden;

position:relative;

}

这里指定id为box的div属性为position:relative用意：在这个div中的子div可以通过position:absolute。那么改变top left的值，移动的距离是基与这个父div,也就是id为box的div 。不然的话基于window的0px 0px位置开始。

这里overflow:hidden也是关键，是300px 300px这个方框里的内容才能看到，之外的是看不见的。

后面的操作就是通过window.setInterval每隔一段时间就改变图片所在div(id为internal)的top中的值，使其按照一张图片一张图片的向上移动。

ul中的li的鼠标消息函数的实现。当鼠标移动到li那么就停止播放，window.clearInteral实现停止，当移出那么window.setInterval重新开始播放。由于我之前设置过了id为box的div鼠标消息，那么就不用在设置每个li的鼠标消息了，因为这些都是在这个id为box的div里面的。

这里为了偷懒只放入了一张大图片，让它们在这张大图片中移动，当然可以讲几张小图片按照一字排开然后移动。原理是一样的。

下面介绍另一种幻灯片的实现

本来这个js从网上找到了，做的很炫，可惜需要积分下载，才能看到源码，博主只好根据其功能，仿写了一个，功能基本差不多，其中有一些细微的小bug，不过修改也比较简单。其思想和上边的大同小异，并且有较详细的注释。

原理：

将图片的url存放到数组中，根据当前的播放的幻灯片位置索引，为img 位置数组中的某个url，实现播放。幻灯片的index最多显示6个，数组中url > 6 个，那么index索引显示后面的6个同时添加了previouse 和next 按钮，可以方便定位。

<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Insert title here</title>
<style type="text/css">
	#box{
		width:300px;
		height:300px;
		overflow: hidden;
		position:relative;
	}
	ul{
		list-style: none;
		position:absolute;
		top:240px;
		left:0px;
	}
	li{
		width:30px;
		height:30px;
		float:left;
	}
	span{
		width : 60px;
		height: 60px;
		position:absolute;
	}
	span#one{
		top :255px;
		left:220px;
	}
	span#two{
		top:255px;
		left:260px;
	}
</style>
<script type="text/javascript">
	//define global variable 
	var img_obj;
	var li_obj;
	var index=0;
	var time;
	//store the image url here
	var img_paths = ["image/3.jpg","image/4.jpg","image/3.jpg","image/4.jpg","image/3.jpg","image/4.jpg","image/3.jpg"];
	window.onload = function(){
		img_obj = document.getElementsByTagName("img");
		li_obj = document.getElementsByTagName("li");
		// initialize the first li information
		li_obj[0].style.backgroundColor = "grey";
		alert(img_paths[0]);
		dealWithBtn();
		img_obj[0].src = img_paths[0];
		time = window.setInterval(fun,2500);
		//deal with message where user trigger	
		dealWithMsgForBtn();
	}
	function fun(value){
		index++;
		if(index > img_paths.length-1){
			index = 0;
			resetIndex();
		}
		dealWithBtn();
		if(index < 6){
			setColorForSpecil();
			setImgForSpecil();
		}else{
			resetIndex();
			//setColorForSpecil();
			//setImgForSpecil();
		}
	}
	function resetIndex(){
		if(index < 6){
			for(var i = 0; i < 6; i++){
				li_obj[i].innerHTML = i+1;
			}
		}else{
			//calling the function to do with this thing 
			//let the index display the next one when index
			//more than 5
			displayNextOrPreIndex();
		}
	}
	function dealWithBtn(){
		var btn_one = document.getElementById("btn_one");
		var btn_two = document.getElementById("btn_two");
		if(index == 0){
			btn_two.style.color = "blue";
			btn_one.style.color = "grey";
		}else if(index == img_paths.length-1){
			btn_one.style.color = "blue";
			btn_two.style.color = "grey";
		}else{
			btn_two.style.color = "blue";
			btn_one.style.color = "blue";
		}
	}
	function dealWithMsgForBtn(){
		var btn_one = document.getElementById("btn_one");
		var btn_two = document.getElementById("btn_two");
		btn_one.onclick = function(){
			//when mouse has clicked ,deal with this message here
			displayNextOrPreIndex(--index);
		}
		btn_two.onclick = function(){
			//the same as above;
			displayNextOrPreIndex(++index);
		}
		btn_one.onmouseover = function(){
			window.clearInterval(time);
		}
		btn_one.onmouseout = function(){
			time = setInterval(fun,2500);
		}
		btn_two.onmouseover = function(){
			window.clearInterval(time);
		}
		btn_two.onmouseout = function(){
			time = setInterval(fun,2500);
		}
	}
	function displayNextOrPreIndex(value){
		if(value!=null){
			index = value;
		}
		if(value < 0){
			index = 0;
		}
		if(value >= img_paths.length){
			index = img_paths.length-1;
		}
		
		//the value if null or not to be the falg to distinguish
		//between btn(button was click) and slide(when the index
		//more than 5,slide to display the back of the index value
		
		/**
			there are some wrong below when press pre btn if index variable
			more than li_obj.length because this function only suit next btn
			but here I'll ignore it because it's easy to modify ,how to modify it
			please see the function which was be comments
		*/
		if(value!=null && index > li_obj.length-1 && index < img_paths.length){
			for(var i = index,j=5; i >= index-5; i--,j--){
				li_obj[j].innerHTML = i+1;	
			}
			
			/*for(var i = index,j=5; i >= index-5; i--,j--){
				li_obj[j].innerHTML = i;
			}*/
		}else if(value==null){
			for(var i = index,j=5; i >= index-5; i--,j--){
				li_obj[j].innerHTML = i+1;
			}
		}else if(value!=null && index < li_obj.length-1){
				//a recursive put here purpose: when click pre btn
				// and the index variable less than li_obj.length, to reset
				// the index from 1 to li_obj.length-1
				resetIndex();
		}
		//set current li background and others
		setColorForSpecil();
		//set current image
		setImgForSpecil();
		//set pre and next status
		dealWithBtn();
	}
	function setColorForSpecil(){
		for(var k = 0; k < 6; k++){
			if(index < 6){
				if(k == index){
				li_obj[k].style.backgroundColor = "grey";
				}else{
					li_obj[k].style.backgroundColor = "#FFFFFF";
				}
			}else{
				if(k == 5){
					li_obj[5].style.backgroundColor = "grey";
				}else{
					li_obj[k].style.backgroundColor = "#FFFFFF";
				}
			}
		}
	}
	function setImgForSpecil(){
		img_obj[0].src = img_paths[index];
	}
</script>
</head>
<body>
	<div id="box">
		<div id="internal">
			<a><img /></a>
		</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<span id="one"><font id="btn_one"> pre </font></span>
		<span id="two"><font id="btn_two"> next </font></span>
	</div> 
</body>
</html>

当大于两个地方需要某个相近的功能，用if语句进行了将细微不同的地方区分，并且封装成了函数。js和java都可以应用面向对象中的相关知识。