jquery 实现导航栏的左右滑动 （scrollLeft scrollTop）
1. html的部分：
<div class="arrow_right" id="arrow_left" style="margin: 0 10px;">
<img src="http://siweitech.b0.upaiyun.com/cms/2018-01-05-arrow_left.png" />
</div>
<ul class="nav nav-pills">
<% @second_category_classes.each do |second_category_class|%>
<li>
<a class="" id="<%= second_category_class.id %>" href="">
</a>
</li>
<% end %>
<div class="arrow_right" id="">
</div>
</ul>
<div class="arrow_right" id="arrow_right">
<img src="http://siweitech.b0.upaiyun.com/cms/2018-01-04-arrow_right.png" />
</div>
<img src="http://siweitech.b0.upaiyun.com/cms/2018-01-05-arrow_left.png" />
</div>
<ul class="nav nav-pills">
<% @second_category_classes.each do |second_category_class|%>
<li>
<a class="" id="<%= second_category_class.id %>" href="">
</a>
</li>
<% end %>
<div class="arrow_right" id="">
</div>
</ul>
<div class="arrow_right" id="arrow_right">
<img src="http://siweitech.b0.upaiyun.com/cms/2018-01-04-arrow_right.png" />
</div>
2.跳转css的样式
3.js
<script>
var position_x = 0
$("#arrow_right").click(function(){
//限制position的位置不能无限加
if (position_x <= $(".nav-pills").scrollLeft()) {
position_x = position_x + 140
}
console.info("position_x=======" + position_x)
$(".nav-pills").scrollLeft(position_x)
});
var position_x = 0
$("#arrow_right").click(function(){
//限制position的位置不能无限加
if (position_x <= $(".nav-pills").scrollLeft()) {
position_x = position_x + 140
}
console.info("position_x=======" + position_x)
$(".nav-pills").scrollLeft(position_x)
});
$("#arrow_left").click(function(){
console.info("position_x=======" + position_x)
if (position_x >= 140) {
position_x = position_x - 140
}
$(".nav-pills").scrollLeft(position_x)
});
console.info("position_x=======" + position_x)
if (position_x >= 140) {
position_x = position_x - 140
}
$(".nav-pills").scrollLeft(position_x)
});
</script>