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 各种浏览器下获得日期区别
Dec 22 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
悬浮数字的实现案例
Feb 19 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
原生js编写焦点图效果
Dec 08 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
js实现网页随机验证码
Oct 19 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python File readlines() 使用方法
2018/03/19 Python
python调用百度语音识别api
2018/08/30 Python
Python文件读写常见用法总结
2019/02/22 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
建筑人员岗位职责
2013/12/25 职场文书
英语演讲稿范文
2014/01/03 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
档案信息化建设方案
2014/05/16 职场文书
法律专业求职信
2014/05/24 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers