Home >Web Front-end >JS Tutorial >jQuery plug-in bxSlider implements responsive focus map_jquery

jQuery plug-in bxSlider implements responsive focus map_jquery

WBOY
WBOYOriginal
2016-05-16 16:04:371244browse

Excellent responsive jQuery focus map plug-in bxSlider, excellent responsive layout design jQuery plug-in, adaptive
Suitable for any device, switching content can be video, picture, HTML, support touch devices, custom function
callback, supports numerous parameter custom configurations, and the browser supports Firefox, Chrome, Safari,
iOS, Android, IE7.

jQuery plug-in bxSlider implements responsive focus map_jquery

Usage:

1. Load jQuery and plug-ins

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

2.HTML content

<ul class="bxslider"> 
 <li><img  src="/images/pic1.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> 
 <li><img  src="/images/pic2.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> 
 <li><img  src="/images/pic3.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> 
 <li><img  src="/images/pic4.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> 
</ul> 

3. Function call

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

Please customize the function option configuration.
View DEMO Official website download

The above is the entire content of this article, I hope you all like it

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn