jQuery实现点击按钮滚动元素

• 最近做项目做到一个功能是用左右按钮取代进度条滚动，网上没有类似的dome就自己写了一个，挺简单不难，废话不多说直接上代码；

• html

// 首先这是一个固定尺寸的视口div<div class="scroll_part" style="position: relative;">
 // 这是左按钮  <div id="goLeftBtn" class="btn sc_left" style="position: absolute;z-index: 10;">
    <div class="">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/sc_left.png" />
    </div>
  </div>// 这是右按钮  <div id="goRightBtn" class="btn sc_right" style="position: absolute;z-index: 10;">
    <div class="">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/sc_right.png" />
    </div>
  </div>
  // 这里是可以滚动的元素  <div class="content_sc">
    <div id="" class="sc_box" style="position: relative;">
      <img class="sc_img" style="" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/programme.png" />
        <div class="dot" style="">//这个是一个动画特效可以不用管              <div class="dot2 ">
                <div class="dot3"></div>
              </div>
        </div>
    </div>
  </div></div>

效果图.png

• css部分很简单 就不贴出来了

• js部分

// 滚动效果// 这里主要用到的方法就是$().scrollLeft()；
    var count = 1;    var goWight = 100;

    $("#goLeftBtn").click(function() {        if(count == 0) {
            $('.content_sc').scrollLeft(0);
            count = 0;
        } else {
            count--;
            $('.content_sc').scrollLeft(count * goWight);
        }        console.log("count" + count);        var aaa = $(".sc_box")        console.log("offsetWidth" + aaa.offsetWidth);

    })

    $("#goRightBtn").click(function() {        if(count == 0) {
            $('.content_sc').scrollLeft(goWight);
        } else {
            $('.content_sc').scrollLeft(count * goWight);
        }        console.log("count" + count);        var aaa = $(".content_sc")[0].offsetWidth        var bbb = $(".sc_box")[0].offsetWidth        if((aaa + count * goWight) > bbb) {            return;
        }
        count++;

    })

});

代码很简单 希望对大家有帮助！

作者：Skywang
链接：https://www.jianshu.com/p/5f04a6f9cc7b