<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding:0;
}ul {
list-style: none;
}.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: 0px;
left: 0px;
}
.inner li {
float: left;
}.square {
position: absolute;
right: 100px;
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(每个图片的宽*鼠标放在这个按钮的索引值)
//获取当前鼠标进入的span的索引
var index = this.getAttribute("index");
animate(ulObj,-index*imgWidth);
};
}
//设置任意的一个元素,移动到指定的目标位置
function animate(element,target){
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function() {
//获取元素的当前位置,数组类型
var current = element.offsetLeft;
// 每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
}
else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
},20);
}
</script>
</body>
</html>
js 最简单的轮播图修改index赋值方式
猜你喜欢
转载自blog.csdn.net/chen1042246612/article/details/88309234
今日推荐
周排行