2019獨角獸企業重金招聘Python工程師標準>>>

使用了網上的一個JS插件，配置起來相當靈活好用，效果如下：

下面整理下使用的過程：

1.在插件網站http://www.gmarwaha.com上下載插件jcarousellite_1.0.1.min.js，既然說了是jquery圖片滾動效果，引入jquery是必須的，可以在頁面上引入：

<script src="jquery-1.4.2.min.js"></script> <script src="jcarousellite_1.0.1.min.js" ></script> 2.在div中引入圖片： <!--圖片左移動--> <a class="prev" href="#"><img border="0" src="imageLeft.gif"/></a> <!--圖片右移動--> <a class="next" href="#"><img border="0" src="imageRight.gif"/></a> <div class="anyClass"><ul><li><a href="#" target="_blank"><img src="1.jpg" width="100" height="50"/></a></li><li><a href="#" target="_blank"><img src="2.jpg" width="100" height="50"/></a></li><li><a href="#" target="_blank"><img src="3.jpg" width="100" height="50"/></a></li></ul> </div> 3.接下來就是最后一步，在初始化的時候添加onclick事件： $(function() {$(".anyClass").jCarouselLite({btnNext: ".next",btnPrev: ".prev",//圖片數visible: 4}); }); 4.現在整個頁面基本可以切換了，但是有個問題就是樣式也就是CSS的問題，這個只能靠自己去根據實際情況調試了，我做的如下： <style> .anyClass{margin:0 auto; width:790px; height:180px; } </style> 整個做下來調試還是相當容易的，要求很急，大概從找到調試好花了大半個小時的時間。

做下記錄方便自己后面使用的時候再用。

轉載于:https://my.oschina.net/hanweifeng/blog/172531

總結

以上是生活随笔為你收集整理的jQuery 图片滚动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。