基于JQ的简单左右轮播图
// 轮播图
主要实现思想:
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: 0; padding: 0; } 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"}); }); });