基于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"});
　　　　});

　　});