首页>>Jquery图片>>各种不同演示的图片滚动(2013-12-17)

各种不同演示的图片滚动

包括是否可以循环,设置默认显示位置等不同情形

各种不同演示的图片滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.     function example(id) {  
  3.       document.write(  
  4.         '<div class="example" id="' + id + '">' +  
  5.           '<div>' +  
  6.             '<ul>' +  
  7.               '<li><img src="images/1.jpg" width="160" height="160"></li>' +  
  8.               '<li><img src="images/2.jpg" width="160" height="160"></li>' +  
  9.               '<li><img src="images/3.jpg" width="160" height="160"></li>' +  
  10.               '<li><img src="images/4.jpg" width="160" height="160"></li>' +  
  11.               '<li><img src="images/5.jpg" width="160" height="160"></li>' +  
  12.               '<li><img src="images/6.jpg" width="160" height="160"></li>' +  
  13.               '<li><img src="images/7.jpg" width="160" height="160"></li>' +  
  14.               '<li><img src="images/8.jpg" width="160" height="160"></li>' +  
  15.               '<li><img src="images/9.jpg" width="160" height="160"></li>' +  
  16.               '<li><img src="images/10.jpg" width="160" height="160"></li>' +  
  17.               '<li><img src="images/11.jpg" width="160" height="160"></li>' +  
  18.               '<li><img src="images/12.jpg" width="160" height="160"></li>' +  
  19.               '<li><img src="images/13.jpg" width="160" height="160"></li>' +  
  20.               '<li><img src="images/14.jpg" width="160" height="160"></li>' +  
  21.             '</ul>' +  
  22.           '</div>' +  
  23.         '</div>'  
  24.       );  
  25.     }  
  26.   </script>  

 

