JS---案例：简单轮播图
程序员文章站
2022-05-18 19:29:59
案例：简单轮播图 div叫盒子，里面包了2个小盒子，一个是inner，一个是square inner的div是放ul，里面有li，a，和图片 square的div里面放span，是轮播图的小点
案例：简单轮播图
div叫盒子，里面包了2个小盒子，一个是inner，一个是square
inner的div是放ul，里面有li，a，和图片
square的div里面放span，是轮播图的小点
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
img {
vertical-align: top
}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}
.inner {
width: 730px;
height: 454px;
background-color: pink;
overflow: hidden;
position: relative;
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner li {
float: left;
}
.square {
position: absolute;
right: 10px;
bottom: 10px;
}
.square span {
display: inline-block;
width: 16px;
height: 16px;
background-color: #fff;
text-align: center;
line-height: 16px;
cursor: pointer;
}
.square span.current {
background-color: orangered;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--相框-->
<ul>
<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/6.jpg" alt="" /></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外的div
var box = my$("box");
//获取相框
var inner = box.children[0];
//获取相框的宽度
var imgwidth = inner.offsetwidth;
//获取ul
var ulobj = inner.children[0];
//获取所有span标签
var spanobjs = inner.children[1].children;
//循环遍历所有的span标签，注册鼠标进入的事件
for (var i = 0; i < spanobjs.length; i++) {
//循环的时候把索引值保存在每个span的自定义属性中
spanobjs[i].setattribute("index", i);
//注册鼠标进入事件
spanobjs[i].onmouseover = function () {
//先干掉所有span的背景颜色
for (var j = 0; j < spanobjs.length; j++) {
//移除每个span的类样式
spanobjs[j].removeattribute("class");
}
//设置当前额span背景颜色
this.classname = "current";
//移动ul,每个图片的宽*鼠标放在此的按钮索引值
//获取当前鼠标进入的索引
var index = this.getattribute("index");
animate(ulobj, -index * imgwidth);
};
}
</script>
</body>
</html>