帮写的一个简单的轮播图……
此处请自行引入jquery。上代码!!!
<style>
body{
padding: 0;
margin: 0;
overflow: hidden;
}
.array {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.array > div {
width: 10%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
}
.leftArr {
left: 0;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
background: -o-linear-gradient(right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
background: linear-gradient(to right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
}
.rightArr {
right: 0;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
}
.imageBox{
width: 100%;
height: 100%;
position: relative;
}
.array > div img {
width: 60px;
height: 60px;
cursor: pointer;
}
.vaCenter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.pointList {
position: absolute;
top: auto;
left: 0;
right: 0;
margin: auto;
height: 21px;
bottom: 24px;
text-align: center;
}
.pointList>div {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #3d786c;
margin-right: 6px;
}
.focusActive {
background: #79bbae !important;
}
<div class="imageBox">
<img src="img/img1.jpg" id="images" index="0" alt=""/>
<div class="array">
<div class="leftArr">
<img onclick="next(this)" data="left" class="vaCenter" src="img/leftArr.png" alt="">
</div>
<div class="rightArr">
<img onclick="next(this)" data="right" class="vaCenter" src="img/rightArr.png" alt="">
</div>
</div>
<div class="pointList"></div>
</div>
//urlList 数组 将所有图片的路径写入
//list 字符串 第一个圆点添加focus的样式
var urlList=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg','img/img6.jpg','img/img7.jpg'],list='<div class="focusActive"></div>';
for (var i = 0; i < urlList.length - 1; i++) {
list += '<div></div>';
}
$('.pointList').html(list);//将所有的圆点都添加到容器里面
function next(e) {//点击上/下一张
window.clearInterval(set);//点击滚动轮播时清除计时器
var _ths = $(e),
data = _ths.attr('data'),//查看此事件发生在左点击还是右点击
_index = $('.imageBox #images').attr('index'),//当前显示的图片是在数组中的第几张
len = urlList.length,//轮播图片的总量
_idx = 0;
if (data == 'left') {
var ix = 0;
if (_index != 0) {
ix = parseInt(_index) - 1;
_idx = ix + 1;
} else {
ix = len - 1;
_idx = len;
}
$('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
$('.pointList>div').removeClass('focusActive');
$('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
} else {
var ix = 0;
if (parseInt(_index) + 1 != len) {
ix = parseInt(_index) + 1;
_idx = ix + 1;
} else {
ix = 0;
_idx = 1;
}
$('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
$('.pointList>div').removeClass('focusActive');
$('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
}
set=window.setInterval(function(){//点击轮播结束,启动计时器
autoScroll()
},4000);
}
$(".imageBox>div").on({
mouseover : function(){
clearInterval(set);//鼠标移到图片上关闭自动轮播
} ,
mouseout : function(){
set=window.setInterval(function(){
autoScroll()
},4000);//鼠标移出图片区域重新启动自动轮播
}
}) ;
function autoScroll(){//自动轮播
//_index:每张图片链接在
var _index = $('.imageBox #images').attr('index'),
len = urlList.length,
_idx = 0;
var ix = 0;
if (parseInt(_index) + 1 != len) {
ix = parseInt(_index) + 1;
_idx = ix + 1;
} else {
ix = 0;
_idx = 1;
}
$('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
$('.pointList>div').removeClass('focusActive');
$('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
}
var set=window.setInterval(function(){//自动执行计时器
autoScroll()
},4000);
完了……没了……