jQuery slideshow plug-in (with thumbnail function)_jquery
May 16, 2016 pm 06:11 PMAt the invitation of a friend, I helped his company create a slide show effect. The effect is as follows:
The middle of the thumbnail is the picture currently being played, and the two sides are divergent, gradually shrinking and reducing transparency. Assuming that the 0th picture is currently being played, the arrangement is as follows: 0
1 4
2 The arrangement after the picture is posted is as follows:
4
0 3
?。薄 ? 2
This is just the playback effect of the thumbnails. When the thumbnails are rotated, There will be corresponding large pictures that scroll in from right to left, and the speed at which the large pictures enter should correspond to the thumbnail rotation. The overall effect is as follows:
I am considering combining the thumbnail rotation with the scrolling of the large pictures. The thumbnail rotation is divided into two parts. The thumbnail rotation is used as a separate jQuery plug-in, and the events in the plug-in drive the scrolling of the large image. Let’s first talk about the implementation of the thumbnail rotation plug-in:
1. Plug-in parameters:
Copy code
onstart: null, //Start scrolling
onchange: null //Scrolling event
};
2. Plug-in events:
onstart event, Triggered once each time the rotation starts. The parameters transferred are: the jQuery object of the current thumbnail and the jQuery object of the next thumbnail:
Copy code
Copy code
Thumbnail rotation adopts a timed and variable speed method, that is, each time the rotation does not expire, whether one picture or two pictures are rotated, the time is fixed, but the speed of rotating the two pictures is fixed. It is faster than rotating a picture, so that no matter how many pictures there are, no matter how far the scrolling distance is, it will not take a long time to scroll.
StepPercent[step] This array is designed for this purpose. Each rotation takes 15 steps, and the distance of each rotation gradually decreases, thus achieving a variable speed effect. The array is generated as follows:
Copy code
stepPercent[i] = total (total - stepPercent[i - 2]) * 0.81; //Initialize the sequence.
total = stepPercent[i];
if (i == stepPercent.length - 1)
stepPercent[i] = 1;
}
The first step is 20%, and each subsequent step is 81% of the previous step, that is, the speed decreases by 19% each time. However, there is an error in the decimal calculation. By the 15th step, it may be very close to 1. But it is not a value of 1, so set step 15 directly to 1, that is, 100%, and the scrolling ends.
(Note: How was this sequence designed? I used Excel to find a cell and fill in 0.2. The formula in the next cell is 0.81 in the previous cell. Then drag down a little more, and then put the above Accumulating to a value close to 1 is the required number of steps. )
If this sequence is not generated using JS, you can actually define an array directly from the sequence created in Excel. If you want to modify the speed in the future, do the same. Just once.
When rotating, the size, transparency, position and other information of the thumbnail are calculated using the scale factor set by this stepPercent array.
I won’t go into details about the plug-in. Please download the source code directly to view. Let’s talk about how to scroll the big picture according to the thumbnail.
3. Large picture scrolling
When the large picture scrolls with the thumbnails, no matter which picture it is scrolled to, the effect shown is to scroll immediately behind the current large picture to prevent skipping too much. When there are multiple pictures, the speed is too fast, causing a dazzling feeling, so the onstart event comes in handy here.
In the onstart event, first move the current picture to the first place in the large picture list, and then move the target picture to the back of the current picture. (Note: The current picture is moved to the first place in the large picture list because it is possible to move the current picture to the first place in the large picture list. The picture is in front of the current picture. If the current picture is moved to the back, the scroll bar position will move).
Then in the onchange event, just set the scrolling distance of the horizontal scroll bar according to the incoming progress parameter. The scrolling of the large image is that simple. The specific JS is as follows:
$(function() {
$("#div_Slide").Slide({
auto: true,
width: 85,
height: 42,
onstart: function(curImg, nextImg) {
var cData = curImg.attr("data");
var nData = nextImg.attr("data");
var bigCur = $("#" cData), bigNext = $("#" nData);
var allBigImg = bigCur.parent().children("img");
var curIndex = allBigImg.index(bigCur[0]);
var nextIndex = allBigImg.index(bigNext[0]);
var firstImg = $(allBigImg[0]);
if (firstImg.attr("id") != bigCur.attr("id"))
bigCur.insertBefore(firstImg);
$("#div_BigImg").scrollLeft(0);
bigNext.insertAfter(bigCur);
},
onchange: function(percent) {
$("#div_BigImg"). scrollLeft(1263 * percent);
}
});
var bigDiv = $("#div_BigImg");
var bigDivPos = bigDiv.position();
bigDiv.scrollLeft( 0); //Initially scroll the scroll bar to the head because I found that when the scroll bar is not at the head, pressing F5 to refresh will not jump to the head.
$("#div_Slide").css({
"top": (bigDivPos.top bigDiv.height() - $("#div_Slide").height()) "px",
"left": bigDivPos.left "px"
}) ;
});
Source code download: http://xiazai.jb51.net/201101/yuanma/SlideDemo_jb51.rar
Found something during use If you have any questions or areas for improvement, please leave a message, thank you.

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

