html
<div class="top">
<ul id="imgList">
<!-- <li class="lunbo_img01"><img src="/images/19.jpg" alt=""></li>
<li class="lunbo_img02"><img src="/images/3a.png" alt=""></li>
<li class="lunbo_img03"><img src="/images/hist_img.jpg" alt=""></li> -->
<li class="lunbo_img01" index="1"></li>
<li class="lunbo_img02" index="2"></li>
<li class="lunbo_img03" index="3"></li>
</ul>
<div id="navId" class="pointer">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="#" rel="external nofollow" rel="external nofollow" class="arrow01 icon-arrow-right">></a>
<a href="#" rel="external nofollow" rel="external nofollow" class="arrow01 icon-arrow-left"><</a>
</div>
css
.top {
width: 100%;
height: 588px;
position: relative;
overflow: hidden;
}
#imgList {
position: absolute;
width: 7137px;
}
top #imgList li {
float: left;
width: 2379px;
height: 580px;
list-style: none;
}
.top .lunbo_img01 {
background: url("/images/19.jpg") no-repeat center;
background-size: cover;
}
.top .lunbo_img02 {
background: url("/images/hist_img.jpg") no-repeat center;
background-size: cover;
}
.top .lunbo_img03 {
background: url("/images/3a.png") no-repeat center;
background-size: cover;
}
.pointer {
position: absolute;
width: 436px;
bottom: 30px;
left: 1000px;
}
.arrow01 {
position: absolute;
text-decoration: none;
width: 40px;
height: 40px;
background: #727d8f;
color: #fff;
font-weight: bold;
line-height: 40px;
text-align: center;
top: 180px;
}
.icon-arrow-left {
left: 0;
}
.icon-arrow-right {
right: 0;
}
js
$(function() {
// 轮播图
var imgCount = 3; //图片个数
var index = 1; //图片序号
var intervalId; //定时器
var buttonSpan = $('.pointer').children(); //集合(小圆点)
var _index; //小圆点的索引
//自动轮播功能,使用定时器
autoNextPage();
function autoNextPage() {
intervalId = setInterval(function() {
nextPage(true);
play();
}, 3000);
}
//轮播主要逻辑
function nextPage(next) {
var targetLeft = 0;
//当前的原点去掉on样式
$(buttonSpan[index - 1]).removeClass('on');
if (next) { //往后走
if (index == 3) { //到最后一张,直接跳到第一张
targetLeft = 0;
index = 1;
console.log("bbbb");
} else {
index++;
console.log("后");
targetLeft = -2379 * (index - 1);
}
console.log(buttonSpan.attr("index"));
// play();
} else { //往前走
if (index == 1) { //在第一张,直接跳到第三张(前一张)
index = 3;
targetLeft = -2379 * (imgCount - 1);
console.log("qian");
} else {
index--;
targetLeft = -2379 * (index - 1);
console.log("lalal");
}
play();
}
//改变图片容器的位置
$('#imgList').animate({ left: targetLeft + 'px' });
//更新后的原点加上样式
$(buttonSpan[index - 1]).addClass('on');
}
//当鼠标移入,停止轮播
$('.top').mouseover(
function() {
console.log('停止了!');
clearInterval(intervalId);
});
//当鼠标移出,开始轮播
$('.top').mouseout(
function() {
console.log('开始了!');
autoNextPage();
});
//单击哪一个小圆点,就跳到哪一张 //事件委托
clickButtons();
// buttonSpan[index - 1].click(function() {
// targetLeft = -2379 * (index - 1);
// });
function clickButtons() {
var length = buttonSpan.length;
for (var i = 0; i < length; i++) {
buttonSpan[i].onclick = function() {
$(buttonSpan[index - 1]).removeClass('on');
if ($(this).attr('index') == 1) {
index = 3;
} else {
index = $(this).attr('index') - 1;
}
nextPage(true);
}
}
}
function play() {
//改变little dot的样式
$('.pointer').children('span').eq(_index).addClass("on").siblings().removeClass("on");
$('#imgList').children('li').eq(_index).fadeIn().siblings().fadeOut(); //淡入淡出
}
//点击下一页、上一页的功能
$('.icon-arrow-left').click(function() {
nextPage(false);
});
$('.icon-arrow-right').click(function() {
nextPage(true);
});
});
实现思路:
参考:https://www.jb51.net/article/145772.htm
\