jquery实现类似以前凡客诚品右侧图文切换结合效果

终于公司的新闻发布会弄好了，据说反响不错，70多家媒体，排场蛮大的。
现在又得重新回到开发中，新版的商城需要改版，已经实现各大版块的，样式结构，浏览器兼容已经搞定，虽然有纠结的IE6，可是依然拿下，没有办法，你懂的，过程很苦逼。
明天再整个图文结合的javascript效果就可以了，这让jquery博客想到上个版本上用到的类似凡客诚品图文切换效果来着。
$(function(){
$(".recommend .info #tabnav li").each(function(index){
$(this).hover(function(){
$("#tabcon > li:visible").hide();
$("#tabcon > li:eq(" + index + ")").show();
$(this).addClass("on").siblings().removeClass("on");
})
})
//goComment
$("#goComment").click(function(){
$("html,body").animate({scrollTop: $(".goods-comment").offset().top}, 10);
})
$("ul.list-shows em.ico:gt(8)").css({"text-indent":"3px","font-size":"10px","-webkit-text-size-adjust":"none"});
//list-shows
$(".list-shows li").hover(function(){
$(this).addClass("on").siblings().removeClass("on");
})
$(".sift-goods-list ul.fix li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
});
var otherGoods = $(".sift-goods-con .other");
$(".sift-goods-btn a").toggle(function(){
otherGoods.slideUp(300);
$(this).removeClass("up").text("更多")
},function(){
otherGoods.slideDown(300);
$(this).addClass("up").text("收起")
})
//goods-property
var m=$('.goods-property p img').is("img");
if(m==true){
$(".goods-property img").parent("p").css("padding","0")
}
//tag-tynn-con
$(".tag-tynn-con dt.on").next("dd").find("ol").show();
$(".tag-tynn-con dl dt").click(function(){
$(this).toggleClass("on").next().find("ol").slideToggle(300)
});
$(".tag-tynn-con dl dt a").click(function(e){
e.stopPropagation();
});
//goods-info
$(".option-dl dt.option-dt.normal").addClass("on");
$(".option-dl dt.option-dt:not(.normal)").click(function(){
$(this).toggleClass("on");
if( !$(this).next(".option-dd").is(":animated") ){
$(this).next(".option-dd").slideToggle(300);
}
});
var $cur = 1;
var $i = 5;
var $len = $('#img-list-con>ul.fix>li').length;
var $pages = Math.ceil($len / $i);
var $w = $('.goods-main #img-list-con').width();//取得展示区外围宽度
var $showbox = $('#img-list-con>ul.fix');
var $pre = $('#img-list .go-left');
var $next = $('#img-list .go-right');
$pre.click(function(){
if (!$showbox.is(':animated')) {
if ($cur == 1) {
}
else {
$showbox.animate({
left: '+=' + $w
}, 500);
$cur--;
}
}
});
$next.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == $pages) {
}
else {
$showbox.animate({
left: '-=' + $w
}, 500);//改变left值,切换显示版面
$cur++; //版面数累加
}
}
});
//goods-main imgShow end
$(".no-pinglun").click(function(){
$("#pinglun").slideUp(300)
});
$(".want-ask").click(function(){
$(".product_zixun").slideDown(300)
})
$(".no-zixun").click(function(){
$(".product_zixun").slideUp(300)
});
$(".pay-append dd ").hide();
$("table.data .a-share").click(function(){
$(this).parents("tr").find(".bubble").toggle();
$(this).parents("tr").siblings("tr").find(".bubble").hide();
$("body").one('click', function() {
$(".bubble").hide();
});
return false;
});
$(".bubble").click(function(){
stopPropagation()
});
$(".comment-main .info .product_zonghe a.no-re").click(function(){
$(this).parents(".product_zonghe").slideUp();
});
/* x-15 */
function SaveClass()
{
var temClassArry = new Array()
$("#UserStart > li").each(function(i){
temClassArry[i] = $(this).attr("class");
})
return temClassArry;
}
$(document).ready(function(){
var temparray = SaveClass();
$("#UserStart > li").mousemove(
function(){
var currentCount=0;
currentCount = $("#UserStart > li").index($(this)[0])
$("#UserStart > li").each(function(i){if(i<=currentCount)
{
$(this).removeClass();
$(this).addClass("lv1");
}
else{
$(this).removeClass();
$(this).addClass("lv2");
}})
})

.click(function(){
temparray = SaveClass();
})

.mouseout(function(){
$("#UserStart > li").each(function(i){
$(this).removeClass();
$(this).addClass(temparray[i]);
})
})
});
});
function SelectPay(value)
{
if(value==4)
{
$(".pay-way").slideDown(300);
}
else
{
$(".pay-way").slideUp(300);
}
}
function SelectOpenClosed(obj)
{
var objName=$("#"+obj);
if(obj=="one")
{
var openclass=objName.attr("class");
if(openclass.indexOf("on")>-1)
{
objName.css("background-position","8px -1122px");
objName.next("dd").slideUp(300);
objName.removeClass("on");
}
else
{
objName.css("background-position","8px -1103px");
objName.next("dd").slideDown(300);
objName.addClass("on");
}
}
if(obj=="two")
{
var openclass=objName.attr("class");
if(openclass.indexOf("on")>-1)
{
objName.css("background-position","8px -1122px");
objName.next("dd").slideUp(300);
objName.removeClass("on");
}
else
{
objName.css("background-position","8px -1103px");
objName.next("dd").slideDown(300);
objName.addClass("on");
}
}
if(obj=="three")
{
var openclass=objName.attr("class");
if(openclass.indexOf("on")>-1)
{
objName.css("background-position","8px -1122px");
objName.next("dd").slideUp(300);
objName.removeClass("on");
}
else
{
objName.css("background-position","8px -1103px");
objName.next("dd").slideDown(300);
objName.addClass("on");
}
}
}
代码有点长 先放点js实现代码，还有的看下面吧。
在线效果DEMO

转自 jquery http://www.jqueryba.com/355.html