This article will introduce how to turn off the thumbnail function displayed when the mouse moves the taskbar icon in Win11 system. This feature is turned on by default and displays a thumbnail of the application's current window when the user hovers the mouse pointer over an application icon on the taskbar. However, some users may find this feature less useful or disruptive to their experience and want to turn it off. Taskbar thumbnails can be fun, but they can also be distracting or annoying. Considering how often you hover over this area, you may have inadvertently closed important windows a few times. Another drawback is that it uses more system resources, so if you've been looking for a way to be more resource efficient, we'll show you how to disable it. but

On Windows 11/10 systems, some users claim that the slideshow on the desktop background has stopped working. Users are confused as to why photos on their laptop's background screen no longer slide. The reasons for this issue where slideshows are not working are described below. A third-party desktop customization application is installed. In power options, the desktop background slideshow setting is paused. The folder containing the background images is deleted. The screen may turn off after the slideshow is complete. After investigating the above reasons, we have created a list of fixes that will undoubtedly help users resolve the issue. Workaround – A deactivated window may be one of the causes of this issue. So, try activating Windows and check if the issue is resolved. Try to apply it via Settings

Windows 1122H2 is the first feature update for Windows 11 and should bring a ton of new features and much-needed improvements. One of the improvements is the ability to preview folder thumbnails of files within a folder. If you don't like the look of folder thumbnails in Windows 11, here's how you can change it. A set of custom icons for folder thumbnails in Windows 11 (courtesy of Reddit's LEXX911) that lets you zoom in on previews and change folder icon styles. You still have to deal with individual file previews (in Windows 7, for example, folder thumbnails can display multiple images at the same time), but you can make it larger and more convenient. important hint:

1. Open the PPT slide document, and in the [Outline, Slide] column on the left side of the PPT, click to select the slide where you want to insert the basic [shape]. 2. After selecting, select the [Insert] menu in the function menu bar above the PPT and click. 3. After clicking the [Insert] menu, the [Insert] submenu bar pops up below the function menu bar. Select the [Shape] menu in the [Insert] submenu bar. 4. Click the [Shape] menu to pop up the preset shape type selection page. 5. In the shape type selection page, select the [Heptagon] shape and click. 6. After clicking, move the mouse to the slide editing interface, press the mouse to draw, and release the mouse after the drawing is completed. Complete the insertion of the [heptagon] shape.

How to hide text before any click in PowerPoint If you want text to appear when you click anywhere on a PowerPoint slide, setting it up is quick and easy. To hide text before clicking any button in PowerPoint: Open your PowerPoint document and click the Insert menu. Click on New Slide. Choose Blank or one of the other presets. Still in the Insert menu, click Text Box. Drag a text box onto the slide. Click the text box and enter your

How to Convert PowerPoint to Google Slides One of the easiest ways to convert a complete PowerPoint presentation to Google Slides is to upload it. By uploading a PowerPoint (PPT or PPTX) file to Google Slides, the file will automatically be converted into a format suitable for Google Slides. To convert PowerPoint to Google Slides directly, follow these steps: Sign in to your Google account, go to the Google Slides page, and click on the blank space under the "Start a new presentation" section. In the new presentation page, click File&g

Slideshows are a great way to organize pictures on your Windows 11 computer. Sometimes, Windows users may face some kind of hardware limitation or system update and they need a way to store their files so that they are not accidentally deleted or lost. Additionally, it makes sorting and displaying photos much easier than having to manually show them to people by scrolling through them one by one. Slideshows are also a great way to bring together photos from different sources (camera, phone, USB drive) into an easy-to-enjoy format. Fortunately, you can use some useful third-party applications to create these slideshows without being forced to use tools like PowerPoint. The app is suitable for business presentations, but Pow

There may be black borders in the full-screen slideshow due to screen resolution mismatch, image size mismatch, incorrect zoom mode settings, monitor settings issues, slide design issues, etc. Detailed introduction: 1. Screen resolution does not match. A common reason for black borders is that the screen resolution does not match the slide size. When the size of the slide is smaller than the screen resolution, black borders will appear during playback. The solution is to adjust Size the slide so that it matches the screen resolution. In PowerPoint, you can select the "Design" tab, then click "Slide Size" and so on.
