轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

蒲厷渶之戀

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量457

点赞数 1

分类专栏： JS Jquery 文章标签： javascript 轮播图 css html web

本文链接：https://blog.csdn.net/lvkelly/article/details/54136888

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Jquery

5 篇文章 0 订阅

订阅专栏

在做项目的过程中，经常会用到轮播图，轮播图的实现主要通过“平移量”来实现。简单总结一下：

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="shufflingFigure.css"/>
    </head>
    <body>
        <div class="wheelwrap">
            <ul class="wheelul">
                <li class="first">1</li>
                <li class="second">2</li>
                <li class="third">3</li>
            </ul>
            <ul class="nav">
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="last">&lt;</div>
            <div class="next">&gt;</div>
        </div>
    </body>
    <script src="shufflingFigure.js" type="text/javascript" charset="utf-8"></script>
</html>

CSS代码：

*{margin: 0;padding: 0;}
.wheelwrap{height: 300px;margin:200px auto 0;overflow: hidden;position: relative;width: 800px;}
.wheelul{height:300px;position: absolute;left: 0;list-style:none;top:0;width: 3200px;}
.wheelul li{color:#fff;float: left;font-size:50px;font-weight:bold;height:300px;line-height: 300px;text-align: center;width:800px;}
.wheelul .first{background-color:deepskyblue;}
.wheelul .second{background-color:pink;}
.wheelul .third{background-color:green;}
.nav {bottom:0;left:0;list-style:none;position: absolute;width: 100%;}
.nav li{background-color:#ccc;border-radius:5px;cursor:pointer;float:left;height: 10px;width:33.3%;}
.wheelon{background-color: #ff6c00;}
.last,.next{
    background: rgba(0, 0, 0, 0.2);
    border-radius:5px;
    bottom: 40%;
    color:#fff;
    cursor:pointer;
    display: none;
    font-size: 20px;
    height:30px;
    line-height:30px;
    position: absolute;
    text-align: center;
    width:30px;
}
.last{left: 5%;}
.next{right: 5%;}

JS代码：

$(function ($) {
  //*********************轮播图*********************
  const clone = $(".wheelul li").first().clone();
  $(".wheelul").append(clone);
  const clientWidth = $('.wheelwrap').width();
  const wheelLength = $('.wheelul li').size();
  let wheelIndex = 0;
  $('.nav li').eq(wheelIndex).css('background-color', '#ff6c00');
  $('.next').on('click', function () {
    moveRight();
  });
  $('.last').on('click', function () {
    moveLeft();
  });
  //************定时器滚动***************
  let moveTimer = setInterval(function () {
    moveRight();
  }, 3000);
  $('.wheelwrap').hover(function () {
    $(".next").show();
    $(".last").show();
    clearInterval(moveTimer);
  }, function () {
    $(".next").hide();
    $(".last").hide();
    moveTimer = setInterval(function () {
      moveRight();
    }, 3000);
  });
  //************图片向右滚动**************
  function moveRight () {
    wheelIndex++;
    if (wheelIndex == wheelLength) {
      $('.wheelul').css({
        left: 0
      });
      wheelIndex = 1;
    }
    $('.wheelul').stop().animate({
      left: -wheelIndex * clientWidth
    }, 500);
    //原图标显示
    if (wheelIndex == wheelLength - 1) {
      $('.nav li').eq(0).css('background-color', '#ff6c00').siblings().css('background-color', '#ccc');
    } else {
      $('.nav li').eq(wheelIndex).css('background-color', '#ff6c00').siblings().css('background-color', '#ccc');
    }
  }
  //************图片向左滚动***************
  function moveLeft () {
    wheelIndex--;
    if (wheelIndex == -1) {
      $('.wheelul').css({
        left: -(wheelLength - 1) * clientWidth
      });
      wheelIndex = wheelLength - 2;
    }
    $('.wheelul').stop().animate({
      left: -wheelIndex * clientWidth
    }, 500);
    //原图标显示
    $('.nav li').eq(wheelIndex).css('background-color', '#ff6c00');
    $(".nav li").eq(wheelIndex).siblings().css('background-color', '#ccc');
  }
  //**************下面导航栏点击事件***************
  for (let i = 0; i < wheelLength; i++) {
    $('.nav li').eq(i).click(function () {
      wheelIndex = $(this).index();
      for (let j = 0; j < wheelLength; j++) {
        if (j == wheelIndex) {
          $('.wheelul').stop().animate({
            left: -wheelIndex * clientWidth
          }, 500);
          $('.nav li').eq(wheelIndex).css('background-color', '#ff6c00');
          $(".nav li").eq(wheelIndex).siblings().css('background-color', '#ccc');
        }
      }
    });
  }
});

效果图：

功能描述：

（1）正常情况下，自动轮播。

（2）当鼠标hover上去时，左右键显示，自动轮播停止；当鼠标离开时，左右键消失，自动轮播恢复。

（3）点击左右键，轮播图向对应方向轮播。

（4）点击下方的导航栏，轮播图显示选择页面。

蒲厷渶之戀

关注

1
点赞
踩
2

收藏

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

在做项目的过程中，经常会用到轮播图，轮播图的实现主要通过“平移量”来实现。简单总结一下：HTML代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮播图</title> <scri...
复制链接

扫一扫