仿京东

标签：轮播图

jQuery.noConflict(); //将变量$的控制权让出

jQuery(document).ready(function($) 

{ 

/*start*/

/*选择颜色*/

$(".colorBlock").click(function(){

    $(this).addClass("on").siblings().removeClass("on");

var numli=$(this).index()-1;

$(".RollFormView").eq(numli).css({‘display‘:‘block‘}).siblings().css({‘display‘:‘none‘});

  });

/*尺寸*/

$(".sizeBlock").click(function(){

    $(this).addClass("on").siblings().removeClass("on");

  });

/*轮播图*/

$(".hdnum li").mouseover(function(){

var numli=$(this).index();

$(this).parent().parent().prev().children().eq(numli).addClass("on").siblings().removeClass("on");

    $(this).addClass("on").siblings().removeClass("on");

  });

/*换页*/ 

$(".FormViewS #spec-left").click(function(){

var specLprS=$(this).prev().children().eq(0);

    $(this).prev().append(specLprS);

var specLpr=$(this).parent().prev().children().eq(0);

    $(this).parent().prev().append(specLprs);

  });

  $(".FormViewS #spec-right").click(function(){

var specRprS=$(this).prev().prev().children().eq(0);

    $(this).prev().prev().append(specRprS);

var specLprL=$(this).parent().prev().children().eq(0);

    $(this).parent().prev().append(specLprL);

  });

  /*放大*/

  $(".RollFormView .smailscreen").click(function(){

var CLSS=$(this).clone(true).attr("class","").addClass("zzsc-content");

$(".largefullzzsc").css({‘display‘:‘block‘}).prepend(CLSS);

  });

  /*换大图*/

   $(".largefullzzsc button.mfp-arrow-left").click(function(){

$(".zzsc-content div.on").prev().addClass("on").siblings().removeClass("on");

  });

     $(".largefullzzsc button.mfp-arrow-right").click(function(){

$(".zzsc-content div.on").next().addClass("on").siblings().removeClass("on");

  });

     $(".RollFormView button.mfp-arrow-left").click(function(){

$(this).prev().children(".hdnum").children(".on").prev().addClass("on").siblings().removeClass("on");

$(this).prev().prev().children(".on").prev().addClass("on").siblings().removeClass("on");

  });

     $(".RollFormView button.mfp-arrow-right").click(function(){

$(this).prev().prev().children("ul.hdnum").children(".on").next().addClass("on").siblings().removeClass("on");  

$(this).prev().prev().prev().children(".on").next().addClass("on").siblings().removeClass("on");

  });

  /*关大图*/

$(".zzscbg").click(function(){

$(this).prev().remove();

$(this).parent().css({‘display‘:‘none‘});

  });  

/*end*/ 

}) 

仿京东

标签：轮播图

原文地址：http://luckyyang.blog.51cto.com/4524113/1793909