XML/HTML Code
  1.   <h3>Defaults</h3>  
  2.   
  3.   <div class="demo">  
  4.     <p><code class="prettyprint">$('#default').microfiche();</code></p>  
  5.     <script>example('default')</script>  
  6.     <script>$('#default').microfiche()</script>  
  7.   </div>  
  8.   
  9.   <h3>Options</h3>  
  10.   
  11.   <div class="demo">  
  12.     <p><code class="prettyprint">$('#cyclic').microfiche({ cyclic: true });</code></p>  
  13.     <script>example('cyclic')</script>  
  14.     <script>$('#cyclic').microfiche({ cyclic: true })</script>  
  15.   </div>  
  16.   
  17.   <div class="demo">  
  18.     <p><code class="prettyprint">$('#buttons').microfiche({ buttons: false });</code></p>  
  19.     <script>example('buttons')</script>  
  20.     <script>$('#buttons').microfiche({ buttons: false })</script>  
  21.   </div>  
  22.   
  23.   <div class="demo">  
  24.     <p><code class="prettyprint">$('#bullets').microfiche({ bullets: false });</code></p>  
  25.     <script>example('bullets')</script>  
  26.     <script>$('#bullets').microfiche({ bullets: false })</script>  
  27.   </div>  
  28.   
  29.   <div class="demo">  
  30.     <p><code class="prettyprint">$('#keyboard').microfiche({ keyboard: true });</code></p>  
  31.     <script>example('keyboard')</script>  
  32.     <script>$('#keyboard').microfiche({ keyboard: true })</script>  
  33.   </div>  
  34.   
  35.   <div class="demo">  
  36.     <p><code class="prettyprint">$('#click').microfiche({ clickToAdvance: true });</code></p>  
  37.     <script>example('click')</script>  
  38.     <script>$('#click').microfiche({ clickToAdvance: true })</script>  
  39.   </div>  
  40.   
  41.   <h3>Commands</h3>  
  42.   <p>Commands are passed to the microfiche method as options, and may be passed at any point.<br>  
  43.   In this example, the <code class="prettyprint">slideByPages(1)</code> command is performed immediately  
  44.   after Microfiche has finished setting up.</p>  
  45.   
  46.   <div class="demo">  
  47.     <p><code class="prettyprint">$('#commands').microfiche({ slideByPages: 1 });</code></p>  
  48.     <script>example('commands')</script>  
  49.     <script>$('#commands').microfiche({ slideByPages: 1 })</script>  
  50.     <p>  
  51.       <button onClick="$('#commands').microfiche({ slideByPages: -1 }); return false;">Run →</button> <code class="prettyprint">$('#commands').microfiche({ slideByPages: -1 })</code><br>  
  52.       <button onClick="$('#commands').microfiche({ slideByPages: 1 }); return false;">Run →</button> <code class="prettyprint">$('#commands').microfiche({ slideByPages: 1 })</code><br>  
  53.       <button onClick="$('#commands').microfiche({ slideToPoint: 0 }); return false;">Run →</button> <code class="prettyprint">$('#commands').microfiche({ slideToPoint: 0 })</code><br>  
  54.       <button onClick="$('#commands').microfiche({ jumpToPoint: 0 }); return false;">Run →</button> <code class="prettyprint">$('#commands').microfiche({ jumpToPoint: 0 })</code><br>  
  55.       <button onClick="$('#commands').microfiche({ jumpToPage: 2 }); return false;">Run →</button> <code class="prettyprint">$('#commands').microfiche({ jumpToPage: 2 })</code>  
  56.     </p>  
  57.   </div>  
  58.   
  59.   <h3>Events</h3>  
  60.   <p>Microfiche emits the following events:</p>  
  61.   <ul>  
  62.     <li><code class="prettyprint">'microfiche:willMove'</code></li>  
  63.     <li><code class="prettyprint">'microfiche:didMove'</code></li>  
  64.   </ul>  
  65.   <p>You can listen for them in the usual way:</p>  
  66.   
  67.   <div class="demo">  
  68.     <p><pre class="prettyprint">  
  69. $('#events').microfiche().on('microfiche:willMove microfiche:didMove', function(event) {  
  70.   $('#events-console').html(event.type);  
  71. });  
  72. </pre></p>  
  73.     <script>example('events')</script>  
  74.     <script>  
  75.       $('#events').microfiche().on('microfiche:willMove microfiche:didMove', function(event) {  
  76.         $('#events-console').html(event.type);  
  77.       });  
  78.     </script>  
  79.     <p><strong>Event received:</strong> <code id="events-console">-</code></p>  
  80.   </div>  
  81.   
  82.   <h3>Talking to Microfiche Directly</h3>  
  83.   
  84.   <p>Microfiche has some useful methods that return values, and so cannot  
  85.   be used through the aforementioned jQuery style syntax. The microfiche  
  86.   object itself is available via jQuery’ <code>data</code> method.</p>  
  87.   
  88.   <p><code class="prettyprint">$('.my-element').data('microfiche');</code></p>  
  89.   
  90.   <h3>Methods</h3>  
  91.   
  92. <div class="demo">  
  93.   <p><pre class="prettyprint">  
  94. var m = $('#methods').microfiche().data('microfiche');  
  95. m.currentPageIndex() // returns 0-index of the current page  
  96. m.totalPageCount() // returns the number of pages as an integer  
  97. m.min() // returns the minimum (left-most) position  
  98. m.max() // returns the maximum (right-most) position  
  99.   </pre></p>  
  100.   <script>example('methods')</script>  
  101.   <script>  
  102.     var m = $('#methods').microfiche().data('microfiche');  
  103.     document.write('<pre class="prettyprint">' +  
  104.       'currentPageIndex: ' + m.currentPageIndex() + '<br>' +  
  105.       '  totalPageCount: ' + m.totalPageCount() + '<br>' +  
  106.       '             min: ' + m.min() + '<br>' +  
  107.       '             max: ' + m.max() +  
  108.     '</pre>');  
  109.   </script>  
  110. </div>  
  111.   
  112.   <h3>Autoplay</h3>  
  113.   
  114.   <p>To have Microfiche pause rotation when the user hovers over the  
  115.   carousel, set <code>autopause</code> to <code>true</code>.</p>  
  116.   
  117.   <div class="demo">  
  118.     <p><pre class="prettyprint">  
  119. $('#autoplay').microfiche({  
  120.   cyclic: true,  
  121.   autoplay: 3,  
  122.   autopause: true  
  123. });  
  124.     </pre></p>  
  125.     <script>example('autoplay')</script>  
  126.     <script>  
  127.       $('#autoplay').microfiche({ cyclic: true, autoplay: 3, autopause: true });  
  128.     </script>  
  129.   </div>  
  130.   
  131.   <script>prettyPrint()</script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_175.html