116 lines
3.3 KiB
HTML
116 lines
3.3 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: 600%;
|
|
position: absolute;
|
|
}
|
|
.slider .inner ul li {
|
|
float: left;
|
|
}
|
|
|
|
|
|
</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>
|
|
<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>
|
|
</ul>
|
|
</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]
|
|
//获取图片的宽度
|
|
var imgW = inner.offsetWidth
|
|
|
|
//一直改变ul的left值 达到目标循环播放所有图
|
|
//创建定时器
|
|
//声明当前的位置
|
|
var current = 0;
|
|
|
|
function startslider() {
|
|
return setInterval(function(){
|
|
//只要当前的位置一直减少就是向左移动
|
|
current -= 3;
|
|
if(current < -2950) {
|
|
ul.style.left = 0 +'px';
|
|
current = 0
|
|
}
|
|
ul.style.left = current + 'px'
|
|
},1)
|
|
}
|
|
|
|
var timer = startslider();
|
|
|
|
slider.onmouseover = function() {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
|
|
slider.onmouseout = function() {
|
|
timer = startslider();
|
|
}
|
|
|
|
|
|
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> |