L'exemple de cet article décrit le code de la fonction de commutation d'image implémenté par jQuery CSS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css" > body { margin:0; padding:0; } .container { border:6px solid gray; background:black; width:600px; height:400px; position:relative; left:50%; margin-left:-300px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; overflow:hidden; } .text-center { text-align:center; } h1 { font-size:50px; color:gray; font-weight:bolder; } .imgUL { width:100%; height:100%; margin:0px; padding:0px; list-style:none; } .imgUL li { float:left; margin:0px; padding:0px; height:100%; color:gray; font-weight:bolder; text-align:center; font-size:100px; line-height:400px; } .pageUL { position:relative; top:-40px; height:40px; list-style:none; margin:0px; padding:0px; float:right; } .pageUL li { float:left; display:block; width:36px; height:36px; border:2px solid red; margin-left:5px; border-radius:4px; -webkit-border-radius:4px; text-align:center; -moz-border-radius:4px; line-height:36px; color:gray; font-weight:bolder; cursor:pointer; } .pageUL li:hover { background:#5ACF00; color:black; } .pageUL li.active { background:#5ACF00; color:black; } </style> <script type="text/javascript" > $(document).ready(function(){ var autoInterval = null, imgUL = $(".imgUL"), imgliList = imgUL.children("li"), liListLength = imgliList.length, pageUL = $('.pageUL'), pageLiList = pageUL.children('li'), pageLiListLength = pageLiList.length, // initialize activePageLi = $(pageLiList[0]); activePageLi.addClass('active'); imgliList.width(600); imgUL.width(liListLength * 600); $(".pageUL li").mouseover(function(){ mouseoverAnimate(this); }).mouseout(function(){ createInterval(); }); createInterval(); function mouseoverAnimate(_this){ clearInterval(autoInterval); activePageLi.removeClass('active'); activePageLi = $(_this); var pageNo = parseInt(activePageLi.html()); activePageLi.addClass('active'); imgUL.animate({ 'marginLeft': -600 * (pageNo - 1) }, 10); } function createInterval(){ autoInterval = setInterval(function(){ var pageNo = parseInt(activePageLi.html()); pageNo++; if(pageNo > pageLiListLength) { pageNo = 1; } activePageLi.removeClass('active'); activePageLi = $(pageLiList[pageNo - 1]); activePageLi.addClass('active'); imgUL.animate({ 'marginLeft': -600*(pageNo - 1) }, 1100); }, 1500); } }); </script> </head> <body> <h1 class="text-center">Demo</h1> <div class="container" id="container"> <ul class="imgUL"> <li>Page1</li> <li>Page2</li> <li>Page3</li> <li>Page4</li> <li>Page5</li> <li>Page6</li> </ul> <ul class="pageUL"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
Les lecteurs intéressés par plus de contenu lié aux effets spéciaux jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets spéciaux classiques courants de jQuery" et "Résumé de l'animation jQuery et utilisation d'effets spéciaux"
J'espère que cet article sera utile à tous ceux qui programment jQuery.