代码

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Test.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
   
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<div>http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/index.html</div>
    <link rel="stylesheet" href="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/css/style.css" type="text/css" media="screen" charset="utf-8">
 
 <script src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
     $(function() {

         var totalPanels = $(".scrollContainer").children().size();

         var regWidth = $(".panel").css("width");
         var regImgWidth = $(".panel img").css("width");
         var regTitleSize = $(".panel h2").css("font-size");
         var regParSize = $(".panel p").css("font-size");

         var movingDistance = 300;

         var curWidth = 350;

         var curImgWidth = 326;
         var curTitleSize = "20px";
         var curParSize = "15px";

         var $panels = $('#slider .scrollContainer > div');
         var $container = $('#slider .scrollContainer');

         $panels.css({ 'float': 'left', 'position': 'relative' });

         $("#slider").data("currentlyMoving", false);

         $container
  .css('width', ($panels[0].offsetWidth * $panels.length) + 100)
  .css('left', "-350px"); /* for middle image */

         var scroll = $('#slider .scroll').css('overflow', 'hidden');

         function returnToNormal(element) {
             $(element)
   .animate({ regWidth })
   .find("img")
   .animate({ regImgWidth })
      .end()
   .find("h2")
   .animate({ fontSize: regTitleSize })
   .end()
   .find("p")
   .animate({ fontSize: regParSize });
         };

         function growBigger(element) {
             $(element)
   .animate({ curWidth })
   .find("img")
   .animate({ curImgWidth })
      .end()
   .find("h2")
   .animate({ fontSize: curTitleSize })
   .end()
   .find("p")
   .animate({ fontSize: curParSize });
         }

         //direction true = right, false = left
         function change(direction) {

             //if not at the first or last panel
             if ((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }

             //if not currently moving
             if (($("#slider").data("currentlyMoving") == false)) {

                 $("#slider").data("currentlyMoving", true);

                 var next = direction ? curPanel + 1 : curPanel - 1;
                 var leftValue = $(".scrollContainer").css("left");
                 var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;

                 $(".scrollContainer")
    .stop()
    .animate({
        "left": movement
    }, function() {
        $("#slider").data("currentlyMoving", false);
    });

                 returnToNormal("#panel_" + curPanel);
                 growBigger("#panel_" + next);

                 curPanel = next;

                 //remove all previous bound functions
                 $("#panel_" + (curPanel + 1)).unbind();

                 //go forward
                 $("#panel_" + (curPanel + 1)).click(function() { change(true); });

                 //remove all previous bound functions               
                 $("#panel_" + (curPanel - 1)).unbind();

                 //go back
                 $("#panel_" + (curPanel - 1)).click(function() { change(false); });

                 //remove all previous bound functions
                 $("#panel_" + curPanel).unbind();
             }
         }

         // Set up "Current" panel and next and prev
         growBigger("#panel_3");
         var curPanel = 3;

         $("#panel_" + (curPanel + 1)).click(function() { change(true); });
         $("#panel_" + (curPanel - 1)).click(function() { change(false); });

         //when the left/right arrows are clicked
         $(".right").click(function() { change(true); });
         $(".left").click(function() { change(false); });

         $(window).keydown(function(event) {
             switch (event.keyCode) {
                 case 13: //enter
                     $(".right").click();
                     break;
                 case 32: //space
                     $(".right").click();
                     break;
                 case 37: //left arrow
                     $(".left").click();
                     break;
                 case 39: //right arrow
                     $(".right").click();
                     break;
             }
         });

     });</script>
 <link rel="stylesheet" type="text/css" href="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/fancybox/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
 <script type="text/javascript" src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/fancybox/fancybox/jquery.fancybox-1.2.6.pack.js%22%3E%3C/script>
 <script type="text/javascript">
  $(document).ready(function() {
   $("a.zoom2").fancybox({
    'zoomSpeedIn'  : 500,
    'zoomSpeedOut'  : 500,
    'overlayOpacity' : 0.6,
    'overlayColor'  : '#000'
   });
  });
 </script>
    <div id="slider-outer" >
 <!-- Slider Starts -->
  <div id="slider">   
    <img class="scrollButtons left" src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/images/arrow-left.png" alt="" />
  <!-- Scroll Starts Here -->
   <div style="overflow: hidden;" class="scroll"> 
   <!-- Scroll Container Starts -->
    <div class="scrollContainer"> 
    
                 <!-- Panel Starts -->
     
    <!-- Panel Ends -->
               
               
<%string[] str = ViewData["Message"] as string[]; string[] strTitle = ViewData["strTitle"] as string[]; string[] strCurrentPrice = ViewData["strCurrentPrice"] as string[];
for (int i = 0; i < str.Length; i++)
{ %>
       
       
<div class="panel" id="panel_<%=i+1 %>">
<!-- Panel Inside Starts -->
    <div class="inside">
    <!-- Image Starts -->
        <img src="<%=str[i] %>" alt="<%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %>" />
        <p>
            <a class="zoom2" target="_blank" rel="group6"title='<%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %>'><%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %></a>
        </p>
    <!-- Image Ends -->
    </div>
<!-- Panel Inside Ends -->
</div>
   <%} %>
 
  
    
         
    </div>
 
   <!-- SCroll Container Ends -->
   </div>
  <!-- Scroll Ends Here -->
    <img class="scrollButtons right" src="http://webdesignandsuch.com/posts/jquery-product-slider/jQuery-productSlider/images/arrow-right.png" alt="right" />           
   </div>
 <!-- Slider Ends -->
 </div>

</asp:Content>