JavaScript学习第一弹：【图片轮播实现】

最新推荐文章于 2022-03-25 15:09:04 发布

u010800530

最新推荐文章于 2022-03-25 15:09:04 发布

阅读量2.3k

点赞数

分类专栏： JavaScript学习文章标签： javascript 图片 js function 文档

本文链接：https://blog.csdn.net/u010800530/article/details/27728981

版权

JavaScript学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先，看到的是效果图如下所示：

图片中，小图是按钮，大图是轮播的图片。

小图的命名：btn_01,btn_02,btn_03,btn_04。大图的命名：01,02,03,04。

另外每个轮播图的下方有一行文字。

接下来就是给大家说说我做出来的方法，可能代码不简洁，但是因为才学JS也只能做到这种地步了。

**********************************我是华丽的分割线*****************************************************

首先，把左边的大图先给实现出来。

这个需要把四个大图放在一个位置上边（利用相对位置:position），其中一个大图的属性display:block，其余的设置为display:none。

然后，把右边的小图也要实现出来。

这个就是定义一个盒子，然后把几个小图纵着放上去。

这是层次结构面和样式层面的，需要HTML+CSS（大图和小图的大小都是提前剪好的，大家可以根据给出的效果图把这几张图片抠出来）。

下边贴出HTML+css的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#pic_left{width:350px; height:280px; float:left;position:relative;}
.text{width:340px; height:25px; background:#000; position:absolute; top:250px; opacity:0.5; color:#FFF; font-size:12px; padding-left:10px; padding-top:5px;}

#pic_right{width:100px; height:280px; float:left; margin-left:20px;}
#pic_right div{width:90px; height:60px; margin-top:8px; } 
</style>

</head>

<body>
<div  id="pic_left">
	<div style="display:block;" id="1">
    	<a href="#"><img src="img/01.jpg" /></a>
    	<div class="text">
  			忧伤在我心中沉静下来，宛如降临在寂静山林中的一抹夜色	
        </div>
    </div>
    <div style="display:none;" id="2">
    	<a href="#"><img src="img/02.jpg" /></a>
    	<div class="text">
  			我就想停泊在海滩上的一艘小船，聆听着晚潮奏鸣
        </div>
    </div>
    <div style="display:none;" id="3">
    	<a href="#"><img src="img/03.jpg" /></a>
    	<div class="text">
  			生命是上天赋予的，我们唯有献出生命，才能真正得到她。
        </div>
    </div>
    <div style="display:none;" id="4">
    	<a href="#"><img src="img/04.jpg" /></a>
		<div class="text">
  			今天大地在阳光下向我细语，另一种语言。
        </div>
    </div>
</div>
<div id="pic_right">
	<div><a href="#"><img src="img/btn_01.jpg"  /></a></div>
    <div><a href="#"><img src="img/btn_02.jpg" /></a></div>
    <div><a href="#"><img src="img/btn_03.jpg" /></a></div>
    <div><a href="#"><img src="img/btn_04.jpg" /></a></div>
</div>
<div style="clear:both;"></div>
</body>
</html>

接下来，我们要实现的就是 行为层上的变化（JavaScript）。

我们需要的变化：所有的图片会自动的随着时间间隔轮播；点击某个小图，左方会出现相应的大图，然后图片会从这个小图开始继续轮播。

代码如下，内含注释：

<script>
var count;
var temp;
var t;
function prepareSlideshow()
{
	if(!document.getElementById)return false;
	if(!document.getElementsByTagName)return false;
	if(!document.getElementById("pic_right"))return false;
	if(!document.getElementById("pic_left"))return false;

	var pic_right=document.getElementById("pic_right");
	var links_right=pic_right.getElementsByTagName("div");
	
	var pic_left=document.getElementById("pic_left");
	var links_left=pic_left.getElementsByTagName("div");
	
	var i=2,j=1;
	t=setInterval(       //此函数设置隔一段时间轮播下一个图片
		function(){
			moveMessage(i,j);  //调用轮播函数（从第j个图轮播向第i个图
			if(i==4)    //如果该第四张图片轮播，则让i重置为1，然后从1开始
			{
				i=1;j=4;	
			}
			else       //如果不到第四张，就继续往下
			{
				i++;
				if(j==4)  //如果此时轮播的图片是第四张，则让下次要轮播的图片为第一张
					j=1;
				else
					j++;	
			}
		},2500  //设置时间间隔2.5s
	);
		
	//以下的全部为鼠标移动到某个图片上边后的行为	
	links_right[0].οnmοuseοver=function()   //鼠标移动到图片1上边
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")  //先判断哪个图片是正在显示的
				{
					moveMessage(1,j+1);	     //让正在显示的隐藏，图片1显现。	
					count=2;
					temp=count-1;
					clearInterval(t);
					t=setInterval(     //然后，从本张图片继续按照时间间隔轮播。
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
	links_right[1].οnmοuseοver=function()
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")
				{
					moveMessage(2,j+1);	
					count=3;
					temp=count-1;
					clearInterval(t);
					t=setInterval(
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
	links_right[2].οnmοuseοver=function()
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")
				{
					moveMessage(3,j+1);	
					count=4;
					temp=count-1;
					clearInterval(t);
					t=setInterval(
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
	links_right[3].οnmοuseοver=function()
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")
				{
					moveMessage(4,j+1);	
					count=4;
					temp=3;
					clearInterval(t);
					t=setInterval(
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
}

function moveMessage(i,j)         //从第j个图片轮播到第i个图片
{
	if(!document.getElementById)return false;
	if(!document.getElementById("pic_right"))return false;	
	var right=document.getElementById("pic_right");
	var pic=right.getElementsByTagName("div");
	
	
	document.getElementById(j).style.display="none";   //设置不可见
	pic.item(j-1).style.border="0px solid red"; 
	
	document.getElementById(i).style.display="block";  //设置可见
	pic.item(i-1).style.border="2px solid red"; //设置移动到相应图片后，小图周围设置红色边框
}
window.οnlοad=prepareSlideshow;
</script>

在最后，只要把html+css还有javascript代码串联在一起，加上图片就可以看到效果。

（疯了，只能上传图片，不能上传压缩文件）。

我把代码总结在一起吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#pic_left{width:350px; height:280px; float:left;position:relative;}
.text{width:340px; height:25px; background:#000; position:absolute; top:250px; opacity:0.5; color:#FFF; font-size:12px; padding-left:10px; padding-top:5px;}

#pic_right{width:100px; height:280px; float:left; margin-left:20px;}
#pic_right div{width:90px; height:60px; margin-top:8px; } 
</style>
<script>
var count;
var temp;
var t;
function prepareSlideshow()
{
	if(!document.getElementById)return false;
	if(!document.getElementsByTagName)return false;
	if(!document.getElementById("pic_right"))return false;
	if(!document.getElementById("pic_left"))return false;

	var pic_right=document.getElementById("pic_right");
	var links_right=pic_right.getElementsByTagName("div");
	
	var pic_left=document.getElementById("pic_left");
	var links_left=pic_left.getElementsByTagName("div");
	
	var i=2,j=1;
	t=setInterval(       //此函数设置隔一段时间轮播下一个图片
		function(){
			moveMessage(i,j);  //调用轮播函数（从第j个图轮播向第i个图
			if(i==4)    //如果该第四张图片轮播，则让i重置为1，然后从1开始
			{
				i=1;j=4;	
			}
			else       //如果不到第四张，就继续往下
			{
				i++;
				if(j==4)  //如果此时轮播的图片是第四张，则让下次要轮播的图片为第一张
					j=1;
				else
					j++;	
			}
		},2500  //设置时间间隔2.5s
	);
		
	//以下的全部为鼠标移动到某个图片上边后的行为	
	links_right[0].οnmοuseοver=function()   //鼠标移动到图片1上边
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")  //先判断哪个图片是正在显示的
				{
					moveMessage(1,j+1);	     //让正在显示的隐藏，图片1显现。	
					count=2;
					temp=count-1;
					clearInterval(t);
					t=setInterval(     //然后，从本张图片继续按照时间间隔轮播。
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
	links_right[1].οnmοuseοver=function()
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")
				{
					moveMessage(2,j+1);	
					count=3;
					temp=count-1;
					clearInterval(t);
					t=setInterval(
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
	links_right[2].οnmοuseοver=function()
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")
				{
					moveMessage(3,j+1);	
					count=4;
					temp=count-1;
					clearInterval(t);
					t=setInterval(
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
	links_right[3].οnmοuseοver=function()
	{
			for(j=0;j<links_right.length;j++)
			{
				if(document.getElementById(j+1).style.display=="block")
				{
					moveMessage(4,j+1);	
					count=4;
					temp=3;
					clearInterval(t);
					t=setInterval(
						function()
						{
							moveMessage(count,temp);
							if(count==4)
							{
								count=1;temp=4;	
							}
							else
							{
								count++;
								if(temp==4)
									temp=1;
								else
									temp++;
							}
						},2500
					);
				}
			}
	}
}

function moveMessage(i,j)         //从第j个图片轮播到第i个图片
{
	if(!document.getElementById)return false;
	if(!document.getElementById("pic_right"))return false;	
	var right=document.getElementById("pic_right");
	var pic=right.getElementsByTagName("div");
	
	
	document.getElementById(j).style.display="none";   //设置不可见
	pic.item(j-1).style.border="0px solid red"; 
	
	document.getElementById(i).style.display="block";  //设置可见
	pic.item(i-1).style.border="2px solid red"; //设置移动到相应图片后，小图周围设置红色边框
}
window.οnlοad=prepareSlideshow;
</script>
</head>

<body>
<div  id="pic_left">
	<div style="display:block;" id="1">
    	<a href="#"><img src="img/01.jpg" /></a>
    	<div class="text">
  			忧伤在我心中沉静下来，宛如降临在寂静山林中的一抹夜色	
        </div>
    </div>
    <div style="display:none;" id="2">
    	<a href="#"><img src="img/02.jpg" /></a>
    	<div class="text">
  			我就想停泊在海滩上的一艘小船，聆听着晚潮奏鸣
        </div>
    </div>
    <div style="display:none;" id="3">
    	<a href="#"><img src="img/03.jpg" /></a>
    	<div class="text">
  			生命是上天赋予的，我们唯有献出生命，才能真正得到她。
        </div>
    </div>
    <div style="display:none;" id="4">
    	<a href="#"><img src="img/04.jpg" /></a>
		<div class="text">
  			今天大地在阳光下向我细语，另一种语言。
        </div>
    </div>
</div>
<div id="pic_right">
	<div><a href="#"><img src="img/btn_01.jpg"  /></a></div>
    <div><a href="#"><img src="img/btn_02.jpg" /></a></div>
    <div><a href="#"><img src="img/btn_03.jpg" /></a></div>
    <div><a href="#"><img src="img/btn_04.jpg" /></a></div>
</div>
<div style="clear:both;"></div>
</body>
</html>