jquery slider show carouFredSel

Myth丶恋晨 2021-11-06 01:20 212阅读 0赞

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

1.使用插件carouFredSel，

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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\#

转载于:https://www.cnblogs.com/recordlife/archive/2013/04/09/3009936.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211104/f6acc7425ba14371af7ac96b51b724a4.png