Einfaches Beispiel für ein jQuery-Bannerbildkarussell code

Einfaches Beispiel für ein jQuery-Bannerbildkarussell code_jquery

WBOY

Freigeben： 2016-05-16 15:12:05

Original

1457 Leute haben es durchsucht

Ein Freund hat mir einen Karusselleffekt gezeigt und mir einen solchen einfachen Effekt angesehen, der die Ladegeschwindigkeit des Browsers ernsthaft beeinträchtigt Traffic ist kostenlos spielbar. . In meiner Verzweiflung habe ich einen einfachen Code für ihn geschrieben, der nicht länger als 70 Zeilen war, und es gab auch das CSS mit abgerundeten Ecken, aber das hat keinen Einfluss auf das Erscheinungsbild, hehe.

Lassen Sie mich Ihnen zuerst die Renderings zeigen:

<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>

Nach dem Login kopieren

Achten Sie darauf, die Jquery-Datei zu zitieren. Sie können das Bild selbst ersetzen.

Das Obige ist ein einfacher Beispielcode für ein jQuery-Bannerbildkarussell, der vom Herausgeber geteilt wurde. Ich hoffe, er wird für alle hilfreich sein!