136 lines
3.8 KiB
HTML
136 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
.slider {
|
|
width: 590px;
|
|
height: 470px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin: 50px auto;
|
|
}
|
|
.inner {
|
|
width: 590px;
|
|
height: 470px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.inner ul li {
|
|
float: left;
|
|
|
|
}
|
|
.inner ul {
|
|
width: 500%;
|
|
position: absolute;
|
|
}
|
|
.inner img {
|
|
width: 590px;
|
|
|
|
}
|
|
|
|
.focus {
|
|
position: absolute;
|
|
left: 50px;
|
|
bottom:25px;
|
|
}
|
|
.focus span{
|
|
padding:10px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
font-size: 0;
|
|
display: inline-block;
|
|
transition: all 0.3s;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.focus span:hover {
|
|
transform:scale(1.2);
|
|
background: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slider" id="slider">
|
|
<div class="inner">
|
|
<ul>
|
|
<li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
|
|
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/73861/8/7311/133024/5d562902E29c956c1/da390c8c345c48e0.jpg.webp" alt="" srcset=""></a></li>
|
|
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/79136/10/13206/197242/5da92d47Ee54665df/39d85a2990ba58d1.jpg.webp" alt="" srcset=""></a></li>
|
|
<li><a href="#"><img src="https://imgcps.jd.com/ling/22692212401/6JGh6JCE6YWS6ZKc5oOg/6YOo5YiGMuS7tjXmipg/p-5bd8253082acdd181d02fa02/153dad62.jpg" alt="" srcset=""></a></li>
|
|
<li><a href="#"><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/46901/24/7545/62345/5d52317fEebadcf80/8fb168cddd5ef2b9.jpg.webp" alt="" srcset=""></a></li>
|
|
</ul>
|
|
<div class="focus" id="focus">
|
|
<span>1</span>
|
|
<span>1</span>
|
|
<span>1</span>
|
|
<span>1</span>
|
|
<span>1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type='text/javascript'>
|
|
function my$(id) {
|
|
return document.getElementById(id)
|
|
}
|
|
//获取元素
|
|
var slider = my$('slider')
|
|
var inner = slider.children[0]
|
|
var ulObj = inner.children[0]
|
|
var focus = inner.children[1]
|
|
var spans = focus.children
|
|
//获取图片的宽度
|
|
// var imgW = 590;
|
|
var imgW = inner.offsetWidth
|
|
//批量绑定
|
|
var length = spans.length
|
|
for(var i=0;i<length;i++) {
|
|
// spans[i].index = i;
|
|
console.log(spans[i])
|
|
spans[i].setAttribute('index',i)
|
|
spans[i].onmouseover = function() {
|
|
//移动 目标位置，向什么地方移动多少距离 ul
|
|
animate(ulObj,-this.getAttribute('index')*imgW);
|
|
}
|
|
spans[i].onmouseout = function() {
|
|
//开启自动播放
|
|
}
|
|
}
|
|
function animate(ele,target) {
|
|
console.log(ele,target)
|
|
clearInterval(ele.timer)
|
|
ele.timer = setInterval(function() {
|
|
//当前左边宽度
|
|
var current = ele.offsetLeft;
|
|
//步长
|
|
var step = 5;
|
|
//确认方向
|
|
step = target - current >= 0 ? step : -step;
|
|
//动画完后左边宽度
|
|
current += step;
|
|
if(Math.abs(target - current) > Math.abs(step)) {
|
|
//当左边需要移动的宽度大于移动的步长
|
|
//直接移动
|
|
ele.style.left = current + 'px'
|
|
} else {
|
|
//小于移动的步长
|
|
//清除计时器
|
|
clearInterval(ele.timer)
|
|
//直接设置为终点
|
|
ele.style.left = target + 'px';
|
|
}
|
|
},1)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |