轮播就是一组图，每次显示一张
1. 先定义两个函数：显示某图，隐藏某图
2. 写自动轮播
3. 写点击按钮的图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Carousel·轮播</title>
<style>
div.outer {
width: 200px;
height: 200px;
border: 1px solid #CCC;
/*留点边界,美观*/
padding: 5px;
}
div.per {
/*充满父div*/
width: 100%;
height: 100%;
/*border: 1px solid #CCC;这个留着的话，ahShadow层有一个px的误差对不齐*/
/*默认不显示*/
display: none;
}
.per .pic {
height: 100%;
width: 100%;
}
.per .title {
color: blue;
font-family: "微软雅黑";
/*位置调整*/
position: relative;
bottom: 25px;
left: 5px;
}
div.ahShadow {
height: 20px;
width: 100%;
background-color: #666;
/*位置调整*/
position: relative;
bottom: 20px;
/*透明度*/
opacity: 0.5;
/*透明度——IE不支持opacity*/
filter: alpha(opacity=50);
}
/*↓↓↓按钮*/
.divBtns {
position: relative;
bottom: 40px;
right: 5px;
/*右置*/
float: right;
}
.divBtns a {
width: 20px;
height: 20px;
background-color: #50F0D8;
/*文字处理*/
text-align: center;
text-decoration: none;
/*行内块显示*/
display: inline-block;
}
</style>
</head>
<body>
<div class="outer">
<div class="per">
<img class="pic" src="img/sh1.png" />
<div class="title">图片1</div>
</div>
<div class="per">
<img class="pic" src="img/sh2.png" />
<div class="title">图片2</div>
</div>
<!--------------------------------------->
<div class="ahShadow"></div>
<!--------------------------------------->
<div class="divBtns" id="btn-ahref">
<!--加一张图，就需要加一个按钮-->
<a href="javascript:void(0)" class="abtn">1</a>
<a href="javascript:void(0)" class="abtn">2</a>
</div>
</div>
<script>
var divlist = document.getElementsByClassName("per");
var btns = document.getElementsByClassName("abtn");
function picShow(idx) {
// 图片显示
divlist[idx].style.display = "block";
// 按钮变色
btns[idx].style.backgroundColor = "#FFF";
}
function picHiden(idx) {
divlist[idx].style.display = "none";
btns[idx].style.backgroundColor = "#50F0D8";
}
//自动轮播
function autoShow() {
for (var i = 0; i < divlist.length; i++) {
if (divlist[i].style.display == "block") {
// 让显示的图片不显示
picHiden(i);
// 下一张显示
if (i == divlist.length - 1) {
picShow(0);
} else {
picShow(i + 1);
}
// 做完了就撤
break;
}
}
}
// 初始化
picShow(0);
// 定时轮播
setInterval("autoShow()", 5000);
</script>
<script>
// 手动轮播
debugger;
for (i = 0; i < btns.length; i++) {
//i是不停在变的，每次循环要把i的当前值固定下来
// 自定义一个属性“idx”来存放i的值
btns[i].idx = i;
btns[i].onclick = function() {
// 当前下标对应的图片可见，其余图片不可见
for (j = 0; j < divlist.length; j++) {
picHiden(j);
}
picShow(this.idx);
}
}
</script>
</body>
</html>
时间： 2024-10-22 10:51:26