您的位置：首页 > Web前端 > JavaScript
利用原生js实现轮播图效果

2017-03-21 16:37 771 查看
这里需要用到定时器动画来实现, animate.js代码见定时器动画一文;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js原生轮播图</title>
<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;
}

#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>
</head>
<body>

<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>

<script src="../animate.js"></script>
<script>

//    获取对象
var box = document.querySelector('#box');
var screen = box.children[0];
var arr = document.querySelector('#arr');
var arrLeft = document.querySelector('#left');
var arrRight = document.querySelector('#right');
var ul = screen.children[0];
var ulLis = ul.children;
var ol = screen.children[1];
var imgWidth = screen.offsetWidth;

//    动态生成小方块
for (var i = 0; i < ulLis.length; i++) {
var li = document.createElement('li');
li.innerHTML = i + 1;
ol.appendChild(li);
}

//        添加假图片
var cloneLi = ulLis[0].cloneNode(true);
ul.appendChild(cloneLi);

var olLis = ol.children;
olLis[0].className = 'current';

//    鼠标经过显示箭头
box.addEventListener('mouseover', function () {
arr.style.display = 'block';
});
//    鼠标离开隐藏箭头
box.addEventListener('mouseout', function () {
arr.style.display = 'none';
});

//    点击小方块切换轮播图
for (var i = 0; i < olLis.length; i++) {
olLis[i].index = i;
olLis[i].addEventListener('click', function () {
//            排它
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
this.className = 'current';

//            让轮播图跟随小方块
var target = -this.index * imgWidth;
animate(ul, target);
});
}

//    记录当前图片
var pic = 0;
//    记录当前小方块
var square = 0;

//    点击左箭头
arrLeft.addEventListener('click', function () {

if (pic === ulLis.length - 1) {
pic = 0;
ul.style.left = '0px';
}

pic++;
var target = -pic * imgWidth;
animate(ul, target);

square--;
if (square == -1) {
square = olLis.length - 1;
}
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = "current";

});

//    右箭头点击事件
arrRight.addEventListener('click', function () {
if (pic === 0) {
pic = ulLis.length - 1;
ul.style.left = -pic * imgWidth + 'px';
}

pic--;
var target = -pic * imgWidth;
animate(ul, target);

square++;
if (square === olLis.length) {
square = 0;
}

for (var i = 0; i < olLis.length; i++) {
olLis[i].className = "";
}
olLis[square].className = 'current';

});

//    自动播放
timer = setInterval(function () {
arrLeft.click();
}, 3000);

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航