轮播图
2017-07-21
JavaScript
轮播图
（1）js代码
//声明一个轮播次数的变量，
var num = 1;
//通过id获取标签
var li = document.getElementsByTagName("li");
var right = document.getElementById("right");
var img = document.getElementById("moveLiImg");
var left = document.getElementById("left");
//给ringht添加点击事件，向右波动
right.onclick = function() {
//加上1
num++;
//改变li标签的颜色的方法
cloroRed(num);
//改变src的值
img.src = "../img/" + num + ".jpg";
//当等于第五张变回第一张
if(num == 5) {
num = 0;
}
}
//给rleft添加点击事件，向左波动
left.onclick=function(){
//减一
num--;
if(num<1) {
num = 5;
}
cloroRed(num);
//改变src的值
img.src = "../img/" + num + ".jpg";
//当等于第一张变回第五张
}
//改变圆圈的颜色
function cloroRed(num){
for(var i = 1;i<li.length;i++){
//如果图片要展示出来，就让红点也展示出来
if(i==num){
//红色
li[i].style.backgroundColor="#FF0000";
}else{
//黑色
li[i].style.backgroundColor="#000000";
}
}
}
/*//自动播放setInterval()
function show() {
num++;
if(num > 5) {
num = 1;
}
//给要展示的第几个圆圈添加颜色
cloroRed(num);
img.src = "../img/" + num + ".jpg";
}
setInterval("show()", 3000);*/
//当点击li标签时颜色变得同时让图片也变
for (var i=1;i<li.length;i++){
li[i].onclick=function(){
cloroRed(this.value);
img.src = "../img/" + this.value + ".jpg";
}
}
（2）html代码
<!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 {
width: 500px;
height: 500px;
border: 5px solid #000;
position: relative;
}
/*给左右转换的设置样式*/
.moveImg a {
position: absolute;
top: 45%;
width: 40px;
height: 40px;
background: #000;
color: #fff;
font-size: 16px;
line-height: 40px;
text-align: center;
}
/*图片有大有小，全部设置成一样*/
img {
display: block;
width: 100%;
height: 500px;
}
.left {
left: 0;
}
.right {
right: 0;
}
/*位置*/
.clickBack {
position: absolute;
bottom: 20px;
width: 200px;
left: 0;
right: 0;
margin: 0 auto;
}
/*给圆点设置样式*/
.clickBack li{
width: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="" />
</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" onclick="dj()"></li>
<li value="2" ></li>
<li value="3" ></li>
<li value="4" ></li>
<li value="5" ></li>
</ul>
</div>
</body>
<script type="text/javascript" src="轮播图.js">
</script>
</html>
浙公网安备 33010602011771号