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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
js实现随机点名程序
Sep 17 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
TS 类型兼容教程示例详解
Sep 23 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 特殊字符处理函数
2008/09/05 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
前端性能优化及技巧
2016/05/06 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python打开音乐文件的实例方法
2020/07/21 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
英国假发网站:Hothair
2018/02/23 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
个人原因辞职信模板
2015/05/13 职场文书
在职证明书模板
2015/06/15 职场文书
Python使用永中文档转换服务
2022/05/06 Python