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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
JS实现扫码枪扫描二维码功能
Jan 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源代码
2006/10/09 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
浅析Python requests 模块
2020/10/09 Python
如何在pycharm中安装第三方包
2020/10/27 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
软件测试面试题
2015/10/21 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
创意婚礼策划方案
2014/05/18 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
离婚纠纷代理词
2015/05/23 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python