jQuery轮播图

最新推荐文章于 2024-01-09 17:07:13 发布

weixin_44552543

最新推荐文章于 2024-01-09 17:07:13 发布

阅读量101

点赞数 1

本文链接：https://blog.csdn.net/weixin_44552543/article/details/96313213

版权

$(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

  $next.click(function () {
    nextPage(true)
  })
  $prev.click(function () {
    nextPage(false)
  })
  //每隔3s自动换到下一页
  var intervalId = setInterval(function () {
    nextPage(true)
  }, 3000)

  //当鼠标进入时自动切换停止，离开时自动开启
  $container.hover(function () {
    //清除定时器
    clearInterval(intervalId)
  }, function () {
    intervalId = setInterval(function () {
      nextPage(true)
    }, 3000)

  })
  // 点击圆点图标切换页面
  $points.click(function () {
    var targetIndex = $(this).index()
    if (targetIndex != index) {
      nextPage(targetIndex)
    }

  })

  //翻页true下 false上
  function nextPage (next) {
    /*
    * 总的偏移量offset
    * 总的时间TIME=400
    * 单元移动间隔时间ITEM_TIME=20
    * 单元移动偏移量：itemoffset=offset/(TIME/ITEM_TIME)
    * */

    //如果正在翻页，直接结束
    if (moving){
      return
    }
    moving=true
    var offset = 0
    //计算offset
    //判断是否为布尔值
    if (typeof next === 'boolean') {
      offset = next ? -PAGE_WIDTH : PAGE_WIDTH
    } else {
      offset = -(next - index) * PAGE_WIDTH
    }

    //计算单元移动的偏移量：itemOffset
    var itemOffset = offset / (TIME / ITEM_TIME)
    //得到当前left的值
    var currLeft = $list.position().left
    //计算出目标出的letf值
    var targetLeft = currLeft + offset
    //启动循环定时器
    var intervalId = setInterval(function () {
      currLeft += itemOffset

      if (currLeft === targetLeft) {
        clearInterval(intervalId)

        //  标示翻页停止
        moving=false

        //如果到达了最右边的图片 （1.jpg）跳转到最左边
        if (currLeft === -(imgCount + 1) * PAGE_WIDTH) {
          currLeft = -PAGE_WIDTH
        } else if (currLeft === 0) {
          //如果到达了最左边的图片 （5.jpg）跳转到最右边
          currLeft = -imgCount * PAGE_WIDTH
        }

      }
      //计算出最新的currLeft
      $list.css('left', currLeft)
    }, ITEM_TIME)

    //更新圆点
    updatePoints(next)

  }

  function updatePoints (next) {
    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
        }
      }
    } else {
      targetIndex = next
    }

    //给目标添加"on"class和删除之前的
    $points.eq(index).removeClass('on')
    $points.eq(targetIndex).addClass('on')
    //更新
    index = targetIndex
  }

})

html

<!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.8.3.min.js"></script>
<script type="text/javascript" src="app1.js"></script>
</body>

</html>

weixin_44552543

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery轮播图

$(function () { //实现按钮平滑切换 var $container = $('#container') var $list = $('#list') var $points = $('#pointsDiv>span') var $prev = $('#prev') var $next = $('#next') var PAGE_WIDTH = 60...
复制链接

扫一扫