jQuery的复习（3）

最新推荐文章于 2024-05-22 20:13:33 发布

写bug的小气球

最新推荐文章于 2024-05-22 20:13:33 发布

阅读量99

点赞数

分类专栏：自学前端 web前端自学文章标签： html jquery javascript

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103604539

版权

自学前端同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

web前端

36 篇文章 0 订阅

订阅专栏

自学

25 篇文章 0 订阅

订阅专栏

1.最终的完整轮播图（这遍复习累死了，重新写也不好写，但是可以很快知道为什么，也有一些问题，具体我都写到了代码中的注释里）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>焦点轮播图</title>
  <style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    /*让<body有20px的内边距*/
    body {
      padding: 20px;
    }

    /*最外围的div*/
    #container {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }

    /*包含所有图片的<div>*/

    #list {
      width: 4200px; /*7张图片的宽: 7*600 */
      height: 400px;
      position: absolute; /*绝对定位*/
      z-index: 1;

    }

    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }

    /*包含所有圆点按钮的<div>*/
    #pointsDiv {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }

    /*所有的圆点<span>*/

    #pointsDiv span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }

    /*第一个<span>*/

    #pointsDiv .on {
      background: orangered;
    }

    /*切换图标<a>*/

    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 180px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }

    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }

    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }

    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }

    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>
</head>

<body>

<div id="container">
  <div id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
  </div>
  <div id="pointsDiv">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>

</html>

// 功能说明:
// 1. 点击向右(左)的图标, 平滑切换到下(上)一页
// 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
// 3. 每隔2s自动滑动到下一页
// 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
// 5. 切换页面时, 下面的圆点也同步更新
// 6. 点击圆点图标切换到对应的页
$(function () {
  var $container = $('#container')
  var $list = $('#list')
  var $points = $('#pointsDiv>span')
  var $prev = $('#prev')
  var $next = $('#next')
  var PAGE_WIDTH = 600//一页宽度
  var TIME = 400 //翻页时间
  var ITEM_TIME = 20//单元移动的间隔时间
  var imgCount = $points.length
  var index = 0//当前下标
  var moving = false//表示是否正在翻页
// 1. 点击向右(左)的图标, 平滑切换到下(上)一页
  $next.click(function () {
    nextPage(true)
  })

  $prev.click(function () {
    nextPage(false)
  })

// 3. 每隔2s自动滑动到下一页
  var intervalId = setInterval(function () {
    nextPage(true)
  }, 2000)

// 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
  $container.hover(function () {
    clearInterval(intervalId)
  }, function () {
    //这里不能写成
    // var intervalId
    // 这里我理解是这样的，如果var 的话就定义了一个新值，
    // 上面clearInterval(intervalId)中的intervalId和上面3那的var intervalId形成了闭包
    // 因为这不就是引用了外部变量嘛，所以下面的不能var，它和上面的要一致，
    // 如果var了，鼠标移入时找不到需要清除的定时器啊，因为是新值，
    // 下面的定时器就会一直存在，
    // 移出去一次就加一个，移出去就加一个
    // var intervalId 不可以 ，加上去你鼠标移出去就发现了，页面不只一个定时器
    intervalId = setInterval(function () {
      nextPage(true)
    }, 3000)
  })

  // 6. 点击圆点图标切换到对应的页
  $points.click(function () {
    //计算目标页下标
    var targetIndex = $(this).index()
    if(targetIndex!=index){
      nextPage(targetIndex)//如果点自己就不动了
    }
  })

//next值true为下一页，false为上一页
  function nextPage(next) {
    // 这是为了什么了？
    //是为了我们连续点击翻页的时候，不会开启很多个定时器的问题
    //翻的过程中怎么点都不会进入函数了，只执行第一个定时器，执行完了才能继续
    //这是最后加的，先别看，最后看这
    if(moving){//首先我们设置了初始值为false，这里如果moving为true正在翻页中
      return
    }
    moving = true

    var offset = 0
    if(typeof  next === 'boolean'){
      offset = next ? -PAGE_WIDTH : PAGE_WIDTH
    }else {
      offset = -(next-index)*PAGE_WIDTH
      //会疑惑这个index的值为什么不是始终为零，
      //因为函数走了一遍，值已经修改完了，调用一次，不就变了么，
      // 这里有代码的测试！！！！
    }
    var itemOffset = offset / (TIME / ITEM_TIME)
    var currLeft = $list.position().left
    var targetLeft = currLeft + offset
    var intervalId = setInterval(function () {
      currLeft += itemOffset
      if (currLeft == targetLeft) {
        clearInterval(intervalId)
        //翻页停止
        moving = false

        // 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
        //这里有张图，配合图理解
        if (currLeft === -(imgCount + 1) * PAGE_WIDTH) {
          currLeft = -PAGE_WIDTH
        } else if (currLeft === 0) {
          currLeft = -(imgCount) * PAGE_WIDTH
        }
      }
      $list.css('left', currLeft)
    }, ITEM_TIME)
    //更新圆点，每次图动了，点也得动
    updatePoints(next)
  }
  function updatePoints(next) {
    // 5. 切换页面时, 下面的圆点也同步更新
    //总体思路
    //这里设置了圆点class的属性，到哪张就变橙色，所以我们通过移除增加class的操作就好了
    //计算出目标远点的下标
    //给目标远点添加class
    //将index更新为目标圆点（targetIndex）
    var targetIndex = 0
    if (typeof  next === 'boolean') {
      if(next){
        targetIndex = index + 1
        if (targetIndex === imgCount){
          targetIndex = 0
        }
      }else {
        targetIndex = index -1
        if (targetIndex === -1){
          targetIndex = imgCount - 1
          //这里有错误，我当时想的imgCount，但这其实是下标
          //而且注意imgCount是什么，它就是圆点的个数，不是图片！
          //也就是从0开始  0,1,2,3,4
        }
      }
    }else{
      targetIndex = next
    }

    $points.eq(index).removeClass('on')
    $points.eq(targetIndex).addClass('on')
    index = targetIndex
  }
})

这里还是前几天的问题，这里我是仿着上面写的，这里的index就在第一次赋值为0，其余调用函数的时候都变了，切记切记，不是始终为0，我总觉得函数再一次被调用的时候，它会去再把index赋值为0，然后在计算，其实是错的，只有第一次加载的时候，赋好了值，这时候调用函数，修改了值，再调用函数，跟最开始那个0毛关系都没有，一定要想清楚，切记，作用域和闭包这容易混的很乱，习惯就好，多看多做。
这里我后来有想了想，这里其实没那么复杂，不就是这个index不就在全局作用域里么？下面函数里没定义，不就还是全局变量么，然后对全局变量进行修改，对的！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script type="text/javascript">

  var index = 0
  function fun1(next) {
    console.log(index) //0 1
    fun(next)
  }
  function fun(next) {
    var targetIndex = 0
    if (next){
      targetIndex = index + 1
    }
    index = targetIndex
  }
  fun1(true)
  console.log(index+'_____') //1
  fun1(true)
  console.log(index+'_____') //2

</script>

</body>
</html>

写bug的小气球

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的复习（3）

1.最终的完整轮播图（这遍复习累死了，重新写也不好写，但是可以很快知道为什么，也有一些问题，具体我都写到了代码中的注释里）<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>焦点轮播图</title> <style type="text/...
复制链接

扫一扫

专栏目录