基于jquery的circle插件

这是一个轻量级的插件,它基于InnerFade、Slideshow、jqShuffle这几个插件实现。

 

这个插件提供了pause-on-hover、auto-stop、auto-fit、before/after callbacks、click triggers等等效果。

 

下面看个例子。

 

html代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link href="css/cycle.css" type="text/css" rel="stylesheet">
      <style type="text/css">
        pre { display:none }
        #right { cursor: pointer }
        #twtr-search-widget { width: 300px; float: right; margin-left: 20px }
      </style>
      <script src="javascript/jquery-1.2.3.js" type="text/javascript"></script>
      <script src="javascript/jquery.cycle.all.js" type="text/javascript"></script>
      <script src="javascript/jquery.easing.1.1.1.js" type="text/javascript"></script>
      <script type="text/javascript">
        $.fn.cycle.defaults.speed   = 900;
        $.fn.cycle.defaults.timeout = 4000;
        $(function() {
         $('#demos pre code').each(function() {
            eval($(this).text());
          });
        });
      </script>
   </head>
   <body>
   <div id="demos">
    <table cellspacing="20"><tr><td>
        <h2>shuffle</h2>
        <div id="shuffle" class="pics">
           <img src="images/beach1.jpg" width="200" height="200" />
           <img src="images/beach2.jpg" width="200" height="200" />
           <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre>
          <code class="mix">
             $('#shuffle').cycle({
                fx:     'shuffle',
                easing: 'backout',
                delay:  -2000
              });
          </code>
        </pre>
        </td><td>
        <h2>zoom</h2>
        <div id="zoom" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
          $('#zoom').cycle({
            fx:    'zoom',
            sync:  false,
            delay: -2000
          });</code></pre>
        </td><td>
        <h2>fade</h2>
        <div id="fade" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">$('#fade').cycle();</code></pre>
    </td></tr>
    <tr><td>
        <h2>turnDown</h2>
        <div id="slide" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
           $('#slide').cycle({
           fx:      'turnDown',
           delay:   -2000
          });</code></pre>
    </td><td>
        <h2>curtainX</h2>
        <div id="up" class="pics">
           <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
          $('#up').cycle({
          fx:    'curtainX',
          sync:  false,
          delay: -2000
        });</code></pre>
    </td><td>
        <h2>scrollRight (click)</h2>
        <div id="right" class="pics">
            <img src="images/beach1.jpg" width="200" height="200" />
            <img src="images/beach2.jpg" width="200" height="200" />
            <img src="images/beach3.jpg" width="200" height="200" />
        </div>
        <pre><code class="mix">
          $('#right').cycle({
          fx:      'scrollRight',
          next:   '#right',
          timeout:  0,
          easing:  'backinout'
        });</code></pre>
    </td></tr></table>
  </div>
 </body>
</html>

 

具体效果请参见附件。

你可能感兴趣的:(JavaScript,jquery,XHTML,css,UP)