一、实现轮播图最主要的就是定时器 (setInterval 函数和 clearInterval 函数),他们分别是定时和清除定时。
二 、html代码如下:
<div class="warp">
<div class="mod-tab">
<ul id="list">
<li class="tab-con" style="opacity: 1">
<span class="pic">
<a href="#" style="background-image: url(image/1.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/2.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/3.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/4.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/5.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/6.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/7.jpg)"></a>
</span>
</li>
<li class="tab-con" style="opacity: 0">
<span class="pic">
<a href="#" style="background-image: url(image/8.jpg)"></a>
</span>
</li>
</ul>
<div id="gb-tab" class="gb-tab">
<a href="javascript:;" class="item2"></a>
<a href="javascript:;" class="item"></a>
<a href="javascript:;" class="item"></a>
<a href="javascript:;" class="item"></a>
<a href="javascript:;" class="item"></a>
<a href="javascript:;" class="item"></a>
<a href="javascript:;" class="item"></a>
<a href="javascript:;" class="item"></a>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
上面是用八张图实现的轮播的html图。
三、css代码如下:
.warp{
width: 100%;
}
.mod-tab{
width: 100%;
min-width: 1200px;
height: 383px;
margin: 0 auto 30px;
position: relative;
}
.gb-tab-pn{
overflow: hidden;
height: 383px;
position: relative;
}
ul{
list-style: none;
}
.tab-con{
height: 383px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.pic{
height: 383px;
width: 100%;
}
.pic a{
display: block;
width: 100%;
height: 383px;
background-position: center center;
background-repeat: no-repeat;
}
.gb-tab{
overflow: hidden;
position: absolute;
z-index: 60;
bottom: 0;
height: 40px;
width: 100%;
text-align: center;
}
.gb-tab .item{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 6px;
color: #6ff;
background-color: #003c49;
text-align: center;
line-height: 16px;
}
.item2{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 6px;
color: #6ff;
background-color: #ffffff;
text-align: center;
line-height: 16px;
}
.gb-tab a:hover{
background-color: #ffffff;
}
.on{
background-color: #ffffff;
}
.arrow{
position: absolute;
top: 171px;
z-index: 99;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
.warp:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
css代码主要是用来定位。
四、js代码如下:
var list = $('#list .tab-con'); //获取与图片相关的<li>对象
var container = $('.mod-tab'); //获取整个轮播图容器对象
var index = 1; //指当前图片对象
var timer; //定时对象
var buttons = $('#gb-tab a'); //获取图片下面的按钮对象
var prev = $('#prev'); //获取左按钮对象
var next = $('#next'); //获取右按钮对象
var stateNext = true;
var statePrev = true;
$(document).ready(function(){
container.mouseover(function(){ //用于鼠标进入轮播图区域停止轮播
stop();
});
container.mouseout(function(){ //用于鼠标离开轮播图区域开始轮播
play();
});
for (var i = 0; i < buttons.length; i++) { //循环绑定下面按钮的点击事情
(function (i) {
buttons[i].onclick = function () {
index = i + 1;
imgShow();
buttonsShow();
}
})(i)
}
prev.click(function () { //点击左按钮轮播图片事件。利用延时器解决无限点击问题。
if(statePrev){
index -= 1;
if (index < 1) {
index = 8
}
imgShow();
buttonsShow();
statePrev = false;
setTimeout(function(){
statePrev = true;
},2000)
}
});
next.click(function () {
//由于上边定时器的作用,index会一直递增下去,我们只有8个小圆点,所以需要做出判断
if(stateNext){
index += 1;
if (index > 8) {
index = 1
}
imgShow();
buttonsShow();
stateNext = false;
setTimeout(function(){
stateNext = true
},2000)
}
});
});
function play() { //开始轮播函数
//重复执行的定时器
timer = setInterval(function () {
index += 1;
if (index > 8) {
index = 1
}
imgShow();
buttonsShow();
}, 4000)
}
function stop() { //停止轮播函数
clearInterval(timer);
}
function imgShow(){ //图片显示函数
for (var i = 0; i < list.length; i++) {
if (list.eq(i).css('opacity') == 1) {
list.eq(i).fadeTo(1000,0);
}
}
list.eq(index - 1).fadeTo(1000,1);
}
function buttonsShow() { 图片下面按钮的显示函数。
//将之前的小圆点的样式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "item2") {
buttons[i].className = "item";
}
}
buttons[index - 1].className = "item2";
}
play();
五、总结
在html ,css 已经写好的情况下。最主要的就是js的功能问题了。轮播图的功能步骤如下:
1.先让图片轮播起来。基本就是写一个 play函数里面加定时器,每次使图片的index对象加一,当index大于最大值时,设置index等于第 一张图片.这样轮播图就动起来了。
轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。
图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。
左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示,实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示,实现原理就是使 index 对象加一。
对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。
当鼠标放在轮播图区域时停止轮播,实现原理就是清除定时器,离开开始轮播就是加上定时器。