A simple and practical example of small image switching, simple and practical image Switching

A simple and practical example of small image switching, simple and practical image Switching

I accidentally saw this little thing I previously wrote and pasted it. It supports click switching and automatic carousel for beginners to check it out!

The Code is as follows:

<Div class = "scroll_div"> <ul class = "pic"> <li> </li> </li> </li> </li> </li> </ul> <ul class =" btn "> <li> Project 1 </li> <li> Project 2 </li> <li> Project 3 </li> <li> Project 4 </li> <li> Project 5 </li> </ul> </div>Html

You only need to change the image path to your local one.

. Scroll_div {width: 1000px; height: 370px; margin: 0 auto; padding: 10px ;}. scroll_div. pic {width: 820px; height: 370px; overflow: hidden; position: relative; float: left ;}. scroll_div. pic li {width: 820px; height: 370px; position: absolute; top: 0; left: 0; display: none ;}. scroll_div. btn {float: right; width: 173px ;}. scroll_div. btn li {width: 173px; height: 66px; display: block; float: left; text-align: center; color: # fff; font: 18px/100% ""; font-weight: bold; background: #008dd8; margin-bottom: 10px; line-height: 66px; cursor: pointer ;}. scroll_div. btn li. on {background: # d73737;} li {list-style: none ;}Css

 

$ (Function () {var listLen = $ (". pic li "). length, I = 0, setInter, speen = 3000;/* image carousel */$ (". btn li: last ").css ({" margin ":" 0px 0px 0px 0px "}); $ (". btn li: first "). addClass ("on"); $ (". pic li: first "). show (); $ (". btn li "). each (function (index, element) {$ (element ). click (function () {I = index; $ (this ). addClass ("on "). siblings (). removeClass ("on"); $ (". pic li "). eq (index ). animate ({opacity: "show"}, 300 ). siblings (). animate ({opacity: "hide"}, 300) ;}) $ (element ). hover (function () {clearInterval (setInter) ;}, function () {outPlay () ;}) out_fun = function () {if (I <listLen) {I ++;} else {I = 0 ;}; $ (". btn li "). eq (I ). addClass ("on "). siblings (). removeClass ("on"); $ (". pic li "). eq (I ). animate ({opacity: "show"}, 300 ). siblings (). animate ({opacity: "hide"}, 300) ;}outplay = function () {setInter = setInterval ("out_fun ()", speen) ;}outplay ();})Js

 

The simplest js image Switching Effect

Try switching this image
Switch with 12345 numbers
If you click a number, it will change to another image. If you do not click it, it will change automatically.
The tutorials and source code are provided.


Reference: www.blueidea.com/..20.10895


An urgent code that uses jquery to implement automatic image switching, simple and detailed,

I recommend one for you. This is the Code. For more information, see references.

$. Fn. iFadeSlide = function (iSet ){
/*
* Optional iSet parameters:
* ISet. field => image set in the magic light area
* ISet. ico ==> button hook
* ISet. high ==> button highlight Style
* ISet. interval ==> image switching time
* ISet. leaveTime ==> maximum time value of the event to be crossed without triggering the mouse
* ISet. fadeInTime ==> fade in time
* ISet. fadeOutTime ==> fade out time
* Call method $ (document). iFadeSlide ({field: '...', ico :'...',...})
*/
ISet = $. extend ({high: 'high', interval: 3000, leaveTime: 150, fadeOutTime: 400, fadeInTime: 400}, iSet );
Var imgField =$ (iSet. field | '# slide> img ');
Var icoField = $ (iSet. ico | '# ico ');
Var curIndex = 0;
Var slideInterval = iSet. interval | 3000;
Var hoverTime = iSet. leaveTime || 150;
Var fadeOutTime = iSet. fadeOutTime | 400;
Var fadeInTime = iSet. fadeInTime || 400;
Var icos = null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null, max = null ;;
Var icoHtml = '<ul> ';
Max = imgField. size ();
// Input the corresponding button according to the image
ImgField. each (function (I ){
IcoHtml + = '<li>' + (I + 1) + '</li> ';
});
IcoHtml + = '</ul> ';
IcoField. append (icoHtml );
// Fade-in and fade-out functions
ChangeFun = function (n ){
ImgField. filter (': visible'). fadeOut (fadeOutTime, function (){
ImgField. eq (n). fadeIn (fadeInTime)
Icos. eq (n). addClass (iSet. high). siblings (). removeClass (iSet. high );
});
}
Icos = icoField. find ('ul> li ');
// Initialize highlight for the first key
Icos. first (). addClass (iSet. high );
// Click the button to draw an event
Icos. hov ...... remaining full text>