cari

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

JQuery melaksanakan effect_jquery karusel imej

WBOY
WBOYasal
2016-05-16 15:39:151389semak imbas

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

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

[ <p>Hello</p>, <p>And Again</p> ]

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

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>

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>

Di atas ialah keseluruhan proses melaksanakan karusel imej dengan JQuery, saya harap ia akan membantu pembelajaran 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：JavaScript merangkum kemahiran perkongsian kod sumber kesan tab_javascriptArtikel seterusnya：JavaScript merangkum kemahiran perkongsian kod sumber kesan tab_javascript

Artikel berkaitan

Lihat lagi