js轮播图代码分享


Posted in Javascript onJuly 14, 2016

大家喜欢的js轮播图片效果,分享给大家。

一、要点:
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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
javascript运算符——位运算符全面介绍
Jul 14 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
js的一些常用方法小结
2011/06/29 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
学生自我评语大全
2014/04/18 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
绿色校园广播稿
2014/10/13 职场文书
团组织推荐意见
2015/06/05 职场文书
金砖之国观后感
2015/06/11 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
小学美术教学反思
2016/02/17 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript