团片特效问题

产品页面，一张大图 和四张小图。如何鼠标移到小图上面时，大图就会变成小图，好多商城产品页都有这个功能，如何做啊 求教

解决方案 »

  1.   

    你可以到www.360buy.com上面把它们的代码分析就可以了
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0041)http://www.360buy.com/product/163546.html -->
    <HTML xmlns="http://www.w3.org/1999/xhtml"><SCRIPT language=javascript type=text/javascript>
    var Swidth=screen.width;
    var Surl="http://www.360buy.com/";
    var Skin=["common.css","pshow.css","jquery.jcarousel.css"];
    var Skintemp;
    if (Swidth>=1280)
    {
    Surl+="skin_1200";
    }
    else
    {
    Surl+="skin";
    }
    for (var i=0;i<Skin.length;i++)
    {
    Skintemp=document.createElement("link");Skintemp.type="text/css";
    Skintemp.rel="stylesheet";
    Skintemp.href=Surl+"/"+Skin[i];
    document.getElementsByTagName("head")[0].appendChild(Skintemp);}
    </SCRIPT><SCRIPT 
    src="d:\1\2\jquery-1.2.6.pack.js" type=text/javascript></SCRIPT><SCRIPT defer type=text/javascript>
    function mycarousel_initCallback(carousel){
    $("#mycarousel li").mouseover(function(){

    $("#Product_BigImage img")[0].src="D:/1/2/"+this.getElementsByTagName("img")[0].name;

    $("#Product_BigImage img")[0].jqimg="D:/1/2/"+this.getElementsByTagName("img")[0].name;
    // alert($("#Product_BigImage img")[0].jqimg);
    $(this).siblings().each(function(){
    this.getElementsByTagName("img")[0].className="";
    })
    this.getElementsByTagName("img")[0].className="curr"; })
    };$(function(){
        jQuery("#mycarousel").jcarousel({initCallback:mycarousel_initCallback});
        jQuery("#Fi_pro").jcarousel();
       $(".jqzoom").jqueryzoom({
    xzoom:403,
    yzoom:260,
    offset:10,
    position:"right",
            preload:1,
    lens:1
    });
    });
    </SCRIPT><BODY><DIV id=Product_Intro_Left>
    <DIV class=jqzoom id=Product_BigImage ><IMG src="2/cyf108_1240915104110417.gif" 
    width=349 ></DIV><DIV id=Product_LittleImage>
    <UL class=jcarousel-skin-tango id=mycarousel>
      <LI><IMG
      src="D:\1\2\50081.gif" 
      name=4266/c907529a-692a-42aa-a866-987889ef55f2.jpg></LI>
      <LI><IMG 
    src="D:\1\2\50081.gif"   name=2.jpg></LI>
      <LI><IMG
    src="D:\1\2\50081.gif"   name=3.jpg></LI>
      <LI><IMG 
    src="D:\1\2\50081.gif"  name=4.jpg></LI>
      <LI><IMG 
    src="D:\1\2\50081.gif"   name=1393/bf737c18-c45f-48a0-abad-d15754050b36.jpg></LI></UL></DIV><SCRIPT src="d:\1\2\jquery-plugins-v2.js" type=text/javascript></SCRIPT></BODY></HTML>
      

  3.   

    jquery-plugins-v2.js// JavaScript plugins
    /*----jquery.jqzoom.js----*/
    // jqZoom version 2.2
    (function($){
    $.fn.jqueryzoom = function(options){
    var settings = {
    xzoom: 200, //zoomed width default width
    yzoom: 200, //zoomed div default width
    offset: 10, //zoomed div default offset
    position: "right" ,//zoomed div default position,offset position is to the right of the image
    lens:1, //zooming lens over the image,by default is 1;
    preload: 1
    };
    if(options) {
    $.extend(settings, options);
    }