Rumah > hujung hadapan web > tutorial js > JQuery melaksanakan effect_jquery karusel imej

JQuery melaksanakan effect_jquery karusel imej

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:39:15
asal
1449 orang telah melayarinya

[Penerangan ringkas tentang prinsip]

Berikut ialah penerangan ringkas tentang keseluruhan proses:

1, sembunyikan semua gambar kecuali yang pertama,

2. Dapatkan maklumat alt gambar pertama dan paparkannya dalam bar maklumat, dan tambah acara klik

3. Tambah klik mendengar untuk 4 butang, klik butang yang sepadan dan gunakan kaedah fadeOut dan fadeIn untuk memaparkan imej

4. Tetapkan setInterval dan laksanakan fungsi pensuisan dengan kerap

[Perihalan kod]

filter(":visible") : Dapatkan semua elemen kelihatan

unbind(): Mengalih keluar acara terikat daripada elemen padanan

adik-beradik: Dapatkan set elemen yang mengandungi semua elemen adik-beradik unik setiap elemen dalam set elemen yang dipadankan

Contoh: Cari elemen dengan nama kelas yang dipilih antara semua elemen adik-beradik setiap div.

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
Salin selepas log masuk

Laksanakan $("div").siblings(), hasilnya

[ <p>Hello</p>, <p>And Again</p> ]
Salin selepas log masuk

[Kod sumber program]
Bahagian HTML:

<body>
<div id="banner"> 
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info"></div><!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="imgs/p1.jpg" title="JQuery melaksanakan effect_jquery karusel imej" alt="JQuery melaksanakan effect_jquery karusel imej"/></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" title="JQuery melaksanakan effect_jquery karusel imej" alt="JQuery melaksanakan effect_jquery karusel imej"/></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" title="JQuery melaksanakan effect_jquery karusel imej" alt="JQuery melaksanakan effect_jquery karusel imej"/></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" title="JQuery melaksanakan effect_jquery karusel imej" alt="JQuery melaksanakan effect_jquery karusel imej"/></a>
</div>
</div>
</body>
Salin selepas log masuk

Bahagian CSS:

<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
</style>
Salin selepas log masuk

Bahagian JS:

<script type="text/javascript">
var t = n =0, count;
$(document).ready(function(){ 
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() -1;//获取Li元素内的值,即1,2,3,4
n = i;
if (i >= count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})

function showAuto()
{
n = n >=(count -1) &#63;0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
Salin selepas log masuk

Di atas ialah keseluruhan proses melaksanakan karusel imej dengan JQuery, saya harap ia akan membantu pembelajaran semua orang.

Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan