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 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 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
一次编写,随处运行
2006/10/09 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP计数器的实现代码
2013/06/08 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php使用PDO方法详解
2014/12/27 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
用python实现对比两张图片的不同
2018/02/05 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
对Python 语音识别框架详解
2018/12/24 Python
django正续或者倒序查库实例
2020/05/19 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
寒假思想汇报
2014/01/10 职场文书
公积金转移接收函
2014/01/11 职场文书
大学生创业策划书
2014/02/02 职场文书
廉洁使者实施方案
2014/03/29 职场文书
电台编导求职信
2014/05/06 职场文书
酒店开业策划方案
2014/06/02 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
中学图书馆工作总结
2015/08/11 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android