//需求：点击左右导航箭头，实现内容的切换
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box,.box1{
width: 220px;
overflow: hidden;
position: relative;
height: 200px;
}
ul{
width: 1000px;
position: absolute;
}
ul li{
width: 100px;
height: 200px;
float: left;
background-color: red;
margin-right: 20px;
}
.prev,.next{
position: absolute;
width: 30px;
height: 50px;
text-align: center;
line-height: 50px;
top: 75px;
background-color: rgba(200,200,200,0.4);
color: #333;
text-decoration: none;
/*display: none;*/
}
.prev{
left: 0;
}
.next{
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
// count：窗口显示的内容个数
// num:每次切换的内容的个数
// speed:切换完成需要的时间
changeImg:function change(count,num,speed){
// $(this) 调用该方法的jq对象
console.log($(this));
var $ul = $(this).find("ul");
var $li = $(this).find("ul li");
var $prev = $(this).find(".prev");
var $next = $(this).find(".next");
// liWidth,每一个li的宽度（包括margin）
var len = $li.length;
var liWidth =$li.eq(0).outerWidth(true);
$ul.css("width",len*liWidth);
$(this).css("width",count*liWidth-20);
// 当前位于最左侧的li元素的索引
var index = 0;
$next.click(function(){
//原索引加上改变值得到新索引
index+=num;
// 最后一li可以显示的索引为li的长度-窗口显示li的个数
if (index>len-count) {
index=0;
}
$ul.animate({
left:(-1)*index*liWidth,
},speed);
});
$prev.click(function(){
index-=num;
if (index<0) {
index=len-count;
}
$ul.animate({
left:(-1)*index*liWidth,
},speed);
})
}
});
$(".box").changeImg(2,2,2000);
$(".box1").changeImg(4,4,2000);
</script>
</body>
</html>