网页图片切换代码

Why should I use this slider?

• Fully responsive - will adapt to any device
• Horizontal, vertical, and fade modes
• Slides can contain images, video, or HTML content
• Advanced touch / swipe support built-in
• Uses CSS transitions for slide animation (native hardware acceleration!)
• Full callback API and public methods
• Small file size, fully themed, simple to implement
• Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
• Tons of configuration options

How to install

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

<!-- jQuery library (served from Google) --><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- bxSlider Javascript file --><scriptsrc="/js/jquery.bxslider.min.js"></script><!-- bxSlider CSS file --><link href="/lib/jquery.bxslider.css"rel="stylesheet" />

Step 2: Create HTML markup

Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><imgsrc="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li></ul>

Step 3: Call the bxSlider

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){ $('.bxslider').bxSlider();});

Check the examples and FAQs for more information on installation and customization