jquery 轮播图

<!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 src="./js/jquery.1.10.2.js"></script>
  <script type="text/javascript">
    /*
     功能说明:
       1. 点击向右(左)的图标, 平滑切换到下(上)一页
       2. 无限循环切换
       3. 每隔3s自动滑动到下一页
       4. 鼠标进入停止自动翻页, 移出开启自动翻页
       5. 切换页面时, 下面的圆点也同步更新
       6. 点击圆点图标切换到对应的页
     */
     
//      显示区域容器
var $container = $('#container');     
//      图片容器 
var $list = $('#list')
//      小圆点 
var $point = $('#pointsDiv span') 

//      左右按钮 
var $prev = $('#prev');
var $next = $('#next');
//      动画总时长 
var time = 3000
//      每一帧的动画时长 
var itemTime = 30
//      图片宽度 
const PAGE_WIDTH = 600;
//      获取小圆点个数 
var img_num = $point.length;
//      定义标识变量  用于记录index 
var oldIndex = 0;
//      定义标识变量 用于记录动画是否还在执行中 
var isMove = false;
// 上一页
$prev.click(function(){
    nextPage(false);
});

// 下一页
$next.click(function(){
    nextPage(true);
});

// 点击小圆点翻页
$point.click(function(){
  nextPage($(this).index())
})

// 自动翻页轮播
var autoTimer = setInterval(function(){
  nextPage(true);
},3000);

// 移入 取消自动轮播 移除继续轮播
$container.hover(function(){
  clearInterval(autoTimer);
},function(){
  autoTimer=setInterval(() => {
    nextPage(true);
  }, 3000);
})

// 切换的方法
function nextPage(next){
  if(isMove){
    return 
  }
  isMove = true;
  var offset;
  // 判断形参的类型
  if(typeof next == 'boolean'){
    // 总偏移量
    offset = next ? - PAGE_WIDTH : PAGE_WIDTH;
  }else{
    offset = -(next - oldIndex) * PAGE_WIDTH
  }
 
  // 动画总时长 / 每帧时长 = 总帧数  总偏移量/总帧数 = 每帧偏移量
  // 每帧偏移量
  var itemOffset =  offset / (time/itemTime)
  // 获取当前list 的left 值
  var left = $list.position().left;
  // 目的地left值
  var targetLeft = left + offset;
  var timer = setInterval(function(){
    left += itemOffset; 
    // 判断是否翻完了一页
    if(left == targetLeft){
      clearInterval(timer);
      // 无限滚动 原理
      // 在每一次图片动画执行完成时 判断是否需要修正位置
      if(left == 0){
        left = -(img_num * PAGE_WIDTH);
      }else if (left == -(img_num) * PAGE_WIDTH){
        left = - PAGE_WIDTH;
      }

      isMove = false;
    }

    $list.css('left',left);
  }, itemTime);

  upDate(next);
}

// 更新小圆点
function upDate(next){
  var index;
  // 判断形参的类型
  if(typeof next == 'boolean'){
    // 计算当前应该显示的小圆点的下标
    index = next ? oldIndex+ 1 : oldIndex-1;
  }else{
    index = next;
  }
  // 小圆点边界值判断
  if(index > img_num -1 ){
    index = 0;
  }else if( index < 0){
    index = img_num - 1;
  }

  $point[oldIndex].className='';
  $point[index].className = 'on';
  // 更新下标
  oldIndex = index;
}


  </script>
</body>

</html>
posted @ 2020-08-09 16:02  13522679763-任国强  阅读(116)  评论(0)    收藏  举报