一。实现轮播图最主要的就是定时器 (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等于第 一张图片.这样轮播图就动起来了。
2. 轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。
3. 图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。
4. 左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示,实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示,实现原理就是使 index 对象加一。
5. 对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。
6. 当鼠标放在轮播图区域时停止轮播,实现原理就是清除定时器,离开开始轮播就是加上定时器。
代码所在地:https://git.oschina.net/huangzuomin/lunbotu.git
分享到:
相关推荐
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
主要介绍了微信小程序 轮播图实现原理及优化详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
实现自动轮播,点击索引切换图片,点击左右按钮实现切换图片
利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换. 声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片. 在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中...
使用jquery实现轮播图效果,轮播图原理:通过改变left的px大小实现左右滑动
本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了。 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告、图片信息展示,那我们就用ViewPager来实现,...
彻底理解图片滑动的原理,绝对值得收藏的文档!里面有屏幕尺子软件,边学边量边用
使用javascript利用定时器,以及函数封装原理,实现网站轮播图效果。简单的原生js实现轮播图效果,使用时请自行将代码分离
可以直接拿出来使用,已经实现了网络图片加载和图片的优化,点击事件。可根据自身要求更改代码。
JavaScript Dom实现轮播图原理和实例 想要制作一个轮播图我们要先弄清楚他的原理,如何能让图片自右向左滑动? 让我们想一想生活中有没有类似的东西,比如电影胶片。 我们可以创建一个块作为投影区,创建一个列表...
介绍了网页中基于JavaScript轮播图的实现过程,主要通过对JavaScript的缓冲运动函数的封装,实现了能够改变图片透明度的轮播图效果,详细介绍了缓冲运动的原理及实现过程中应注意的事项。
原生JS实现无缝滚动轮播图,使用相对定位进行无缝滚动,五张图的轮播只需五张图
主要介绍了js图片轮播效果实现原理,帮助大家更好地实现图片轮播效果,真正理解图片轮播原理,感兴趣的朋友可以参考下
网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式: div+css代码 <!DOCTYPE html> <html> <head> <...
图片自动切换实现原理:使用一个div并设置溢出隐藏来只显示一次一张图片,同时设置另一个div(总图片div),尺寸为所有图片横排的总尺寸宽高,作为动画顺序播放,然后使用css3动画,通过对div(总图片div)进行位移...
轮播图的原理 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过定时器实现自动播放。 Html布局 首先父容器banner存放所有内容,子容器img-list存放图片。子容器list存放按钮小圆点。圆点...
轮播图可以手工切换到指定页面 实现无缝轮播,最后一张播完后,自动切换到第一张 用户可以配置轮播图的起始播放页和每页的播放时间 用户鼠标进入播放区域,播放暂停 用户鼠标离开播放区域,播放开始