jQuery炫酷轮播图插件previewSlider.js
previewSlider.js
插件介绍
previewSlider
是一款带预览效果的炫酷js
轮播图插件。该轮播图在鼠标悬停到前后导航按钮上时,会出现展示缩略图按钮,点击后可以展示所有图片。点击任意缩略图则可以将其放大到全屏进行展示。
previewSlider.js
插件使用方法
-
首先是在页面中引入
preview-slider.min.css
和preview-slider.min.js
文件。
<link rel="stylesheet" href="css/preview-slider.min.css">
<script src="js/preview-slider.min.js"></script>
-
在
HTML
中有基本的结构
<div class="preview-slider">
<div class="slider-wrapper">
<img class="slider-item" src="img/img1.jpg" alt=""></div>
<img class="slider-item" src="img/img2.jpg" alt=""></div>
<img class="slider-item" src="img/img3.jpg" alt=""></div>
</div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-left"></div>
</div>
-
初始化插件:在页面
DOM
元素加载完毕之后,通过下面的方法来初始化该轮播图插件。
new previewSlider({
container: '.preview-slider',
arrowLeft: '.preview-slider .arrow-left',
arrowRight: '.preview-slider .arrow-right',
});
previewSlider.js
插件使用参数配置
轮播图有几个参数可以配置,用于实验不同的效果
- container:轮播图的容器。
- arrowLeft:向前的导航按钮。
- arrowRight:向后的导航按钮。
- content:如果是true则表示使用div作为轮播图,否则使用img作为轮播图。
- scale:缩略图的缩放比例,默认为0.4。
- scrollSpeed:预览缩略图的滚动速度,默认为4。
previewSlider.js
插件使用案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带预览效果的炫酷js轮播图插件|DEMO_jQuery之家-*分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式,使用时可以不引用-->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/preview-slider.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- <div class="htmleaf-container">
<header class="htmleaf-header">
<h1>带预览效果的炫酷js轮播图插件 <span>previewSlider is a responsive fullscreen image slider</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201903065552.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
</div> -->
<div class="preview-slider">
<div class="slider-wrapper">
<div class="slider-item" style="background-image: url(img/img4.jpg)"></div>
<div class="slider-item" style="background-image: url(img/img1.jpg)"></div>
<div class="slider-item" style="background-image: url(img/img6.jpg)"></div>
<div class="slider-item" style="background-image: url(img/img3.jpg)"></div>
<div class="slider-item" style="background-image: url(img/img5.jpg)"></div>
<div class="slider-item" style="background-image: url(img/img2.jpg)"></div>
</div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-left"></div>
<div class="slider-desc">
<p class="title">True Detective</p>
<span class="desc">True Detective is an American crime drama television series <br>
created and written by Nic Pizzolatto. The series is broadcast <br>
by the premium cable network HBO in the United States.</span>
</div>
</div>
<script src="js/preview-slider.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
效果为:
previewSlider.js
插件相关资源离线下载
地址为:previewSlider.js
插件相关资源下载,提货码为:m27j