recherche

Maison  >  Article  >  interface Web  >  Exemple de carrousel d'image de bannière jQuery simple code_jquery

Exemple de carrousel d'image de bannière jQuery simple code_jquery

WBOY
WBOYoriginal
2016-05-16 15:12:051428parcourir

Un ami m'a montré un effet carrousel. J'ai téléchargé le js et j'ai jeté un œil. Un effet aussi simple de Yaya peut être écrit en centaines de lignes. Cela affecte sérieusement la vitesse de chargement du navigateur. Le trafic est gratuit. . En désespoir de cause, j'en ai écrit un simple. Tous les codes ne dépassaient pas 70 lignes, et il y avait aussi le CSS avec des coins arrondis. Tous les navigateurs n'ont pas de coins arrondis, mais cela n'affecte pas l'apparence, hehe.

Laissez-moi d'abord vous montrer les rendus : 


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script src="js/jquery-2.1.4.js" type="text/javascript"></script>
<style type="text/css">
.clear{overflow:hidden; clear:both; width:0px; height:0px; }
.imgbox{width:640px; margin:0 auto; text-align:center; }
ul{padding:0px; margin:0px;}
ul li{float:left; list-style:none; }
ul li.select{display:block;}
.imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px; background-color:#F90; cursor:pointer;}
.imgnum span.onselect{background-color:#F00;}
.imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}
</style>
</head>
<body>
<div class="imgbox">
<ul id="banner_img">
<li><img src="images/banner1.jpg"/></li>
<li><img src="images/banner2.jpg"/></li>
<li><img src="images/banner3.jpg"/></li>
<li><img src="images/banner4.jpg"/></li>
<li><img src="images/banner5.jpg"/></li>
</ul>
<div class="clear"></div>
<div class="imgnum">
<span class="onselect">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script type="text/javascript">
var time = "";
var index = 1;
$(function () {
showimg(index);
//鼠标移入移出
$(".imgnum span").hover(function () {
clearTimeout(time);
var icon=$(this).text();
$(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
$("#banner_img li").hide().stop(true,true).eq(icon-1).fadeIn("slow");
}, function () {
index=$(this).text()> 4 &#63; 1 :parseInt($(this).text())+1;
time = setTimeout("showimg(" + index + ")", 3000);
});
});
function showimg(num) {
index = num;
$(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
$("#banner_img li").hide().stop(true,true).eq(index-1).fadeIn("slow");
index = index + 1 > 5 &#63; 1 : index + 1;
time = setTimeout("showimg(" + index + ")", 3000);
}
</script>
</body>
</html>

Assurez-vous de citer le fichier Jquery. Je ne téléchargerai pas l'image. Vous pouvez le remplacer vous-même. Faites attention à la longueur et à la largeur de l'image.

Ce qui précède est un simple exemple de code de carrousel d'images de bannière jQuery partagé par l'éditeur. J'espère qu'il sera utile à tout le monde !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé de plusieurs façons de lier des événements à l'aide de jQuery dans JavaScript_jqueryArticle suivant：Résumé de plusieurs façons de lier des événements à l'aide de jQuery dans JavaScript_jquery

Articles Liés

Voir plus