说明：这个jquery我也是网上找的，感觉代码很简洁，比很多插件好多了。但是我研究了好久还是不太明白切换的原理是怎样的，哎。记录一下，下次用得到就可以参考参考。（我还自己加了个自动轮播的效果进去）类似下面这张效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.scroll{
margin: 40px auto;
position: relative;
width: 960px;
height: 240px;
overflow: hidden;
}
.scroll_box{
width: 960px;
height: 240px;
overflow: hidden;
}
.scroll_ul{
width: 2880px;
height: 240px;
}
.scroll_ul .scroll_item{
width: 960px;
height: 240px;
overflow: hidden;
float: left;
}
.scroll_ul .scroll_item .item_box{
width: 240px;
height: 240px;
background: orange;
color: #fff;
font-size: 24px;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
.scroll .btn{
width: 32px;
height: 60px;
position: absolute;
top: 90px;
}
.scroll .prev_btn{
background: url(images/b_left.png);
left: 0;
}
.scroll .next_btn{
background: url(images/b_right.png);
right: 0;
}
</style>
<script type="text/javascript">
$(function(){
//点击右按钮
$(".next_btn").click(function(){
nextscroll();
});
function nextscroll(){
//获取放置所有切换内容的ul
var scrollUl = $(".scroll_ul");
//获取位移的长度，即整个li的长度
var offset = ($(".scroll_ul li").width())*-1;
//动画的过程，不太明白
scrollUl.stop().animate({marginLeft:offset},"slow",function(){
var firstItem = $(".scroll_ul li").first();
scrollUl.append(firstItem);
$(this).css("margin-left","0px");
});
};
//点击左按钮
$(".prev_btn").click(function(){
var scrollUl = $(".scroll_ul");
var offset = ($(".scroll_ul li").width()*-1);
var lastItem = $(".scroll_ul li").last();
scrollUl.prepend(lastItem);
scrollUl.css("margin-left",offset);
scrollUl.animate({marginLeft:"0px"},"slow")
});
//鼠标滑过停止自动轮播
$("#scroll").mouseover(function(){
if(timer){
clearTimeout(timer);
}
});
//鼠标移开继续自动轮播
$("#scroll").mouseout(function(){
timer=setInterval(function(){
nextscroll();
},3000)
});
//自动播放
$("#scroll").mouseout();
});
/*
jquery用到的属性
find 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
stop 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
offset 获取匹配元素在当前视口的相对偏移。
first 获取第一个元素
append 向每个匹配的元素内部追加内容。
last 获取最后个元素
prepend 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
*/
</script>
</head>
<body>
<div class="scroll" id="scroll">
<div class="scroll_box">
<ul class="scroll_ul">
<li class="scroll_item">
<div class="item_box">1</div>
<div class="item_box">2</div>
<div class="item_box">3</div>
<div class="item_box">4</div>
</li>
<li class="scroll_item">
<div class="item_box">5</div>
<div class="item_box">6</div>
<div class="item_box">7</div>
<div class="item_box">8</div>
</li>
<li class="scroll_item">
<div class="item_box">9</div>
<div class="item_box">10</div>
<div class="item_box">11</div>
<div class="item_box">12</div>
</li>
</ul>
</div>
<a href="javascript:void(0)" class="btn prev_btn"></a>
<a href="javascript:void(0)" class="btn next_btn"></a>
</div>
</body>
</html>