Day18-使用多个img标签做轮播图
使img标签不断显示和隐藏来实现轮播图效果。
1.HTML界面
首先先创建好一个div存放图片。其次放5张图片进去。除第一张之外，都设display:none样式隐藏起来
<div id="DivImg">
<img src="../images/a1.jpg" width="160" height="160">
<img src="../images/a2.jpg" width="160" height="160" class="none">
<img src="../images/a3.jpg" width="160" height="160" class="none">
<img src="../images/a4.jpg" width="160" height="160" class="none">
<img src="../images/a5.jpg" width="160" height="160" class="none">
</div>
2.JavaScript代码
先创建一个run()函数，用去定时器执行部分。
var count = 1;
function run(){
//先获取外面的div盒子
var DivImg = document.getElementById("DivImg");
//再获取盒子里的每一张图片
var Img = DivImg.getElementsByTagName("img");
for(var i=0;i<img.length;i++){
img[i].style.display = "none";
}
img[count].style.display = "block";
count++;
if(count > 4){
count = 0;
}
}
run()函数讲解：
1.首先先获取存放图片的div，即
var DivImg = document.getElementById("DivImg");
2.其次再获取div中的每一个img标签。即var Img = DivImg.getElementsByTagName("img");
3.for循环的作用:为了让所有图片都隐藏。for循环执行5次，即全部隐藏。
4.img[count].style.display = "block";函数外声明了count=1，故执行完上面一句，下标为0的img会隐藏，所有此时下标为1的div要显示。
5.count++，每执行一次定时器要显示下一张，故count++；
6.if()判断,当执行完第五张[下标为4]，重置count=0;
然后用定时器来执行run()函数。
//首先先要声明一个定时器Time;
var Time;
//每隔1s执行一次
Time = setInterval("run()",1000);
简单的轮播效果就完成了，当然之后要对其进行升级强化。
再在存放的图片的div上添加
onMouseOver和onMouseOut事件，让鼠标移入停止轮播，鼠标移出继续轮播.
<div id="DivImg" onMouseOver="st()" onMouseOut="start()">
function st(){
clearInterval(Time);
}
function start(){
Time = setInterval("run()",1000);
}
当移入时，清除定时器，移出时，再次启动定时器。
注：移入事件不要用stop()来命名。因为stop()是内置方法。
然后一般的轮播都会有按钮，当鼠标移入相应按钮，则切换相应图片。
首先先布个局，使用<ul><li></li></ul>来做
HTML代码
<ul id="ul">
<li class="color">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Css样式
#ul li{
width:20px;
height:20px;
float:left;
cursor:pointer;
list-style:none;
margin-right:5px;
text-align:center;
border:1px solid #000;
}
.color{
color:#FFF;
background:#000;
}
效果图：
记得把第一个设为黑底白字。
然后考虑实现效果。继续写在run()方法中。
var count = 1;
function run(){
//先获取外面的div盒子
var DivImg = document.getElementById("DivImg");
//再获取盒子里的每一张图片
var Img = DivImg.getElementsByTagName("img");
//获取存放li的ul
var Ul = document.getElementById("ul");
//获取每一个li
var AllLi = Ul.getElementsByTagName("li");
for(var i=0;i<img.length;i++){
img[i].style.display = "none";
}
img[count].style.display = "block";
//按钮改变样式，思路和上面的for循环相同。
for(var i=0;i<AllLi.length;i++){
AllLi[i].style.background = "#FFF";
AllLi[i].style.color = "#000";
}
AllLi[count].style.background = "#000";
AllLi[count].style.color = "#FFF";
count++;
if(count > 4){
count = 0;
}
}
让按钮跟随图片一起，图片切换，相应的按钮改变颜色。
为了让鼠标移入有效果，则需要添加onMouseOver事件。
像下面这样：
<li onMouseOver="show(this)"></li>
然后写show(num)方法。
function show(num){
st();
count = num.innerHTML - 1;
run();
start();
}
show(num)方法详解：
第一：执行了st()函数，即清除定时器。
第二：获取传来的num。因为是有参方法，鼠标移入li中，传来了对应的li(即this)，再用innerHTML获取其文本，减一即为对应的下标。
第三：再执行一次run()函数，将图片和按钮切换。
第四：继续执行定时器。
更完~~~