jQuery呼吸轮播图制作原理详解

本文实例为大家分享了jQuery呼吸轮播图制作原理的具体过程，供大家参考，具体内容如下

轮播图：carousel
呼吸轮播图变种布局重点：所有的图片摞一起。
jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。
左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()
小圆点的防流氓的策略：立即响应新事件。stop(true)

注意：使用代码时将图片更换，以及需要引入jquery库。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  ul, ol {
   list-style: none;
  }
  #carousel {
   position: relative;
   width: 900px;
   height: 540px;
   border: 1px solid #000;
   margin: 50px auto;
  }
  /*呼吸轮播图布局关键是所有图片落在一起*/
  #carousel .imgs ul li {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   display: none;
  }
  #carousel .imgs ul li:first-child {
   display: block;
  }
  .btns a {
   position: absolute;
   width: 30px;
   height: 60px;
   top: 50%;
   margin-top: -30px;
   text-decoration: none;
   background-color: rgba(0, 0, 0, .5);
   line-height: 60px;
   text-align: center;
   font-size: 20px;
   color: #fff;
  }
  .btns a:first-child {
   left: 10px;
  }
  .btns a:last-child {
   right: 10px;
  }
  #carousel .circles {
   position: absolute;
   width: 200px;
   height: 20px;
   left: 50%;
   margin-left: -100px;
   bottom: 30px;
  }
  #carousel .circles ol {
   width: 210px;
  }
  #carousel .circles ol li {
   float: left;
   width: 20px;
   height: 20px;
   margin-right: 10px;
   background-color: blue;
   line-height: 20px;
   text-align: center;
   border-radius: 20px;
  }
  #carousel .circles ol li.cur {
   background-color: orange;
  }
 </style>
</head>
<body>
 <div id="carousel">
  <div class="imgs" id="imgs">
   <ul>
    <li><img src="images/aoyun/0.jpg" alt=""></li>
    <li><img src="images/aoyun/1.jpg" alt=""></li>
    <li><img src="images/aoyun/2.jpg" alt=""></li>
    <li><img src="images/aoyun/3.jpg" alt=""></li>
    <li><img src="images/aoyun/4.jpg" alt=""></li>
    <li><img src="images/aoyun/5.jpg" alt=""></li>
    <li><img src="images/aoyun/6.jpg" alt=""></li>
   </ul>
  </div>
  <div class="btns">
   <a href="#" id="leftBtn">&lt;</a>
   <a href="#" id="rightBtn">&gt;</a>
  </div>
  <div class="circles" id="circles">
   <ol>
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
   </ol>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
 // 获取元素
 var $leftBtn = $("#leftBtn");
 var $rightBtn = $("#rightBtn");
 var $imgs = $("#imgs ul li");
 var $circles = $("#circles ol li");
 var $carousel = $("#carousel");
 // 定义length
 var length = $imgs.length;
 // 定义信号量
 var idx = 0;

 // 开启定时器
 var timer = setInterval(change, 2000);

 // 鼠标移入停止定时器
 $carousel.mouseenter(function() {
  // 清除定时器
  clearInterval(timer);
 })

 // 鼠标离开从新开启定时器
 $carousel.mouseleave(function() {
  // 设表先关
  clearInterval(timer);
  // 重新赋值timer
  timer = setInterval(change, 2000);
 })

 // 右按钮事件
 $rightBtn.click(change);

 function change() {
  // 防流氓
  if ($imgs.is(":animated")) {
   return;
  }
  // 当前图片消失
  $imgs.eq(idx).fadeOut(600);

  // 信号量改变
  idx++;
  // 边界判定
  if (idx > length - 1) {
   idx = 0;
  }

  // 下一张图片淡入
  $imgs.eq(idx).fadeIn(600);

  // 当前小圆点要加cur
  $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
 }

 // 左按钮事件
 $leftBtn.click(function() {
  // 防流氓
  if (!$imgs.is(":animated")) {

   // 当前图片消失
   $imgs.eq(idx).fadeOut(600);

   // 信号量改变
   idx--;

   // 边界判定
   if (idx < 0) {
    idx = length - 1;
   }

   // 下一张图片淡入
   $imgs.eq(idx).fadeIn(600);

   // 当前小圆点加cur
   $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
  }
 })

 // 小圆点事件
 $circles.mouseenter(function() {
  // 当前图片消失
  $imgs.eq(idx).stop(true).fadeOut(600);

  // 改变信号量
  idx = $(this).index();

  // 下一张图片出现
  $imgs.eq(idx).stop(true).fadeIn(600);

  // 当前小圆点加cur
  $(this).addClass("cur").siblings().removeClass("cur");
 })

 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery实现轮播图特效

    本文实例为大家分享了jquery实现轮播图的具体代码,供大家参考,具体内容如下 一.实现功能: 1.通过定时实现图片自我轮播 2.当图片轮播到最后一张时,会从第一张开始继续轮播 3.点击小圈圈图标能自动切换到对应图片 4.鼠标悬浮图片上停止图片轮播,当鼠标移开图片,会继续轮播 5.鼠标悬浮图片上会显示左右键图标,鼠标离开,会隐藏左右键图标 6.点击左键图标会切换到上一张图片,当切换到第一张图片时,再次点击左键图标会切换到最后一张图片:点击右键图标会显示到下一张图片,当切换到最后一张图片时,再次点

  • 基于jQuery实现淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

  • jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(

  • jQuery自适应轮播图插件Swiper用法示例

    jQuery自适应轮播图插件Swiper用法示例

    本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • 利用jquery写的左右轮播图特效

    最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • jquery 实现轮播图详解及实例代码

    jquery 实现轮播图详解及实例代码

    轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

  • jquery实现左右无缝轮播图

    本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p

  • JQuery和html+css实现带小圆点和左右按钮的轮播图实例

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;

  • jQuery实现轮播图及其原理详解

    jQuery实现轮播图及其原理详解

    本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalabl

  • jquery实现左右滑动式轮播图

    本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><

随机推荐