简单实现轮播图效果的实例


Posted in Javascript onJuly 15, 2016

一、要点:

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 自定义动画概述及示例
Mar 29 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 #Javascript
JavaScript计算器网页版实现代码分享
Jul 15 #Javascript
js实现楼层效果的简单实例
Jul 15 #Javascript
基于JavaScript实现轮播图代码
Jul 14 #Javascript
js轮播图代码分享
Jul 14 #Javascript
jQuery中deferred对象使用方法详解
Jul 14 #Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 #Javascript
You might like
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript 特殊字符串
2009/02/25 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
先进个人事迹材料
2014/01/25 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
生日庆典策划方案
2014/06/02 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
植树节新闻稿
2015/07/17 职场文书
Redis实现一个账号只能登录一个设备
2022/04/19 Redis