jQuery炫酷轮播图插件previewSlider.js

最新推荐文章于 2024-05-17 01:50:40 发布

阳光下的冷静

最新推荐文章于 2024-05-17 01:50:40 发布

阅读量2k

点赞数 3

分类专栏： jQuery jQuery插件使用文章标签： jQuery插件 jQuery轮播图插件 previewSlider.js jQuery轮播图插件资源下载

本文链接：https://blog.csdn.net/m0_37686205/article/details/88916752

版权

jQuery 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

jQuery插件使用

9 篇文章 0 订阅

订阅专栏

`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

阳光下的冷静

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery炫酷轮播图插件previewSlider.js

previewSlider.js插件介绍previewSlider是一款带预览效果的炫酷js轮播图插件。该轮播图在鼠标悬停到前后导航按钮上时，会出现展示缩略图按钮，点击后可以展示所有图片。点击任意缩略图则可以将其放大到全屏进行展示。previewSlider.js插件使用方法首先是在页面中引入preview-slider.min.css和preview-slider.min.js文件。...
复制链接

扫一扫