JavaScript之banner轮播图
轮播图分为两种，一种是点击下方圆点，图片跟随圆点的变化而变化；还有一种是这篇文章要写的：点击图片，下方圆点跟随图片的变化而变化。
设计思路
- 在body里面定义一个列表，通过css来设计圆点的样式；同时在body里还应该写出第一张显示的图片并设置这个图片的id，为这张图片加上onclick()点击事件；通过JavaScript来实现效果。
body代码如下：
<body>
<img src="img/a1.jpeg" id="pic" onclick="f()">
//因为是通过点击图片而变化，所以在图片里得加入onclick()点击事件
<ul id="list">
<li class="bg"></li>
//给点击的小圆点设计了样式，样式的类名为bg
<li></li>
<li></li>
<li></li>
</ul>
</body>
css代码如下：
*{
padding:0;
margin: 0;
list-style: none;
}
#list{
height: 100px;
width: 1000px;
}
#list li{
float: left;
background: #c0c0c0;
height: 100px;
width: 100px;
border-radius: 50px;
margin-left:150px;
cursor: pointer;
}
.bg{
background:red!important;
}
注意：
- border-radius: 50px;设置圆角度的，当它等于宽高的一半就是圆形。
- cursor: pointer;点鼠标划过，鼠标状态呈现小手形状。
- background:red!important;颜色强制转化为red。
JavaScript代码如下：
<script>
var i=0;
//定义一个变量i
function f(){
var arr=["img/a1.jpeg","img/a3.jpeg","img/a4.jpeg","img/a5.jpeg"];
//把要显示的图片存入数组arr中
i++;
//i+1，i变为1
if(i>=arr.length){
i=0;
}
//如果i大于等于数组的长度，i=0
var pic = document.getElementById("pic");
//定义一个变量pic，用来接收代码中id名为pic的文档
pic.src=arr[i];
//pic的图片变为arr数组中第i个的图片
var list = document.getElementById("list");
//定义一个变量list，用来接收代码中id名为list的文档
var li = list.getElementsByTagName("li");
//定义一个变量li，用来接收代码中标签名为li的标签
for(var j=0;j<li.length;j++){
li[j].className="";
}
//图片没有点击的圆点不变色
li[i].className="bg";
//图片被点击的圆点变为bg所设置的颜色red
}
</script>
运行结果
