图片滑动切换 基于jQuery 



已将完整示例放置在github上 
地址：https://github.com/LyyZzzz/img-slide.git
如有转载望附带本网页链接




 




/**
 * created by Lee on 2019/1/18 12:07
 * slide 调用方法 基于jq *为必传
 * @param box 图片盒子  *
 * @param eachbox 每个图片最高父级  *
 * @param time 轮播间隔 *
 * @param ctrlLeft  上一张图
 * @param ctrlRight 下一张图
 */

function slide(box, eachbox, time, ctrlLeft, ctrlRight) {
  if(typeof(time) != Number && time < 0) {
    time = 2000
  }
  let $ul = $(`${box}`);
  let eachWidth = $ul.find(`${eachbox}:last`).width();
  $ul.find(`${eachbox}:last`).prependTo($ul);
  $ul.css("left", -eachWidth + "px");
  let setNewInterval = setInterval(animateRight, time);

  $(`${box}, ${ctrlLeft}, ${ctrlRight}`).hover(function () {
    clearInterval(setNewInterval);
  }).mouseleave(function () {
    setNewInterval = setInterval(animateRight, time)
  });

  $(`${ctrlLeft}`).click(function (e) {
    e.preventDefault();
    animateLeft()
  });

  $(`${ctrlRight}`).click(function (e) {
    e.preventDefault();
    animateRight();
  });

  /**
   * 左切
   */
  function animateLeft() {
    $ul.animate({left: 0 + "px"}, 500, function () {
      $ul.find(`${eachbox}:last`).prependTo($ul);
      $ul.css({left: -eachWidth + "px"});
    });
  }

  /**
   * 右切
   */
  function animateRight() {
    $ul.animate({left: -2 * eachWidth + "px"}, 500, function () {
      $ul.find(`${eachbox}:first`).appendTo($ul);
      $ul.css({left: -eachWidth + "px"});
    });
  }

  var dValue;
  var upAndLeave = false;
  $(`${box}`)[0].onmousedown = function (event) {
    upAndLeave = false;
    clearInterval(setNewInterval);
    downClientX = 0;
    var event = event || window.event;
    event.preventDefault();
    var downClientX = event.clientX;
    document.onmousemove = function (event) {
      clearInterval(setNewInterval);
      var event = event || window.event;
      dValue = event.clientX - downClientX;
      $ul.css("left", -eachWidth + dValue+ "px")
    };
  }

  $(`${box}`)[0].onmouseup = function() {
    upAndLeave = true;
    slightlyMove();
  };

  $(`${box}`)[0].onmouseleave = function () {
    if(!upAndLeave) {
      slightlyMove()
    }
  };

  function slightlyMove() {
    if(dValue <= -eachWidth / 2) {
      animateRight()
    } else if ( dValue > -eachWidth / 2 && dValue < 0) {
      $ul.animate({left: -eachWidth + "px"},200)
    } else if(dValue >= eachWidth / 2) {
      animateLeft();
    } else if (dValue > 0 && dValue < eachWidth / 2) {
      $ul.animate({left: -eachWidth + "px"},200)
    }
    document.onmousemove = null;
  }
}




 


css




 1 * {
 2   paddding: 0;
 3   margin: 0;
 4   list-style: none;
 5   text-decoration: none;
 6   font-size: 12px;
 7   font-family: "微软雅黑";
 8 }
 9 
10 .content {
11   width: 590px;
12   height: 340px;
13   border: 3px solid red;
14   margin: 50px auto;
15   position: relative;
16   overflow: hidden;
17 }
18 
19 .box {
20   display: inline-flex;
21   padding: 0;
22   position: absolute;
23 }
24 
25 .box li {
26   float: left;
27 }
28 
29 .shu {
30   position: absolute;
31   bottom: 10px;
32   left: -30px;
33   width: 100%;
34   text-align: center;
35   font-size: 0;
36 }
37 
38 .shu li {
39   width: 20px;
40   height: 20px;
41   background: #333;
42   color: #fff;
43   text-align: center;
44   line-height: 20px;
45   font-size: 14px;
46   border-radius: 50%;
47   display: inline-block;
48   margin: 0 5px;
49   cursor: pointer;
50 }
51 
52 .shu li.active {
53   background: #a00;
54 }
55 
56 .rightB {
57   width: 50px;
58   height: 70px;
59   font-size: 20px;
60   color: #fff;
61   background: rgba(0, 0, 0, 0.5);
62   position: absolute;
63   right: 0;
64   top: 45%;
65   line-height: 70px;
66   text-align: center;
67   cursor: pointer;
68   display: none;
69 }
70 
71 .leftB {
72   width: 50px;
73   height: 70px;
74   font-size: 20px;
75   color: #fff;
76   background: rgba(0, 0, 0, 0.5);
77   position: absolute;
78   left: 0;
79   top: 45%;
80   line-height: 70px;
81   text-align: center;
82   cursor: pointer;
83   display: none;
84 }




 




 


 


附部分html代码


<body>
<div class="content">
  <ul class="box">
    <li>
      <a href="#"><img src="images/1.jpg"></a>
    </li>
    <li>
      <a href="#"><img src="images/2.jpg"></a>
    </li>
    <li>
      <a href="#"><img src="images/3.jpg"></a>
    </li>
    <li>
      <a href="#"><img src="images/4.jpg"></a>
    </li>
    <li>
     <a href="#"><img src="images/5.jpg"></a>
    </li>
    <li>
      <a href="#"><img src="images/6.jpg"></a>
    </li>
  </ul>

  <div class="leftB">&lt;</div>
  <div class="rightB">&gt;</div>
</div>
</body>


<script>
  slide(".box", "li", 2000, ".leftB", ".rightB")

  $(".leftB,.rightB").hover(function () {
    $(this).css("background", "rgba(0, 0, 0, 0.6)")
  }, function () {
    $(this).css("background", "rgba(0, 0, 0, 0.5)")
  });

  $(".content").mouseenter(function () {
    $(".leftB,.rightB").fadeIn(200);
  }).mouseleave(function () {
    $(".leftB,.rightB").fadeOut(200);
  });

</script>






**************************************************


　　   工作之余没事练练手，发一些可能对新手有帮助的代码，现在工作主要是用框架来完成，
　　偶尔复习下js、jq，毕竟这才是基础，基础扎实了学什么框架都有帮助。加油鸭，各位　！！！
　　
　　已将完整示例放置在github上 
　　地址：https://github.com/LyyZzzz/img-slide.git
　　如有转载望附带本网页链接
****************************************************************************************************


******************************************************************************************************************************************************










            

            
posted @ 
2019-01-18 16:04 
Lee242050 
阅读(750) 
评论(0) 
编辑 
收藏 
举报