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

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

WBOY

Libérer： 2016-05-16 15:12:05

original

1426 Les gens l'ont consulté

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>

Copier après la connexion

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 !