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实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue-swiper的使用教程
Aug 30 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
解决Vue项目中tff报错的问题
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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中xrange用法分析
2015/04/15 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python中super函数的用法
2017/11/17 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
大学毕业寄语大全
2014/04/10 职场文书
单位承诺书格式
2014/05/21 职场文书
单位工作证明范文
2014/09/14 职场文书
关于安全的广播稿
2014/10/23 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
小学作文之描写天气
2019/08/15 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL