Use jQuery to encapsulate a shadowing effect plugin.
Effect:
Preview online: jQuery_LKFadeSlideshow
download
Compatibility:
Plug-in parameters:
- AutoPlay: Automatic switchover interval (unit: ms). If this parameter is not set, slide will not automatically switch.
- Speed: Switching speed (ms).
- InitialItem: initializes the index of the multicast element. Type: number.
- Pagination: pagination position, type: HTML tag
- PaginationNum: Indicates whether to display digital pages. Type: Boolean, true indicates whether to display digital pages.
- PaginationClickable: Whether to switch pages when clicked. Type: Boolean, true can switch pages.
- Arrow_left: switches to the last wheel element. Type: HTML tag.
- Arrow_right: switches to the next multicast element. Type: HTML tag.
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>
Copy the codeCSS
.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; }
Copy the codeJS calls
<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>
Copy the codeJS package plug-in
LKFadeSlideshow.js
/**
* Title: LKFadeSlideshow
* 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; // Initialize index // Do not set the initial index value, or set the value to exceed the number of multicast elements. The default value is 0.if(initialItem == null || initialItem > item_length - 1) { initialItem = 0; }; // Set the initialization to show and hide elements. 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); // Paging related Settings // When paginationNum is not set or set totrueTo add numbers to the page.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>"; }; }; // Dynamically add pagination. HTML (page_text); Var pagination_list = pagination.children('span');
for (var i = 0; i < pagination_list.length; i++) {};
$(pagination_list[initialItem]).addClass('active'); // Pass in two arguments: tag,page_index. / / the tag:"0"It means click the left arrow,"1"So if I click the right arrow,"2"Click pagination. // page_index: Can't get the index of the clicked element in the main method. It's always -1, so you need to pass in an argument to get it.functionSlideMove (tag, page_index) {// Clear timer // Do not clear timer, create multiple timer, switch faster and faster. clearInterval(autoPlay); slide_item.stop(true.true); // Clear multi-click events // Click the left arrow to execute eventsif (tag == 0) {
initialItem--;
if(initialItem < 0) { initialItem = item_length - 1; }; }; // Click the right arrow to execute the eventif (tag == 1) {
initialItem++;
if(initialItem > item_length - 1) { initialItem = 0; }; }; // Click the page execution eventif(tag == 2) { initialItem = page_index; }; // Animating effect 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'); // If the current position is changed, the right arrow click event will be triggered again.if(typeof(opts.autoPlay) ! ="number") {
clearInterval(autoPlay);
} else {
autoPlay = setTimeout(function() { slideMove(1); }, opts.autoPlay); }; }; // Trigger the first right arrow click event. // If the value of autoPlay is not set or fales is set to another value, the automatic multicast event will not be executed when the plugin is called.if(typeof(opts.autoPlay) ! ="number") {
clearInterval(autoPlay);
} else {
autoPlay = setTimeout(function() { slideMove(1); }, opts.autoPlay); }; // Click the left arrow arrow_left.click(function(event) {
event.preventDefault();
slideMove(0);
return false; }); // Click the right arrow arrow_right.click(function(event) {
event.preventDefault();
slideMove(1);
return false; }); // Click pagination // add a judgment condition when paginationClickable istrueIf yes, a paging click event is triggered. Default is no click event.if (paginationClickable == true) {
pagination.on('click'.'span'.function(event) {
event.preventDefault();
slideMove(2, $(this).index());
});
};
});
returnthis; }; Default options $.fn. lkslideshow. defaults = {autoPlay: null, // Speed: null, // Speed: null, // initialItem: Pagination: null, paginationNum: null, paginationClickable: null, arrow_left: Null, // click the left arrow arrow_right: null // click the right arrow}; })(jQuery);Copy the code