品牌活动横向滚动效果

本节设计右侧下部品牌活动横向滚动效果。

设计思路：先定义动画函数showBrandList()，该函数根据下标index决定滚动距离。然后为每个Tab标题链接绑定click事件，在该事件中调用showBrandList()实现横向滚动效果。

新建JavaScript文档，保存为imgSlide.js，然后输入下面代码：

/* 品牌活动模块横向滚动 */
$(function(){
    $("#jnBrandTab li a").click(function(){ 
		$(this).parent().addClass("chos").siblings().removeClass("chos");
		var idx = $("#jnBrandTab li a").index(this);
		showBrandList(idx);
		return false;
   }).eq(0).click();
});
//显示不同的模块
function showBrandList(index){ 
	    var $rollobj = $("#jnBrandList");
    var rollWidth = $rollobj.find("li").outerWidth();
	    rollWidth = rollWidth * 4; //一个版面的宽度
	    $rollobj.stop(true,false).animate({ left : -rollWidth*index},1000);
}

在网页中应用该动画效果，当单击品牌活动右上角的分类链接时就会以横向滚动的方式显示相关内容，效果如图1所示。

图1 横向滚动效果