** 基于jQ + html + css的可点击滑动按钮列表**
做出来基本样式如上图所示,需求功能为按钮列表,需要手动点击左右滑动
基本思路类似于轮播图,不同点时每个按钮宽度不同,滑倒最后一页点击也不会回弹,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
.lsit_boxs {
width: 1000px;
height: 200px;
margin: 0 auto;
position: relative;
}
.lsit_box {
width: 100%;
position: absolute;
bottom: 10px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.left_btn {
float: left;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.main {
float: left;
width: 940px;
overflow: hidden;
height: 32px;
text-align: center;
}
.lists {
height: 30px;
white-space: nowrap;
font-size: 0;
}
.lists li {
/* width: 180px; */
height: 30px;
display: inline-block;
background-color: white;
border: 1px solid #ccc;
line-height: 30px;
margin: 0 15px;
}
.right_btn {
float: right;
width: 30px;
height: 30px;
cursor: pointer;
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="lsit_boxs">
<div class="lsit_box">
<p class="left_btn">
<</p>
<div class="main">
<ul class="lists">
<li style="width:180px; background-color: #ccc;">1</li>
<li style="width:120px;background-color:darkblue">2</li>
<li style="width:240px;background-color:saddlebrown">3</li>
<li style="width:60px;background-color: salmon;">4</li>
<li style="width:100px;background-color: seagreen;">5</li>
<li style="width:120px;background-color: skyblue;">6</li>
<li style="width:160px;background-color: tan;">7</li>
<li style="width:120px;background-color: red;">8</li>
<li style="width:180px;background-color: black;">8</li>
<li style="width:240px;background-color: yellow;">8</li>
</ul>
</div>
<p class="right_btn">></p>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//每次移动的宽度
var moveWidth = $(".main li").width()
index = 0,
len = $(".lists li").length;
var hulWidth = 0;
var firstChild = $(".lists li")[0].clientWidth
for(var i= 0; i< len; i++) {
hulWidth += $(".lists li")[i].clientWidth;
}
// list宽度 32为每个按钮的margin和border之和
$(".lists").width(hulWidth + len * 32);
var ch = $(".lists").width() - $(".main").width();
// 足够移动几次
var moves = Math.ceil(ch/firstChild) ;
// 当list宽度大于盒子宽度时,右箭头出现
if ($(".lists").width() > $(".main").width()) {
$(".right_btn").css("visibility", "visible");
}
//点击右箭头,左箭头出现
$(".right_btn").click(function () {
$(".left_btn").css("visibility", "visible");
index += 1;
left_state = $(".lists").css('marginLeft');
if(index == moves) {
$(".right_btn").css("visibility", "hidden");
}
ht(index);
})
$(".left_btn").click(function () {
$(".right_btn").css("visibility", "visible");
index -= 1;
left_state = $(".lists").css('marginLeft');
if (index == 0) {
$(".left_btn").css("visibility", "hidden");
}
ht(index);
});
function ht(index) {
if(index == 0) {
$(".lists").stop().animate({ 'marginLeft': 0 }, 500);
}else if(index == moves) {
$(".lists").stop().animate({ 'marginLeft': -ch}, 500);
}else {
$(".lists").stop().animate({ 'marginLeft': -moveWidth * index }, 500);
}
};
})
</script>
</body>
</html>