使用 jQuery 封装一个渐隐式轮播效果插件。
效果图：
兼容性：
兼容性
插件参数说明：
- autoPlay：自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
- speed：切换速度（单位ms）。
- initialItem：初始化轮播元素索引，类型：number。
- pagination：分页位置，类型：HTML 标签。
- paginationNum：是否显示数字分页，类型：boolean，true 显示数字分页。
- paginationClickable：点击分页是否切换，类型：boolean，true 可以切换。
- arrow_left：切换到上一个轮播元素，类型：HTML 标签。
- arrow_right：切换到下一个轮播元素，类型：HTML 标签。
HTML
<div class="slide_container slide_demo">
<div class="slide_wrapper">
<div class="slide_item" style="background-color: #4390ee;">item1</div>
<div class="slide_item" style="background-color: #ff8604;">item2</div>
<div class="slide_item" style="background-color: #49a430;">item3</div>
</div>
<div class="pagination"></div>
<div class="arrow">
<i class="arrow_left">left</i>
<i class="arrow_right">right</i>
</div>
</div>
CSS
.slide_container { position: relative; width: 600px; margin: 20px auto; }
.slide_item { font-size: 24px; line-height: 250px; position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; text-align: center; }
.pagination { position: absolute; z-index: 1; bottom: 20px; width: 100%; text-align: center; }
.pagination span { display: inline-block; width: 20px; height: 20px; margin: 0 10px; cursor: pointer; border-radius: 50%; background-color: #fff; }
.pagination .active { background-color: #adadad; }
.arrow i { position: absolute; z-index: 1; top: 50%; display: inline-block; cursor: pointer; }
.arrow .arrow_left { left: 20px; }
.arrow .arrow_right { right: 20px; }
JS调用
<script src="jquery-1.8.3.min.js"></script>
<script src="LKSlideshow.js"></script>
<script>
$(function() {
$(".slide_demo").LKSlideshow({
autoPlay:3000,
speed: 500,
initialItem: 3,
pagination: ".pagination",
paginationNum: false,
paginationClickable: true,
arrow_left: ".arrow_left",
arrow_right: ".arrow_right"
});
});
</script>
JS封装插件
LKSlideshow.js
/**
* Title: LKSlideshow
* Version: 1.1.1
* Description: plugin
* Author: LiuZhenghe
* Date: 2019-01-03
*/
(function($) {
// What does the LKSlideshow plugin do?
$.fn.LKSlideshow = function(options) {
if (!this.length) {
return this;
};
var opts = $.extend(true, {}, $.fn.LKSlideshow.defaults, options);
this.each(function() {
var $this = $(this);
var slide_container = $(this).find('.slide_container');
var slide_wrapper = $(this).find('.slide_wrapper');
var slide_item = $(this).find('.slide_item');
var pagination = $(opts.pagination);
var paginationNum = opts.paginationNum;
var paginationClickable = opts.paginationClickable;
var page_text = "";
var item_length = slide_item.length;
var arrow_left = $(opts.arrow_left);
var arrow_right = $(opts.arrow_right);
var autoPlay;
var speed = opts.speed; // 切换速度
var initialItem = opts.initialItem; // 初始化索引
// 不设置初始化索引值，或设置的值超过轮播元素的个数，默认为0。
if (initialItem == null || initialItem > item_length - 1) {
initialItem = 0;
};
// 设置初始化显示与隐藏的元素。
slide_item.eq(initialItem).animate({
opacity: "1"
}, 0);
slide_item.eq(initialItem).siblings().animate({
opacity: "0"
}, 0);
// 动态设置轮播区域高度
var slide_height = slide_item[0].clientHeight;
slide_wrapper.css('height', slide_height);
// 分页相关设置
// 当不设置 paginationNum 的值或设置为 true 时，分页中添加数字。
if (paginationNum != true) {
for (var i = 1; i <= item_length; i++) {
page_text += "<span></span>";
};
} else {
for (var i = 1; i <= item_length; i++) {
page_text += "<span>" + i + "</span>";
};
};
// 动态添加分页
pagination.html(page_text);
// 给分页加当前样式
var pagination_list = pagination.children('span');
for (var i = 0; i < pagination_list.length; i++) {};
$(pagination_list[initialItem]).addClass('active');
// 切换主方法：
// 传入两个参数：tag,page_index。
// tag："0"表示点击左箭头，"1"表示点击右箭头，"2"表示点击分页。
// page_index：在主方法中无法获取被点击元素的索引值，永远是-1，所以需要传入一个参数来获得。
function slideMove(tag, page_index) {
// 清除定时器
// 不清除定时器，就会创建出多个定时器，切换速度会越来越快。
clearInterval(autoPlay);
slide_item.stop(true, true); // 清除多次点击事件
// 点击左箭头执行事件
if (tag == 0) {
initialItem--;
if (initialItem < 0) {
initialItem = item_length - 1;
};
};
// 点击右箭头执行事件
if (tag == 1) {
initialItem++;
if (initialItem > item_length - 1) {
initialItem = 0;
};
};
// 点击分页执行事件
if (tag == 2) {
initialItem = page_index;
};
// 切换效果
slide_item.eq(initialItem).animate({
opacity: "1"
}, speed);
slide_item.eq(initialItem).siblings().animate({
opacity: "0"
}, speed);
pagination_list.eq(initialItem).siblings().removeClass('active');
pagination_list.eq(initialItem).addClass('active');
// 自动轮播2
// 当前位置改变后再次触发右箭头点击事件，此时就可以一直循环点击事件。
if (typeof(opts.autoPlay) != "number") {
clearInterval(autoPlay);
} else {
autoPlay = setTimeout(function() {
slideMove(1);
}, opts.autoPlay);
};
};
// 自动轮播1
// 触发第一次右箭头点击事件。
// 此处做了一个判断，当调用该插件时，如果不设置 autoPlay 的值或设置为 fales 等其他值时，不执行自动轮播事件。
if (typeof(opts.autoPlay) != "number") {
clearInterval(autoPlay);
} else {
autoPlay = setTimeout(function() {
slideMove(1);
}, opts.autoPlay);
};
// 点击左箭头
arrow_left.click(function(event) {
event.preventDefault();
slideMove(0);
return false;
});
// 点击右箭头
arrow_right.click(function(event) {
event.preventDefault();
slideMove(1);
return false;
});
// 点击分页
// 加一个判断条件：当 paginationClickable 为 true 是，触发分页点击事件，默认无点击事件。
if (paginationClickable == true) {
pagination.on('click', 'span', function(event) {
event.preventDefault();
slideMove(2, $(this).index());
});
};
});
return this;
};
// default options
$.fn.LKSlideshow.defaults = {
autoPlay: null, // 自动轮播
speed: null, // 速度
initialItem: null, // 初始化索引
pagination: null, // 分页
paginationNum: null, // 数字分页
paginationClickable: null, // 点击分页切换
arrow_left: null, // 点击左箭头
arrow_right: null // 点击右箭头
};
})(jQuery);
网友评论