1.onclick是个触发事件
2.循环 setInterval（循环的元素，循环间隔）；
例如：
setInterval("test()",1000);
function test(){
num++;
if(num>5){
num=1;
}
addColor(num);
img.src="../img/"+num+".jpg";
}
3.添加颜色
addColor(给那个位置添加颜色);
例如：
function addColor(num){
for(var i=1;i<li.length;i++){
if(i==num){
li[i].style.backgroundColor="#FF0000";
//给li下的位置添加红色
}else{
li[i].style.backgroundColor="#000000";
}
}
}
4.获取value值
for(var i=1;i<li.length;i++){
li[i].onclick=function(){
//获取value值
var num =this.value;
addColor(num);
img.src="../img/"+num+".jpg";
}
}
今天下午的的轮播图代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*给所有的设置*/
*{
margin:0;
padding:0;
}
/*取消a标签的下划线*/
a{
text-decoration: none;
}
/*圆点不需要样式*/
ul,li{
list-style: none;
}
/*给div设置样式*/
.moveImg{
500px;
height:500px;
border:5px solid #000;
position: relative;
}
/*给左右转换的设置样式*/
.moveImg a{
position:absolute;
top:45%;
40px;
height:40px;
background: #000;
color:#fff;
font-size: 16px;
line-height: 40px;
text-align: center;
}
/*图片有大有小，全部设置成一样*/
img{
display: block;
100%;
height:500px;
}
.left{
left:0;
}
.right{
right:0;
}
/*位置*/
.clickBack{
position:absolute;
bottom:20px;
200px;
left:0;
right:0;
margin:0 auto;
}
/*给圆点设置样式*/
.clickBack li{
20px;
height:20px;
float:left;
background:#000;
border-radius:10px;
margin: 0 10px;
}
/*第一个圆点设置红色*/
.clickBack .liImg{
background:red;
}
</style>
<body>
<div class="moveImg">
<!--图片-->
<ul>
<li>
<img id="moveLiImg" src="../img/1.jpg" alt="" onclick="text()"/>
</li>
</ul>
<!--左右变化的符号-->
<a href="#" id="left" class="left">《</a>
<a href="#" class="right" id="right">》</a>
<!--下面的圆点点-->
<ul class="clickBack" id="clickBack">
<li class="liImg" value="1"></li>
<li value="2"></li>
<li value="3"></li>
<li value="4"></li>
<li value="5"></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var num = 1;
//通过id获取标签>>
var right = document.getElementById("right");
var left=document.getElementById("left");
var img = document.getElementById("moveLiImg");
var li= document.getElementsByTagName("li");
//给ringht添加点击事件
right.onclick = function(){
//加上1
num++;
//改变src的值
addColor(num);
img.src="../img/"+num+".jpg";
//当等于第五张变回第一张
if(num==5){
num=0;
}
}
//1.实现左边这个按钮
left.onclick = function(){
//加上1
num--;
//改变src的值
//当等于第五张变回第一张
if(num<1){
num=5;
}
addColor(num);
img.src="../img/"+num+".jpg";
}
//2，实现自动轮播
/* setInterval("test()",1000);
var array = new Array("../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg");
function test(){
var myimg=document.getElementById("img");
if(index==array.length-1)
{ index=0;
}else{
index++;
}
myimg.src=array[index];
}*/
/* setInterval("test()",1000);
function test(){
num++;
if(num>5){
num=1;
}
addColor(num);
img.src="../img/"+num+".jpg";
}
*/
function addColor(num){
for(var i=1;i<li.length;i++){
if(i==num){
li[i].style.backgroundColor="#FF0000";
}else{
li[i].style.backgroundColor="#000000";
}
}
}
for(var i=1;i<li.length;i++){
li[i].onclick=function(){
var num =this.value;
addColor(num);
img.src="../img/"+num+".jpg";
}
}
</script>