<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人人面试</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#slide {
width: 960px;
height: 160px;
position: relative;
margin: 80px auto;
border: 1px solid #ccc;
}
#slide .content {
width: 960px;
height: 160px;
overflow: hidden;
position: relative;
}
#slide ul{
position: absolute;
transition:all 0.2s ease-in;
}
#slide li {
list-style: none;
float: left;
width: 140px;
height: 140px;
margin: 10px;
background: #c1c1c1;
}
#slide .next,
#slide .prev {
position: absolute;
width: 40px;
height: 28px;
top:50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3)
}
#slide .next {
right: -40px;
}
#slide .prev {
left: -40px;
}
</style>
</head>
<body>
<div id="slide">
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<sapn class="next" id="next" >></sapn>
<span class="prev" id="prev" ><</span>
</div>
<script type="text/javascript">
let obj = document.getElementById('slide');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let ul = obj.getElementsByTagName('ul')[0];
let liArr = obj.getElementsByTagName('li');
let li_width = liArr[0].offsetWidth + 20;//160
let li_length = liArr.length;//10
let show_length = 6;
let index = 0;
function slide(){
ul.style.width = li_width * li_length + 'px';
}
slide();
function animation(){
if(index <= 0){
prev.style.cursor = 'default';
next.style.cursor = 'pointer';
index = 0;
}else if(index >= 4){
prev.style.cursor = 'pointer';
next.style.cursor = 'default';
index =4;
}
var goal = li_width * -index;
ul.style.left = goal + 'px';
}
obj.onmousewheel = function(e){
var d = parseInt(e.wheelDelta)> 0 ? 1:-1;
index += 1*d;
animation();
}
next.onclick = function(){
prev.style.cursor = 'pointer';
index += 1;
animation();
}
prev.onclick = function(){
next.style.cursor = 'pointer';
index -= 1;
animation();
}
</script>
</body>
</html>
1712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
