<body>
<!-- 轮播图开始 -->
<div id="banner">
<!-- 图片盒子 -->
<div id="tu">
<img src="img/0.jpg" class="xian">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
<div class="clear"></div>
<!-- 小圆点盒子 -->
<ul id="dian">
<li class="red">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="clear"></div>
</ul>
<!-- 按钮盒子 -->
<div id="left"></div>
<div id="right"></div>
</div>
</body>
/*公共样式*/
*{margin:0px;padding:0px;}
li{list-style: none;display: inline-block;}
.clear{clear: both;}
/*页面样式*/
#banner{
width: 730px;
height: 454px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#tu img{display: none;}
#tu .xian{display: block;}
/*公共样式*/
*{margin:0px; padding: 0px;}
li{list-style: none;}
.clear{clear:both;}
/* 测试样式表是否链接好了 */
/*body{background: red;} */
/*页面样式*/
#banner{
width:730px;
height:454px;
margin:50px auto;
position: relative;
overflow: hidden;
}
#tu img{display: none;}
#tu .xian{display:block;}
#dian{
position:absolute;
bottom:10px;
left:300px;
}
#dian li{
width:20px;
height: 20px;
background: #000;
float: left;
margin-right: 10px;
text-align: center;
color:#fff;
border-radius:50%;
}
#dian li.red{background: red;}
#left{
width:55px;
height: 55px;
background: url('../img/zuo.png') -3px -5px;
position:absolute;
left:20px;
bottom:200px;
border-radius:50%;
display: none;
}
#right{
width:55px;
height: 55px;
background: url('../img/you.png') -1px 2px;
position:absolute;
right:20px;
bottom:200px;
border-radius:50%;
display: none;
}
#banner:hover #left,#banner:hover #right{display: block;}
window.onload = function () {
//alert(11111);//验证外部js是否链接正确
//1.获得节点
var oDiv = document.getElementById("tu");//放图片的div
var imgs = oDiv.getElementsByTagName("img");//图片集合
console.log(imgs);
var Dian = document.getElementById("dian");//放小圆点的ul
var oLi = Dian.getElementsByTagName("li");//放小圆点的li集合
console.log(oLi);
var Banner = document.getElementById("banner");
console.log(Banner);
var Left = document.getElementById("left");
console.log(Left);
var Right = document.getElementById("right");
console.log(Right);
var index = 0 ;//存放索引号,一定得放在函数外面,放在函数里面的话,会一直显示第一张(做全局变量)
function tu(){
index++;//定时器每调用一次函数,index值每次自加一个
if(index == 5 ){//当index的值为5时,图片集合中没有索引为5的图片,索引重新给index赋值为0,让图片再从第一张图片开始
index = 0;
}
fu();
/*//一.处理图片
//先隐藏5张
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
//再显示需要展示的那一张
imgs[index].style.display = "block";
//二.处理小圆点
//首先都是黑色背景
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "#000000";
}
//和显示的图片索引相同的小圆点变红
oLi[index].style.background = "red";
*/
}
//三.加定时器 让小圆点和图片动起来
//然后每隔一段时间换一张图片
var t = setInterval(tu,1000);
//四移入banner图时,图片停止变换
Banner.onmouseover = function(){
clearInterval(t);
}
//五移出banner时,图片继续变化
Banner.onmouseout = function(){
t = setInterval(tu,1000);
}
//六.移入小圆点,显示索引对应的图片
for (var j = 0; j < oLi.length; j++) {
oLi[j].suoYin = j;//把小圆点的索引存在j里面
oLi[j].onmouseover = function(){
index = this.suoYin//移入小圆点的索引
fu();
/*//先隐藏5张
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
//再显示需要展示的那一张
imgs[index].style.display = "block";
//首先都是黑色背景
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "#000000";
}
//和显示的图片索引相同的小圆点变红
oLi[index].style.background = "red";*/
}//移入事件结束符
}//for循环结束
//七点击左按钮,显示后一张
Left.onclick = function(){
/*//先隐藏5张
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}*/
//把index值加1,显示后一张
index = index+1;
//重新定义index,让它等于5的时候index值等于0
if (index == 5) {
index = 0 ;
}
fu();
/*//再显示需要展示的那一张
imgs[index].style.display = "block";
//首先都是黑色背景
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "#000000";
}
//和显示的图片索引相同的小圆点变红
oLi[index].style.background = "red";*/
}
//八.点击右边按钮,显示前一张
Right.onclick = function(){
/*//先隐藏5张
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}*/
//把index值减1,显示前一张
index = index-1;
//重新定义index,让它等于5的时候index值等于0
if (index == -1) {
index = 4 ;
}
fu();
/*//再显示需要展示的那一张
imgs[index].style.display = "block";
//首先都是黑色背景
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "#000000";
}
//和显示的图片索引相同的小圆点变红
oLi[index].style.background = "red";
*/
}
//九.优化代码,将重复使用的代码封装到函数中,在需要的位置调用函数即可
function fu(){
//先隐藏5张
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
//再显示需要展示的那一张
imgs[index].style.display = "block";
//首先都是黑色背景
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.background = "#000000";
}
//和显示的图片索引相同的小圆点变红
oLi[index].style.background = "red";
}
}