基于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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
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&amp;&amp;mysql)一
2006/10/09 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
vue引入静态js文件的方法
2020/06/20 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python星号*与**用法分析
2018/02/02 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
SQL Server面试题
2013/04/04 面试题
医学院四年学习生活的自我评价
2013/11/06 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
电教室标语
2014/06/20 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
黄河绝恋观后感
2015/06/08 职场文书