文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