154 lines
4.2 KiB
HTML
154 lines
4.2 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;
|
||
padding: 10px;
|
||
border : 1px solid #ccc;
|
||
margin: 50px auto;
|
||
position: relative;
|
||
}
|
||
.slider .inner {
|
||
width: 590px;
|
||
height: 470px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
}
|
||
.slider .inner ul {
|
||
width: 500%;
|
||
position: absolute;
|
||
}
|
||
.slider .inner ul li {
|
||
float: left;
|
||
}
|
||
|
||
.slider .btns {
|
||
color: #000;
|
||
/* position: absolute;
|
||
left: 10px;
|
||
right: 10px;
|
||
top: 50%; */
|
||
}
|
||
|
||
.slider .btns span {
|
||
/* display: inline-block; */
|
||
width:45px;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
cursor: pointer;
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 50%;
|
||
margin-top:-22px;
|
||
}
|
||
|
||
.slider .btns span:last-child {
|
||
right: 10px;
|
||
left: auto;
|
||
}
|
||
|
||
</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>
|
||
<div class="btns">
|
||
<span><</span>
|
||
<span>></span>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
function my$(id) {
|
||
return document.getElementById(id)
|
||
}
|
||
//获取元素slider
|
||
var slider = my$('slider');
|
||
//获取inner
|
||
var inner = slider.children[0]
|
||
//获取ul
|
||
var ul = inner.children[0]
|
||
//获取btn
|
||
var btns = slider.children[1]
|
||
//获取图片的宽度
|
||
var imgW = inner.offsetWidth
|
||
//获取左边按钮
|
||
var prev = btns.children[0]
|
||
//获取右边按钮
|
||
var next = btns.children[1]
|
||
//添加右侧按钮的点击事件
|
||
//添加计数器
|
||
var index = 0
|
||
next.onclick = function() {
|
||
if(index < 4) index++
|
||
var target = -imgW * index
|
||
//ul移动 改变ul的left值
|
||
//向左移动一张图片的距离 点击一次
|
||
//向左移动2张图片的距离 点击2次
|
||
//向左移动3张图片的距离 点击3次
|
||
//向左移动4张图片的距离 点击4次
|
||
//向左移动5张图片的距离 点击5次
|
||
//...
|
||
aniamte(ul, target)
|
||
}
|
||
|
||
prev.onclick = function() {
|
||
if(index > 0) {
|
||
index --
|
||
}
|
||
var target = -imgW * index
|
||
aniamte(ul, target)
|
||
}
|
||
|
||
//给slider添加鼠标移入移出效果， 控制按钮的显示和隐藏
|
||
slider.onmouseover = function() {
|
||
btns.style.display = 'block';
|
||
}
|
||
slider.onmouseout = function() {
|
||
btns.style.display = 'none';
|
||
}
|
||
function aniamte(ele,target) {
|
||
clearInterval(ele.timer)
|
||
ele.timer = setInterval(function(){
|
||
var current = ele.offsetLeft
|
||
var step = 10;
|
||
step = target - current >= 0 ? step : - step
|
||
current += step
|
||
if(Math.abs(target - current) > step) {
|
||
ele.style.left = current + 'px';
|
||
} else {
|
||
clearInterval(ele.temer)
|
||
ele.style.left = target + 'px'
|
||
ele.temer = null;
|
||
}
|
||
}, 10)
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |