JavaScript学习第一弹：【图片轮播实现】
2014-05-31 00:28
429 查看
首先，看到的是效果图如下所示：
图片中，小图是按钮，大图是轮播的图片。
小图的命名：btn_01,btn_02,btn_03,btn_04。大图的命名：01,02,03,04。
另外每个轮播图的下方有一行文字。
接下来就是给大家说说我做出来的方法，可能代码不简洁，但是因为才学JS也只能做到这种地步了。
**********************************我是华丽的分割线*****************************************************
首先，把左边的大图先给实现出来。
这个需要把四个大图放在一个位置上边（利用相对位置:position），其中一个大图的属性display:block，其余的设置为display:none。
然后，把右边的小图也要实现出来。
这个就是定义一个盒子，然后把几个小图纵着放上去。
这是层次结构面和样式层面的，需要HTML+CSS（大图和小图的大小都是提前剪好的，大家可以根据给出的效果图把这几张图片抠出来）。
下边贴出HTML+css的代码：
接下来，我们要实现的就是行为层上的变化（JavaScript）。
我们需要的变化：所有的图片会自动的随着时间间隔轮播；点击某个小图，左方会出现相应的大图，然后图片会从这个小图开始继续轮播。
代码如下，内含注释：
在最后，只要把html+css还有javascript代码串联在一起，加上图片就可以看到效果。
（疯了，只能上传图片，不能上传压缩文件）。
我把代码总结在一起吧：
图片中，小图是按钮，大图是轮播的图片。
小图的命名：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].onmouseover=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].onmouseover=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].onmouseover=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].onmouseover=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.onload=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].onmouseover=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].onmouseover=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].onmouseover=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].onmouseover=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.onload=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript学习之用数组实现图片轮播
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
- javaScript实现图片轮播
- 轻松实现javascript图片轮播特效
- Javascript实现图片轮播效果(一)让图片跳动起来
- JavaScript仿商城实现图片广告轮播实例代码
- 使用javascript,jquery实现的图片轮播功能
- 用jquery面向对象实现的简单的图片轮播，还能学习一下闭包哦
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
- 基于JavaScript实现仿京东图片轮播效果
- Javascript实现图片轮播效果(一)让图片跳动起来
- Android事件分发学习应用-图片轮播实现
- JavaScript实现带标题的图片轮播特效
- javascript实现图片轮播效果
- 原生javascript实现图片轮播效果代码
- JavaScript实现带标题的图片轮播特效
- Web前端：javascript实现图片轮播
- JavaScript实现图片轮播的方法
- JavaScript仿商城实现图片广告轮播实例代码
- javascript实现图片轮播效果