CSS样式:
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
盒子布置:
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="wf1.jpg" width="500" height="200" /></li>
<li><img src="wf2.jpg" width="500" height="200" /></li>
<li><img src="wf3.jpg" width="500" height="200" /></li>
<li><img src="wf4.jpg" width="500" height="200" /></li>
<li><img src="wf5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
封装一个具有滑动效果的函数:
var timerId = null
function animate(el, target) {
if (el.timerId) {
clearInterval(el.timerId)
el.timerId = null
}
el.timerId = setInterval(function () {
var step = 10
var current = el.offsetLeft;
if (current > target) {
step = -Math.abs(step);
}
current += step;
el.style.left = current + 'px';
if (Math.abs(current - target) <= Math.abs(step)) {
clearInterval(el.timerId)
el.style.left = target + 'px';
return;
}
}, 5)
}
引入封装好的滑动效果:
<script src="animate.js"></script>
js部分代码
<script>
//获取元素
var box = document.getElementById('box')
var screen = box.children[0]
var arr = box.children[1]
var ul = screen.children[0]
var lis = ul.getElementsByTagName('li')
var ol = screen.children[1]
var arr_left = document.getElementById('left')
var arr_right = document.getElementById('right')
//图片的宽度
var img_width = screen.offsetWidth
var timerId = null
//动态创建ol下面的li
for(var i = 0;i<lis.length;i++){
var li = document.createElement('li')
li.innerText = i + 1
li.setAttribute('index',i)
ol.appendChild(li)
if(i == 0){
li.className ='current'
}
//给每一个li注册事件,让图片滚动
li.onclick = Liclick
}
//封装li的点击事件
function Liclick(){
//排他,让所有的li取消高亮,当前的li高亮显示
for(var i = 0;i<ol.children.length;i++){
ol.children[i].className = ''
}
var li_index = parseInt(this.getAttribute('index'))
index = li_index
this.className = 'current'
animate(ul, -li_index * img_width)
}
//经过大盒子让两个箭头显示,离开后箭头隐藏
box.onmouseenter = function(){
arr.style.display = 'block'
clearInterval(timerId)
}
box.onmouseleave = function(){
arr.style.display = 'none'
timerId = setInterval(function(){
arr_right.click()
},1000)
}
//给右箭头注册点击事件让图片滚动
var index = 0
arr_right.onclick = function(){
if(index == lis.length-1 ){
index = 0
ul.style.left = '0px'
}
index++
if(index < lis.length-1 ){
ol.children[index].click()
}
else{
//为了看到克隆的那张图片,但是让第一个li高亮显示
animate(ul,-index*img_width)
for(var i = 0;i<ol.children.length;i++){
ol.children[i].className = ''
}
ol.children[0].className = 'current'
}
}
arr_left.onclick = function(){
if(index == 0){
index = lis.length
ul.style.left = -index * img_width + 'px'
}
index--
ol.children[index].click()
}
//克隆第一个li
var first_li = ul.children[0]
var clone_li = first_li.cloneNode(true)
ul.appendChild(clone_li)
//5.自动轮播
var timerId = setInterval(function(){
arr_right.click()
},1000)
</script>