jq实现滑动轮播效果

最新推荐文章于 2022-11-01 11:27:13 发布

String佳佳

最新推荐文章于 2022-11-01 11:27:13 发布

阅读量1k

点赞数 2

原文链接：https://blog.csdn.net/LY_code/article/details/80087583?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242

版权

1、简单版本（无循环轮播，同时展示多张图片）

https://juejin.im/post/6844903799115497479

2、复杂版本（循环、自动轮播，同时展示一张图片）

效果图

在这里插入图片描述

源代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滑动轮播案例</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
  <link href="lunbo2.css"  rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
  <div id="show-area">

    <ul>
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img1.jpg"></a></li>-->
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img2.jpg"></a></li>-->
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img3.jpg"></a></li>-->
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img4.jpg"></a></li>-->
      <li>img1</li>
      <li>img2</li>
      <li>img3</li>
      <li>img4</li>
    </ul>
    <div id="button-left"><</div>
    <div id="button-right">></div>

    <div id="indicator"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
  </div>
</div>
<script src="lunbo2.js"></script>
</body>
</html>

css

*{
    padding:0px;
    margin:0px;
    border:0px;
}
li{
    list-style-type:none;
}
/*给a标签去除下划线*/
a{
    text-decoration:none;
}
#wrapper{
    margin:20px auto;
}
#show-area{/*宽度在js代码中设置的*/
    height:500px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
/*注意：找bug找了很久，这里自动插入一张，父容器要加上他的宽度(在js代码中动态计算了)，否则怎么显示呢？小问题大解决*/
#show-area ul{
    position:relative;
    right:0;
}
#show-area ul li{/*宽度在js代码中设置的*/
    float:left;
    height:500px;
    text-align: center;
    line-height: 500px;
}
#show-area ul li:nth-of-type(1){
    background-color: #4c3da8;
}
#show-area ul li:nth-of-type(2){
    background-color: #a83c39;
}
#show-area ul li:nth-of-type(3){
    background-color: #8da86f;
}
#show-area ul li:nth-of-type(4){
    background-color: #1492a8;
}
#show-area ul li:nth-of-type(5){
    background-color: #4c3da8;
}
/*指示器*/
#indicator{
    display: flex;
    justify-content: space-between;
    width:140px;
    position:absolute;
    top:450px;
    left:0;
    right: 0;
    margin: auto;
    z-index:1;
}
#indicator div{
    height:12px;
    width:12px;
    border-radius:12px;
    background-color:#ccc;
    float:left;
    margin-left:5px;
    opacity:0.9;
    filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
    transition: all .8s;
}
#button-left,#button-right{
    position: absolute;
    width: 50px;
    height: 110px;
    z-index: 2;
    background-color: #cccccc;
    font-size: 40px;
    color: #FFFFFF;
    text-align: center;
    line-height: 110px;
    opacity:0;
    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
    cursor: default;
}
#button-left{
    top: 180px;
    left: 0px;
}
#button-right{
    top: 180px;
    right: 0px;
}
.onclick{
    width: 30px !important;
    background-color:#FFF !important;
}

$(function () {
  $('#show-area').css({
    width:window.screen.width
  })
  $('#show-area ul li').css({
    width:window.screen.width
  })
  /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
  $("#show-area").mouseenter(function () {
    $("#button-right,#button-left").css({opacity:0.5,transition:'all .5s'});
  });
  $("#show-area").mouseleave(function () {
    $("#button-right,#button-left").css({opacity:0,transition:'all .5s'});
  });


  var i=0;
  /*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/
  var imgWidth = $("#show-area ul li").width();
  var clone = $("#show-area ul li").first().clone(true);
  /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
  $("#show-area ul").append(clone);


  /*get 所有li的个数,只有length才是属性*/
  var size = $("#show-area ul li").length;
  $('#show-area ul').css({
    width:imgWidth*size
  })

  /*step 1:  */
  //一开始循环添加按钮
  //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
  //所以添加按钮的时候我们也应该添加4个按钮
  for(var j=0;j<size -1 ;j++){
    $("#indicator").append("<div></div>");
  }

  $("#indicator div").eq(i).addClass("onclick");


  /*step 2:  */
  //左按钮
  $("#button-left").click(function () {
    toLeft();
  });
  //右按钮
  $("#button-right").click(function () {
    toRight();
  });

  /*step 3：*/
  //按钮指示器鼠标移出移入事件
  $("#indicator div").hover(function () {
    i = $(this).index();
    clearInterval(timer);
    $("#show-area ul").stop().animate({left:-i * imgWidth});
    $(this).addClass("onclick").siblings().removeClass("onclick");

  },function () {
    timer = setInterval(function () {
      toRight();
    },2000)
  });

  //两个方向按钮鼠标移出移入事件
  $("#button-left,#button-right").mouseenter(function () {
    clearInterval(timer);
  }).mouseleave(function () {
    timer = setInterval(function () {
      toRight();
    },2000);
  });

  //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
  var timer = setInterval(function () {
    toRight();
  },2000);


  /*step 2-2*/
  //左按钮实现的函数
  function toLeft(){

    //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
    i--;
    if(i==-1){
      $("#show-area ul").css({left:-(size - 1)*imgWidth});
      i=size-2;
    }
    $("#show-area ul").animate({left:-i*imgWidth},1000);
    $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");

  }

  /*step2-2:*/
  //右按钮的实现函数
  function toRight() {
    i++;
    /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）
    并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置
    并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
    if(i==size){
      $("#show-area ul").css({left:0});
      i=1;
    }

    $("#show-area ul").stop().animate({left: -i * imgWidth}, 1000);

    //设置下面指示器的颜色索引
    if(i == size-1){
      $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");

    }else{
      $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
    }
  }

});

String佳佳

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jq实现滑动轮播效果

效果图源代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑动轮播案例</title> <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script> <link href
复制链接

扫一扫