html部分:
<div class ="wrapper">
<ul class="sliderPage">
<li>
<img src ="./image/1.png">
</li>
<li>
<img src ="./image/2.png">
</li>
<li>
<img src ="./image/3.jpg">
</li>
<li>
<img src ="./image/4.jpg">
</li>
<li>
<img src ="./image/1.png">
</li>
</ul>
<!-- 左右两侧按钮 -->
<div class="btn btnLeft"><</div>
<div class="btn btnRight">></div>
<!-- 轮播按钮 -->
<div class="sliderIndex">
<span class = "active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
css部分:
*{
padding:0;
margin:0;
list-style:none;
}
.wrapper{
position: relative;
margin:100px auto;
width:400px;
height:250px;
overflow: hidden;
}
.wrapper .sliderPage{
position: absolute;
top:0;
left:0;
width:2000px;
height:250px;
}
.wrapper .sliderPage li{
width:400px;
height:250px;
float:left;
}
.wrapper .sliderPage li img{
width:400px;
height:250px;
}
.wrapper .btn{
position: absolute;
top:50%;
margin-top:-20px;
width:40px;
height:40px;
color:#fff;
background:#000;
text-align:center;
line-height:40px;
opacity:0.1;
cursor: pointer;
}
.wrapper:hover .btn{
opacity:0.3;
}
.wrapper .btn:hover{
opacity:0.7;
}
.wrapper .btnLeft{
left:5px;
}
.wrapper .btnRight{
right:5px;
}
.wrapper .sliderIndex{
position: absolute;
width:100%;
bottom:15px;
text-align:center;
}
.wrapper .sliderIndex span{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background: #ccc;
margin:0 5px;
cursor: pointer;
}
.wrapper .sliderIndex span.active{
background:#f40;
}
js部分:
<script>
var wrapper = document.querySelector('.wrapper');
(function(demo){
var timer = null,
sliderPage = demo.querySelector('.sliderPage'), //存储轮播图的ul
sliderChidren = sliderPage.children, //ul下的子标签集
moveWidth = sliderChidren[0].clientWidth, //轮播图的宽度
num = sliderChidren.length-1, //有多少个li就知道有多少个图片在进行轮播
btnLeft = demo.querySelector('.btnLeft'), //轮播图左侧按钮
btnRight = demo.querySelector('.btnRight'),// 轮播图右侧按钮
oSpanArray = demo.querySelector('.sliderIndex').querySelectorAll('span'),
isLock = true,
index = 0;
//轮播图自动轮播
//timer = setInterval(autoMove,1500);
timer = setTimeout(autoMove,1500);
//点击轮播图左侧按钮
btnLeft.onclick = function(){
autoMove('left->right')
}
//点击轮播图右侧按钮
btnRight.onclick = function(){
autoMove('right->left')
}
for(var i = 0;i<oSpanArray.length;i++){
(function(j){
oSpanArray[j].onclick = function(){
isLock = false;
clearTimeout(timer)
index = j;
startMove(sliderPage,{left:- index * moveWidth},function(){
isLock = true;
timer = setTimeout(autoMove,1500);
changeIndex(index)
})
}
}(i))
}
function autoMove(direction){
//direction 轮播方向
/*
默认轮播方向是 “left -> right” / undefined
点击左侧left按钮 轮播方向 ‘right -> left’
在自动轮播的时候未传递参数,其值为undefined
*/
clearTimeout(timer)
if(isLock){
isLock = false;
if(!direction || direction == 'left->right'){
index ++;
startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
if(sliderPage.offsetLeft == - num * moveWidth){
index = 0;
sliderPage.style.left = "0px";
}
timer = setTimeout(autoMove,1500);
isLock = true;
changeIndex(index)
})
}else if(direction == "right->left"){
if(sliderPage.offsetLeft == 0){
index = num;
sliderPage.style.left = - num *moveWidth + 'px';
}
index --;
startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},function(){
isLock = true;
timer = setTimeout(autoMove,1500);
changeIndex(index)
})
}
}
}
function changeIndex(_index){
for(var i = 0;i<oSpanArray.length;i++){
oSpanArray[i].className = '';
}
oSpanArray[_index].className = "active";
}
}(wrapper))
//demo的运动
function startMove(demo, json, callback) {
clearInterval(demo.timer);
var speed, cur;
demo.timer = setInterval(function () {
var bStop = true;
for (var prop in json) {
if (prop == 'opacity') {
cur = parseFloat(getStyle(demo, 'opacity')) * 10;
} else {
cur = parseInt(getStyle(demo, prop));
}
speed = (json[prop] - cur) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (prop == 'opacity') {
demo.style.opacity = (cur + speed) / 10;
} else {
demo.style[prop] = cur + speed + 'px';
}
if (json[prop] !== cur) {
bStop = false;
}
}
if (bStop) {
clearInterval(demo.timer);
typeof callback == 'function' ? callback() : '';
}
}, 30)
}
//解决获取样式的兼容问题
function getStyle(obj, attr) {
if (obj.currentStyle) { //IE6以下
return obj.currentStyle[attr]
} else {
return window.getComputedStyle(obj, null)[attr]
}
}
</script>