說明：這個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>