基于JavaScript实现轮播图代码
更新时间：2016年07月14日 17:24:48 作者：wangwangwangMax
在前端程序开发中，经常会实现js轮播图的效果，怎么实现的呢？下面小编给大家分享基于基于JavaScript实现轮播图代码 ，非常不错，感兴趣的朋友可以参考下
一、要点：
1.页面加载时，图片重合，叠在一起[绝对定位];
2.第一张显示，其它隐藏;
3.设置下标,给下标设置颜色让它随图片移动;
4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;
二、实现代码：
html代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>轮播图</title> <link href="css/LunBimg.css" rel="stylesheet" /> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/LunBimg.js"></script> </head> <body> <div id="allswapImg"> <div class="swapImg"><img src="image/1.jpg" /></div> <div class="swapImg"><img src="image/2.jpg" /></div> <div class="swapImg"><img src="image/3.jpg" /></div> <div class="swapImg"><img src="image/4.jpg" /></div> <div class="swapImg"><img src="image/5.jpg" /></div> <div class="swapImg"><img src="image/6.jpg" /></div> </div> <div class="btn btnLeft"><</div> <div class="btn btnRight">></div> <div id="tabs"> <div class="tab bg">1</div> <div class="tab">2</div> <div class="tab">3</div> <div class="tab">4</div> <div class="tab">5</div> <div class="tab">6</div> </div> </body> </html>
css代码：
* {
padding:0px;
margin:0px;
}
.swapImg {
position:absolute;
}
.btn {
position:absolute;
height:90px;
width:60px;
background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/
color:#ffffff;
text-align:center;
line-height:90px;
font-size:40px;
top:155px;/*图片高度400/2-45*/
cursor:pointer;
/*display:none;*/
}
.btnRight {
left:840px;/*图片宽度900-导航宽度60*/
}
#tabs {
position:absolute;
top:370px;
margin-left:350px;
}
.tab {
height:20px;
width:20px;
background:#05e9e2;
line-height:20px;
text-align:center;
font-size:10px;
float:left;
color:#ffffff;
margin-right:10px;
border-radius:100%;
cursor:pointer;
}
.bg {
background:#00ff21;
}
js代码：
/// <reference path="_references.js" />
var i = 0;//全局变量
//定义一个变量用来获取轮播的过程
var time;
$(function ()
{
//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏
$(".swapImg").eq(0).show().siblings().hide();
showTime();
//当鼠标放到下标上显示该图片，鼠标移走继续轮播
$(".tab").hover(
function ()
{
//获取到当前鼠标所在的下标的索引
i = $(this).index();
show();
//鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去
clearInterval(time);
}, function ()
{
showTime();
});
//要求四，当我点击左右切换
$(".btnLeft").click(function ()
{
//1.点击之前要停止轮播
clearInterval(time);
//点了之后，-1
if (i == 0)
{
i =6;
}
i--;
show();
showTime();
});
$(".btnRight").click(function () {
//1.点击之前要停止轮播
clearInterval(time);
//点了之后，-1
if (i == 5) {
i = -1;
}
i++;
show();
showTime();
});
});
function show() {
//$("#allswapImg").hover(function ()
//{
// $(".btn").show();
//}, function ()
//{
// $(".btn").hide();
//});
//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s
$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}
function showTime()
{
time = setInterval(function () {
i++;
if (i == 6) {
//只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张
i = 0;
}
show();
}, 3000);
}
以上所述是小编给大家介绍的基于JavaScript实现轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本文向大家详细展示了从C#程序员的视角学习TypeScript的过程，主要是针对这两种语言的异同进行了简单的对比学习，希望对大家能够有所帮助。2015-06-06
从数据结构的角度分析 for each in 比 for in 快的多
今天仔细琢磨了会，从数据结构的角度分析了下，觉得for in和for each in效率上有着本质的区别，无论是JS还是AS2013-07-07
这篇文章主要介绍了单行 JS 实现移动端金钱格式的输入规则,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了javascript常见数字进制转换,结合实例形式分析了JavaScript十进制,十六进制及二进制的相互转换原理与技巧,需要的朋友可以参考下2016-04-04
这篇文章主要给大家介绍了关于微信小程序实现左滑删除效果的相关资料,左滑删除效果在app的交互方式中十分流行,比如全民应用微信,文中给出了详细的实现代码,需要的朋友可以参考下2023-08-08
Proxy是JavaScript的一个内置对象，它允许您拦截并自定义对象的行为。本文将和大家简单聊聊JavaScript中Proxy对象的创建与使用，感兴趣的可以了解一下2023-03-03
这篇文章主要为大家详细介绍了原生JS实现加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
查找数据有2种方式，顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高，但是必须是已经排好序的列表元素集合2015-04-04
es6数组的flat()，flatMap()函数用法实例分析
这篇文章主要介绍了es6数组的flat()，flatMap()函数用法,结合实例形式分析了es6数组的flat()，flatMap()函数基本功能、使用方法及操作注意事项,需要的朋友可以参考下2020-04-04
最新评论