先看一个效果
轮播图一个是点击左右切换按钮,图片切换,还有一个就是下面圆形的标记,当鼠标放上是颜色变,图片也变。
我们先写界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.carousel {
width: 672px;
height: 350px;
margin: 50px auto;
position: relative;
}
ul {
list-style: none;
}
.carousel ul li {
display: none;
}
.carousel ul li.current {
display: block;
}
.carousel .mask {
width: 100%;
height: 60px;
background-color: black;
opacity: 0.6;
filter: alpha(opacity=60);
position: absolute;
bottom: 30px;
}
.carousel h3 {
position: absolute;
height: 60px;
line-height: 60px;
bottom: 30px;
color: white;
font-size: 20px;
padding-left: 12px;
}
.carousel span {
position: absolute;
top: 132px;
width: 55px;
height: 55px;
cursor: pointer;
}
.carousel span.leftBtn {
left: 10px;
background: url(sohu/slide-btnL.png);
}
.carousel span.rightBtn {
right: 10px;
background: url(sohu/slide-btnR.png);
}
.carousel .circles {
position: absolute;
bottom: 0px;
width: 200px;
height: 17px;
left: 50%;
margin-left: -75px;
}
.carousel .circles ol {
list-style: none;
}
.carousel .circles li {
width: 17px;
height: 17px;
float: left;
background: gold;
margin-right: 13px;
border-radius: 50%;
}
.carousel .circles li.current {
background-color: purple;
}
</style>
</head>
<body>
<div class="carousel">
<div class="imgList" id="imgList">
<ul>
<li class="current">
<a href=""><img src="sohu/aaa.jpg" alt="" /></a>
<div class="mask"></div>
<h3>1111111111111</h3>
</li>
<li>
<a href=""><img src="sohu/bbb.jpg" alt="" /></a>
<div class="mask"></div>
<h3>222222222222</h3>
</li>
<li>
<a href=""><img src="sohu/ccc.jpg" alt="" /></a>
<div class="mask"></div>
<h3>33333333333333</h3>
</li>
<li>
<a href=""><img src="sohu/ddd.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="sohu/eee.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="btns">
<span class="leftBtn" id="leftBtn"></span>
<span class="rightBtn" id="rightBtn"></span>
</div>
<div class="circles" id="circles">
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</body>
</html>
主要的思路就是给图片设置class样式,从而去显示和隐藏对应的图片,下面我们来看看js部分
<script type="text/javascript">
// 得到所有的元素
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var circlesLis = document.getElementById("circles").getElementsByTagName("li");
var imgListLis = document.getElementById("imgList").getElementsByTagName("li");
var img_index = 0; // 范围0~4 也就是一共轮播图的数量
// 左右按钮监听
leftBtn.onclick = function() {
img_index--;
if(img_index < 0) {
img_index = 4;
}
// 让对应图片显示
changePic();
}
rightBtn.onclick = function() {
img_index++;
if(img_index > 4) {
img_index = 0;
}
// 让对应图片显示
changePic();
}
// 对小圆点进行批量监听
for(var i=0; i<circlesLis.length; i++) {
circlesLis[i].index = i;//强制添加属性的方式
circlesLis[i].onmouseover = function() {
img_index = this.index;
changePic();
}
}
function changePic() {
// 1 先让所有图片隐藏 去掉current类
for(var i=0; i<imgListLis.length; i++) {
imgListLis[i].className = "";
}
// 2 让对应的图片显示
imgListLis[img_index].className = "current";
// 调整对应圆点的样式 排他思想
// 3 先让所有圆点紫色样式去掉
for(var i=0; i<circlesLis.length; i++) {
circlesLis[i].className = "";
}
circlesLis[img_index].className = "current";
}
</script>
js的dom对象的轮播图案例已讲完,接下来会来讲js的dom对象的计算后样式的相关知识点,如有表达错的请谅解,并请提出指出,且修改错误,望能共同进步。