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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
JavaScript实现计数器基础方法
Oct 10 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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结合表单实现一些简单功能的例子
2011/06/04 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
python获取外网ip地址的方法总结
2015/07/02 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
解决python 输出是省略号的问题
2018/04/19 Python
详解Python sys.argv使用方法
2019/05/10 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Python类的继承super相关原理解析
2020/10/22 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
数据库面试要点基本概念
2013/10/31 面试题
应聘教师自荐信
2013/10/12 职场文书
女方回门宴答谢词
2014/01/14 职场文书
投标担保书范文
2014/04/02 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
MySQL 数据类型详情
2021/11/11 MySQL
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers