jquery flexslider轮播
生活随笔
收集整理的這篇文章主要介紹了
jquery flexslider轮播
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
引用jquery;flexslider;
關于flexslider的使用使用前往http://www.woothemes.com/flexslider/，包括flexslider的樣式表
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>輪播</title></head><style>* {margin: 0;padding: 0;}body {font: normal 12px "Microsoft Yahei", arial, helvetica, clean, sans-serif;color: #333333;}fieldset, img {border: 0;}img {height: 500px;}.container {margin: 0 auto;width: 1000px;padding: 0;}.left {float: left;}.right {float: right;}.demo_15 .flexslider_demo_15 {height: 520px;}</style><!-- 引入滾動條插件樣式 --><!-- 引入jq --><script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!-- 引入幻燈片插件flexslider.js/flexslider.css下載地址：http://www.woothemes.com/flexslider/ --><link rel="stylesheet" type="text/css" href="./flexslider.css" /><script type="text/javascript" src="./jquery.flexslider-min.js"></script><script type="text/javascript">jQuery.noConflict();(function($) {$(document).ready(function() {$('.demo_15 .flexslider_demo_15').flexslider({animation: "slide",controlNav: true,slideshow: false,directionNav: true,prevText: "",nextText: ""});});})(jQuery);</script><body><!--輪播--><div class="container"><div class="demo demo_15"><div class="demo_c"><!-- 輪播內容開始 --><div class="flexslider flexslider_demo_15"><ul class="slides"><li><a href="javascript:;"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></a><div class="bottom"><div class="left"><p>第<span>01</span>張</p></div><div class="right"><a href="javascript:;">百度1</a></div></div></li><li><a href="javascript:;"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></a><div class="bottom"><div class="left"><p>第<span>02</span>張</p></div><div class="right"><a href="javascript:;">百度2</a></div></div></li><li><a href="javascript:;"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></a><div class="bottom"><div class="left"><p>第<span>03</span>張</p></div><div class="right"><a href="javascript:;">百度3</a></div></div></li></ul></div><!-- 輪播內容結束--></div></div></div></body></html>| animation | 動畫效果類型，有"fade"：淡入淡出，"slide"：滑動?? ? | "fade" |
| easing | 內容切換時緩動效果，需要jquery easing插件支持?? ? | "swing" |
| direction | 內容滾動方向，有"horizontal"：水平方向 和"vertical"：垂直方向 | "horizontal" |
| animationLoop | 是否循環滾動 | true |
| startAt | 初始滑動時的起始位置，定位從第幾個開始滑動 | 0 |
| slideshow | 是否自動滑動 | true |
| slideshowSpeed | 滑動內容展示時間(ms) | 7000 |
| animationSpeed | 內容切換時間(ms) | 600 |
| initDelay | 初始化時延時時間 | 0 |
| pauseOnHover | 鼠標滑向滾動內容時，是否暫停滾動 | false |
| touch | 是否支持觸摸滑動 | true |
| directionNav | 是否顯示左右方向箭頭按鈕 | true |
| keyboard | 是否支持鍵盤方向鍵操作 | true |
| minItems | 一次最少展示滑動內容的單元個數 | 1 |
| maxItems | 一次最多展示滑動內容的單元個數 | 0 |
| move | 一次滑動的單元個數 | 0 |
| 回調函數 | start:? ? ? ? ? function(){},? before:? ? ? ?function(){}, after:? ? ? ? ? function(){},? end:? ? ? ? ? ?function(){},? added:? ? ? ? function(){},? removed:? ? function(){},? init:? ? ? ? ? ? ?function(){}, | ? |
掃碼關注微信公眾號，持續更新干貨
總結
以上是生活随笔為你收集整理的jquery flexslider轮播的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MOS管应用详解
- 下一篇： Kettle（ETL利器）实战应用大全