12款经典的白富美型—jquery图片轮播插件—前端开发必备
介绍
jquery图片轮播插件是前端开发中经常会使用的工具，能够帮助我们轻松实现网站中的图片轮播效果。本文将会介绍12款经典的白富美型jquery图片轮播插件，为大家提供轮播插件的详细使用说明及源码下载地址。同时，在本文中也会提供一些示例，以便大家更好地理解如何使用这些插件。
1. Swipebox
Swipebox是一个jQuery插件，它可以用于创建类似于lightbox的自定义图像浏览器，并支持触摸手势。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.swipebox/1.4.4/css/swipebox.css">
<title>Swipebox Demo</title>
</head>
<body>
<a href="http://placehold.it/800x600" class="swipebox" title="My Caption">
<img src="http://placehold.it/300x300" />
</a>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.swipebox/1.4.4/js/jquery.swipebox.min.js"></script>
<script>
$(document).ready(function() {
$('.swipebox').swipebox();
});
</script>
</body>
</html>
2. FlexSlider
FlexSlider是一款响应式的、轻量级且易于使用的自适应图片轮播插件。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/flexslider/2.6.3/flexslider.css">
<title>FlexSlider Demo</title>
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/800x600" />
</li>
<li>
<img src="http://placehold.it/800x600" />
</li>
<li>
<img src="http://placehold.it/800x600" />
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function() {
$('.flexslider').flexslider();
});
</script>
</body>
</html>
3. bxSlider
bxSlider是一款快速、响应式且灵活的jQuery滑块插件，它支持水平/垂直、fade模式、自定义滑动容器的宽度和高度等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<title>bxSlider Demo</title>
</head>
<body>
<ul class="bxslider">
<li><img src="http://placehold.it/800x600" /></li>
<li><img src="http://placehold.it/800x600" /></li>
<li><img src="http://placehold.it/800x600" /></li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function() {
$('.bxslider').bxSlider();
});
</script>
</body>
</html>
4. Slick
Slick是一款响应式的、无限循环的、易于使用的jQuery幻灯片插件，它支持自适应容器大小、多种滑块风格和自定义滑块容器等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<title>Slick Demo</title>
</head>
<body>
<div class="slider">
<div><img src="http://placehold.it/800x600" /></div>
<div><img src="http://placehold.it/800x600" /></div>
<div><img src="http://placehold.it/800x600" /></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
$(document).ready(function() {
$('.slider').slick();
});
</script>
</body>
</html>
5. OwlCarousel2
Owl Carousel 2是一款高度可定制、响应式的Swipe幻灯片插件，它支持自动播放、无限循环、自适应高度等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.owlcarousel2/2.3.4/assets/owl.carousel.min.css"/>
<title>Owl Carousel 2 Demo</title>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/800x600" /></div>
<div class="item"><img src="http://placehold.it/800x600" /></div>
<div class="item"><img src="http://placehold.it/800x600" /></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.owlcarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
</script>
</body>
</html>
6. jssor Slider
jssor Slider是一款高度可定制、响应式的javascript幻灯片插件，它支持无限循环、响应式设计、自定义滑块容器等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jssor.slider/27.5.0/jsor.slider.css"/>
<title>jssor Slider Demo</title>
</head>
<body>
<div id="slider1_container" style="position: relative; width: 800px; height: 600px;">
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 600px;">
<div><img u="image" src="http://placehold.it/800x600" /></div>
<div><img u="image" src="http://placehold.it/800x600" /></div>
<div><img u="image" src="http://placehold.it/800x600" /></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jssor.slider/27.5.0/jsor.slider.min.js"></script>
<script>
$(document).ready(function() {
var options = {
$AutoPlay: true,
$AutoPlayInterval: 4000,
$SlideDuration: 500,
$DragOrientation: 3,
$ArrowKeys: true,
$SlideEasing: $Jease$.$Linear,
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$Rows: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
</body>
</html>
7. Tiny Slider
Tiny Slider是一款轻量级的、高性能的幻灯片/滑块插件，它支持触摸和拖放、自定义切换效果、自适应容器、自定义滑块容器等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/tiny-slider/2.9.3/tiny-slider.css"/>
<title>Tiny Slider Demo</title>
</head>
<body>
<div class="slider">
<div><img src="http://placehold.it/800x600" /></div>
<div><img src="http://placehold.it/800x600" /></div>
<div><img src="http://placehold.it/800x600" /></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/tiny-slider/2.9.3/min/tiny-slider.js"></script>
<script>
$(document).ready(function() {
var slider = tns({
container: '.slider',
items: 1,
slideBy: 'page',
autoplay: true,
controls: true,
mouseDrag: true,
loop: true,
swipAngle: false
});
});
</script>
</body>
</html>
8. Swiper
Swiper是一款现代的、响应式的、高度可定制的JavaScript幻灯片插件，支持触摸手势、无限循环、自定义容器等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/swiper/5.4.5/swiper.css"/>
<title>Swiper Demo</title>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://placehold.it/800x600" /></div>
<div class="swiper-slide"><img src="http://placehold.it/800x600" /></div>
<div class="swiper-slide"><img src="http://placehold.it/800x600" /></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/swiper/5.4.5/swiper.min.js"></script>
<script>
$(document).ready(function() {
var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
});
</script>
</body>
</html>
9. Cycle2
Cycle2是一款简单易用的jQuery幻灯片插件，它支持自动播放、无限循环、自定义切换效果等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.cycle2/2.1.6/jquery.cycle2.css"/>
<title>Cycle2 Demo</title>
</head>
<body>
<div class="slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<img src="http://placehold.it/800x600" />
<img src="http://placehold.it/800x600" />
<img src="http://placehold.it/800x600" />
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script>
$(document).ready(function() {
$('.slideshow').cycle();
});
</script>
</body>
</html>
10. Superslides
Superslides是一款响应式的jQuery全屏插件，它具有自适应容器、自定义切换动画、音频/视频支持等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/superslides/0.6.3/stylesheets/superslides.css"/>
<title>Superslides Demo</title>
</head>
<body>
<div id="slides">
<div class="slides-container">
<img src="http://placehold.it/800x600" />
<img src="http://placehold.it/800x600" />
<img src="http://placehold.it/800x600" />
</div>
<nav class="slides-navigation">
<a href="#" class="next"></a>
<a href="#" class="prev"></a>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/superslides/0.6.3/jquery.superslides.min.js"></script>
<script>
$(document).ready(function() {
$('#slides').superslides({
play: true,
pagination: false
});
});
</script>
</body>
</html>
11. Glider.js
Glider.js是一款现代的、响应式的、轻量级的幻灯片/轮播插件，它具有丰富的API和回调、滑块高度自适应、自动播放等功能。
```html
