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中使用css需要注意的地方小结
Sep 01 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
浅析Jquery操作select
Dec 13 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
Angular2 父子组件数据通信实例
Jun 22 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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正则表达式之定界符和原子介绍
2012/10/05 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
师范大学应届生求职信
2013/11/21 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android