仿锋利的Jquery案例做的一个滚动切换效果，供大家参考，具体内容如下
效果如下图:
前台HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动图</title>
<link rel="stylesheet" type="text/css" href="css/RollControl.css" />
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
var page = 1;
var i = 4;
var $v_trends = $("#view_menu_trends").find("li");
$v_trends.eq(0).addClass('currentTrends');//默认第一个点选中
$(".next").click(function () {
var $parent = $("#view_menu");
var $v_content = $("#view_content");//外围width
var $v_show = $("#view_content_fixed");// var v_width = $v_content.width();
var len = $v_content.find('li').length;
var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
if (!$v_show.is(":animated")) {
if (page == page_count) {
$v_show.animate({ left: '0px' }, 'slow');//如果超过总页数 那么就跳回第一页
page = 1;
} else {
$v_show.animate({ left: '-=' + v_width }, 'slow');
page++;
}
$v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
}
});
$(".pre").click(function () {
var $parent = $("#view_menu");
var $v_content = $("#view_content");//外围width
var $v_show = $("#view_content_fixed");//
var v_width = $v_content.width();
var len = $v_content.find('li').length;
var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
if (!$v_show.is(":animated")) {//判断是否是动画状态
if (page == 1) {
$v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一页那么跳转到最后一页
page = page_count;
} else {
$v_show.animate({ left: '+=' + v_width }, 'slow');
page--;
}
$v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
}
});
});
</script>
</head>
<body>
<div>
<div id="view_menu">
<div id="view_menu_title"><span>热播电视剧</span></div>
<div id="view_menu_trends">
<ul>
