// 轮播图
主要实现思想:
a.第一层div,设置overflow为hidden。
b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以。
c.li设置为左浮动,排成一行,还有ul的宽度设置成li宽度的总和,不然li会换行!
d.点击向右按钮:
(1)让整个ul向左滑动,margin-left的滑动距离为为负的li宽度;
(2)把第一个li放到ul里的最后位置;
(3)设置ul的margin-left为0px;
Tips:以上步骤必须放到ul向左滑动动画的回调函数里面。
e.点击向左按钮:
(1)先把ul的margin-left的距离设置为负的li宽度;
(2)把最后一个li放到ul里的第一个位置;
(3)设置ul的margin-left为0px(此步骤需写在animate动画函数中)。
具体例子:
CSS代码:
* {
margin:;
padding:;
}
ul {
list-style: none;
} .list {
width: 1000px;
padding: 10px;
overflow: hidden;
margin: 100px auto;
border: 1px solid;
}
.list-cont {
display: inline-block;
width: 1350px;
}
.list-cont li {
width: 200px;
height: 180px;
float: left;
border: 1px solid;
text-align: center;
line-height: 180px;
font-size: 24px;
margin-right: 5px;
}
.btn {
display: table;
margin: 10px auto;
border: 1px solid;
padding: 5px 10px;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
HTML代码:
<div class="list">
<ul class="list-cont">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<button class="btn scroll-left">向左滚动</button>
<button class="btn scroll-right">向右滚动</button>
</div>
JS代码:
因为此轮播图是基于JQ的animate,所有必须要引用JQ文件才行!
$(function(){
// ul的宽度
$(".list-cont").width($(".partner-list li").length * 200); // 点击右箭头 $(".scroll-right").click(function(){
$(".list-cont").stop().animate({"margin-left":"-200px"},600,function(){
$(".list-cont>li").first().appendTo($(".list-cont"));
$(".list-cont").css("margin-left","0");
});
}); // 点击左箭头 $(".scroll-left").click(function(){
$(".list-cont").css("margin-left","-200px");
$(".list-cont>li").last().prependTo($(".list-cont"));
$(".list-cont").stop().animate({"margin-left":"0"});
}); });