A simple image switching special effect implemented using html + css + js _ javascript skills

This article mainly introduces a simple image switching special effect implemented by using html + css + js. For more information, see.


This image switching effect is easy to implement and has good compatibility.

The html page is as follows:

The Code is as follows:

Css style

The Code is as follows:

Js script

The Code is as follows:

$ (Function (){
Var sWidth = $ ("# focus"). width (); // obtain the width of the focus chart (display area)
Var len = $ ("# focus ul li"). length; // obtain the number of focal points.
Var index = 0;
Var picTimer;

// The following Code adds the number button and the translucent bar after the button, as well as the previous and next buttons
Var btn ="

";
For (var I = 0; I <len; I ++ ){
Btn + = "";
}
Btn + ="

";
$ ("# Focus"). append (btn );
$ ("# Focus. btnBg" 2.16.css ("opacity", 0.5 );

// Add a mouse slide event for the small button to display the corresponding content
$ ("# Focus. btn span" example .css ("opacity", 0.4). mouseenter (function (){
Index = $ ("# focus. btn span"). index (this );
ShowPics (index );
}). Eq (0). trigger ("mouseenter ");

// Display the transparency of previous and next pages
$ ("# Focus. preNext" detail .css ("opacity", 0.2). hover (function (){
$ (This). stop (true, false). animate ({"opacity": "0.5"}, 300 );
}, Function (){
$ (This). stop (true, false). animate ({"opacity": "0.2"}, 300 );
});

// Previous page button
$ ("# Focus. pre"). click (function (){
Index-= 1;
If (index =-1) {index = len-1 ;}
ShowPics (index );
});

// Next page button
$ ("# Focus. next"). click (function (){
Index + = 1;
If (index = len) {index = 0 ;}
ShowPics (index );
});

// In this example, it is left-side scrolling, that is, all li elements are floating to the left in the same row. Therefore, the width of the peripheral ul element needs to be calculated here.
$ ("# Focus ul" ).css ("width", sWidth * (len ));

// Stop automatic playback when you move the mouse over the focus chart, and start automatic playback when the mouse slides out.
$ ("# Focus"). hover (function (){
ClearInterval (picTimer );
}, Function (){
PicTimer = setInterval (function (){
ShowPics (index );
Index ++;
If (index = len) {index = 0 ;}
}, 4000); // This 4000 represents the automatic playback interval, in milliseconds
}). Trigger ("mouseleave ");

// The image display function displays the corresponding content based on the received index value.
Function showPics (index) {// normal switchover
Var nowLeft =-index * sWidth; // calculate the left value of the ul element based on the index value.
$ ("# Focus ul "). stop (true, false ). animate ({"left": nowLeft}, 300); // use animate () to adjust the ul element to scroll to the position calculated
// $ ("# Focus. btn span "). removeClass ("on "). eq (index ). addClass ("on"); // switch the current button to the selected Effect
$ ("# Focus. btn span "). stop (true, false ). animate ({"opacity": "0.4"}, 300 ). eq (index ). stop (true, false ). animate ({"opacity": "1"}, 300); // switch the current button to the selected Effect
}
});

Switch between left and right images