Effect Preview Picture:
We can download the demo to see the full effect, the following introduction to the production process.
1. First create an HTML page, the HTML structure is as follows:
Copy Code code as follows:
<div id= "Slider" >
<div id= "Viewer" >
</div>
<ul id= "UI" >
<li class= "hidden" id= "prev" ><a href= "" title= "Previous" >«</a></li>
<li><a href= "#image1" title= "Image 1" class= "active" >image 1</a></li>
<li><a href= "#image2" title= "Image 2" >image 2</a></li>
<li><a href= "#image3" title= "Image 3" >image 3</a></li>
<li><a href= "#image4" title= "Image 4" >image 4</a></li>
<li><a href= "#image5" title= "Image 5" >image 5</a></li>
<li class= "hidden" id= "Next" ><a href= "" title= "Next" >»</a></li>
</ul>
</div>
Everyone can see that, the viewer contains a few pictures, the UL object contains the ' previous ', ' next ' and each picture corresponding navigation.
2. Next, you need to set CSS styles for these HTML elements, CSS I will not say more, is to the viewer, pictures and other elements add style, viewer can only display a picture:
Copy Code code as follows:
#slider
{
width:500px;
position:relative;
}
#viewer
{
width:400px;
height:300px;
Margin:auto;
position:relative;
Overflow:hidden;
}
#slider ul
{
width:350px;
margin:0 Auto;
padding:0;
List-style-type:none;
}
#slider Ul:after
{
Content: ".";
Visibility:hidden;
Display:block;
height:0;
Clear:both;
}
#slider Li
{
margin-right:10px;
Float:left;
}
#prev, #next
{
Position:absolute;
top:175px;
}
#prev
{
left:20px;
}
#next
{
Position:absolute;
right:10px;
}
. Hidden
{
Display:none;
}
#slide
{
width:2000px;
height:300px;
Position:absolute;
top:0;
left:0;
}
#slide img
{
Float:left;
width:400px;
height:300px;
}
#title
{
margin:0;
Text-align:center;
}
3. Add jquery and Jquery.easing.1.3.js references to the page. Then we are the start of this article, for navigation to write the corresponding JS event.
First we need to create a new div to wrap 5 pictures.
Copy Code code as follows:
$ (' #viewer '). Wrapinner (' <div id= "slide" ></div> ");
Next we use jquery's selector to find objects like Slider,slide,prev,next and save them to the corresponding JS variable.
Copy Code code as follows:
var container = $ (' #slider '),
Prev = Container.find (' #prev '),
Prevchild = Prev.find (' a '),
Next = Container.find (' #next '). Removeclass (' hidden '),
Nextchild = Next.find (' a '),
Slide = Container.find (' #slide ')
Create two new JS variables, key Save the current active picture id,details Save all pictures of their respective position and title information.
Copy Code code as follows:
Key = "Image1",
Details = {
Image1: {
position:0,
Title:slide.children (). EQ (0). attr (' Alt ')
},
Image2: {
Position:-400,
Title:slide.children (). EQ (1). attr (' Alt ')
},
Image3: {
Position:-800,
Title:slide.children (). EQ (2). attr (' Alt ')
},
Image4: {
Position:-1200,
Title:slide.children (). EQ (3). attr (' Alt ')
},
Image5: {
Position:-1600,
Title:slide.children (). EQ (4). attr (' Alt ')
}
};
To display the caption of the picture, we need to add a H2 title to the page.
Copy Code code as follows:
$ (' ID: ' title ',
Text:details[key].title
}). Prependto (' #slider ');
After the completion of the above work, you can start to add click event for a label, where a tag is divided into two kinds, one is ' previous ' and ' next ', the other is the corresponding navigation pictures. We need to add the corresponding click event for them separately. But they all use one of the same callback functions, we finish writing the callback function first. Code ideas I'll just do it in a way that's annotated.
Copy Code code as follows:
function Postanim (dir) {
First we get the ID of the currently active picture, which contains only the number part
var Keymath = parseint (Key.match (/\d+$/));
Slide's left is less than 0, which means that the current active picture is not picture 1, ' previous ' navigation is displayed; otherwise ' previous ' navigation disappears
(parseint (Slide.css (' left ')) < 0)? Prev.show (): Prev.hide ();
Slide left equals-1600, which means that the current active picture is the fifth chapter, ' Next ' navigation disappears, otherwise ' next ' navigation shows
(parseint (Slide.css (' left ') = = = 1600)? Next.hide (): Next.show ();
An IF condition statement makes sense if you use the ' previous ' and ' next ' navigation. Realize the function is the point ' on a ' is a key minus one, point ' next ' key plus 1
if (dir) {
var Titlekey = (dir = = ' back ')? KeyMath-1: Keymath + 1;
Key = ' image ' + titlekey;
}
Reset H2 Headers
Container.find (' #title '). Text (details[key].title);
Reset which picture is active now
Container.find ('. Active '). Removeclass (' active ');
Container.find (' a[href=# ' + key + '] '). addclass (' active ');
}
Next we complete the ' previous ' and ' next ' navigation functions.
Copy Code code as follows:
Nextchild.add (Prevchild). Click (function (e) {
Block the default event, otherwise the animation effect will not be
E.preventdefault ();
var arrow = $ (this). parent ();
We only add new animation effects when the current slide is not animated
if (!slide.is (': Animated ')) {
Slide.animate ({
Left: (arrow.attr (' id ') = = ' prev ')? ' +=400 ': '-=400 '
}, ' slow ', ' easeoutback ', function () {
(Arrow.attr ("id") = = "Prev")? Postanim ("Back"): Postanim ("forward");
});
}
});
Finally, the image corresponding to the respective function of the navigation implementation.
Copy Code code as follows:
$ (' #ui li a '). Not (Prevchild). Not (Nextchild). Click (function (e) {
Block Default Events
E.preventdefault ();
Get the current active picture ID
Key = $ (this). attr (' href '). Split (' # ') [1];
Set animation effects
Slide.animate ({
Left:details[key].position
}, ' slow ', ' easeoutback ', Postanim);
});
The content of this lesson is finished, you can download demo, see the function is as follows.
Demo Download Address: jQuery.animation.position
