jquery slider show carouFredSel

昨天看到一个网站上使用了图片横排，自动显示的功能，觉得很炫，很想研究下，就研究了一下，发现用jquery的插件做很简单。

1.使用插件carouFredSel，

View Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery.carouFredSel-6.2.0.js" language="javascript"></script>
    <script src="Scripts/jquery.carouFredSel-6.2.0-packed.js" language="javascript"></script>
     <link href="~/Styles/1.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#slider').carouFredSel({
                items:3, 
                auto:true
        }); 
    });
    </script>
   <style>
        #maindiv
        {
            margin-left:200px;
            margin-top:100px;
            width:960px; 
            overflow:hidden;
        }
        .mainimag
        {
            height:535px;
            width:4000px;  
            position:relative;
        }
        #prev
        {
           top:300px;
           position:absolute;
        }
       
        #prefix
        {
            width:960px;
        }
        #next
        {
            top:300px;
            right:280px;
            position:absolute;
        }
   </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="maindiv">
        <div class="mainimag" id="slider">
             
             <img id="slider1" src="images/1.jpg"/>
             <img id="slider2" src="images/2.jpg" />
             <img id="slider3" src="images/3.jpg"/>
             <img id="slider4" src="images/4.jpg"/>
            
        </div>
        <div id="prefix" >
         <img id="prev" src="images/previous.png"/>
          <img id="next" src="images/next.png"/>
        </div>
    </div>
    </form>
</body>
</html>

实例在附件中。实例如此网站http://fiveplus.trendy-global.com/html/cn/default.html#