cari

Rumah >hujung hadapan web >tutorial js >Contoh karusel imej sepanduk jQuery mudah code_jquery

Contoh karusel imej sepanduk jQuery mudah code_jquery

WBOY
WBOYasal
2016-05-16 15:12:051460semak imbas

Seorang rakan menunjukkan kepada saya kesan karusel. Saya telah memuat turun js dan melihat kesan mudah seperti Yaya boleh ditulis dalam beratus-ratus baris Ia menjejaskan kelajuan pemuatan penyemak imbas Trafik adalah percuma untuk dimainkan. . Dalam keadaan terdesak, saya menulis yang mudah untuknya Semua kod tidak melebihi 70 baris, dan terdapat juga CSS dengan sudut bulat Tidak setiap pelayar mempunyai sudut bulat, tetapi ia tidak menjejaskan penampilan, hehe.

Biar saya tunjukkan renderingnya dahulu: 


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

Pastikan anda memetik fail Jquery saya tidak akan memuat naik imej tersebut. Anda boleh menggantikannya sendiri.

Di atas ialah kod contoh karusel imej sepanduk jQuery yang dikongsi oleh editor saya harap ia akan membantu semua orang!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ringkasan beberapa cara untuk mengikat acara menggunakan jQuery dalam JavaScript_jqueryArtikel seterusnya：Ringkasan beberapa cara untuk mengikat acara menggunakan jQuery dalam JavaScript_jquery

Artikel berkaitan

Lihat lagi