<div class="nav-box" style="height:50px;">
<div class="nav inner">
<a class="prev">left</a>
<div class="picScroll">
<ul>
<li>
<a href="#">菜单1</a>
</li>
<li>
<a href="#">菜单2</a>
</li>
<li>
<a href="#">菜单3</a>
</li>
<li>
<a href="#">菜单4</a>
</li>
<li>
<a href="#">菜单5</a>
</li>
<li>
<a href="#">菜单6</a>
</li>
<li>
<a href="#">菜单7</a>
</li>
<li>
<a href="#">菜单8</a>
</li>
<li>
<a href="#">111</a>
</li>
<li>
<a href="#">222</a>
</li>
<li>
<a href="#">333</a>
</li>
<li>
<a href="#">444</a>
</li>
</ul>
</div>
<a class="next">right</a>
</div>
</div>
mounted() {
var oPic = $(".picScroll").find("ul");
var oImg = oPic.find("li");
var oLen = oImg.length + 1;
var oLi = oImg.width();
var prev = $(".prev");
var next = $(".next");
oPic.width(oLen * 162); //计算总长度
var iNow = 0;
var iTimer = null;
prev.click(function() {
if (iNow > 0) {
iNow--;
}
ClickScroll();
});
next.click(function() {
if (iNow < oLen - 8) {
iNow++;
}
ClickScroll();
});
function ClickScroll() {
oPic.animate({
left: -iNow * 162
});
}
},
<style scoped>
ul {
list-style: none;
}
.nav-box .nav .prev {
float: left;
border: 1px solid forestgreen;
}
.nav-box .nav .next {
float: right;
border: 1px solid darkgoldenrod;
}
.nav-box .nav .picScroll {
border: 1px solid gold;
position: relative;
height: 34px;
width: 1150px;
overflow: hidden;
float: left;
}
.nav-box .nav .picScroll ul {
position: absolute;
}
.nav-box .nav .picScroll ul li {
width: 162px;
float: left;
}
</style>