基于JavaScript实现轮播图代码


Posted in Javascript onJuly 14, 2016

一、要点:

1.页面加载时,图片重合,叠在一起[绝对定位];

2.第一张显示,其它隐藏;

3.设置下标,给下标设置颜色让它随图片移动;

4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播;

基于JavaScript实现轮播图代码

二、实现代码:

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实现轮播图代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
取选中的radio的值
Jan 11 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
js轮播图代码分享
Jul 14 #Javascript
jQuery中deferred对象使用方法详解
Jul 14 #Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 #Javascript
基于jQuery的ajax方法封装
Jul 14 #Javascript
由浅入深剖析Angular表单验证
Jul 14 #Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 #Javascript
js css+html实现简单的日历
Jul 14 #Javascript
You might like
php调用Google translate_tts api实现代码
2013/08/07 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
彻底理解Python中的yield关键字
2019/04/01 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
医药营销专业个人自荐信
2013/09/29 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
工程监理应届生求职信
2013/11/09 职场文书
体育教师自荐信范文
2013/12/16 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
女生抽烟检讨书
2014/10/05 职场文书
优秀教师个人总结
2015/02/11 职场文书
六一儿童节致辞
2015/07/31 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android