hujung hadapan web
tutorial js
jquery fade-out tayangan slaid berkelip menukar kaedah pelaksanaan_jquery
jquery fade-out tayangan slaid berkelip menukar kaedah pelaksanaan_jquery
May 16, 2016 pm 04:12 PMContoh dalam artikel ini menerangkan kaedah pelaksanaan penukaran tayangan slaid gambar yang pudar dan pudar. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<tajuk>jQuery kesan penukaran tayangan slaid gambar pudar</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--Tambahkan kod berikut antara <head> dan </head>-->
<style type="text/css">
badan{font-size:12px;letter-spacing:1px;font-family:"Microsoft YaHei";line-height:1.8em;}
div,ul,li{margin:0; padding:0;}
.slides{position:relative;width:700px;height:300px;overflow:hidden;border:1px solid #ccc;}
.slides img{width:700px; tinggi:300px;}
.slides .ico{position:absolute; right:8px;bottom:6px;}
.slides .ico li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid #cecece;font-family:Arial,Helvetica,sans- serif;text-align:center;margin:2px;padding:1px;cursor:pointer;}
.slides .ico li.high{background:#7f0019;color:#fff;font-weight:bolder;}
</style>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript">
$(fungsi(){
var _img=$('.slides img');
var _len=_img.length;
var _index=0;
var _moving;
//Masukkan nombor indeks imej
var _ul='<ul>'
untuk(var i=1; i<=_len; i ){
_ul=_ul '<li>' i '</li>';
}
_ul=_ul '</ul>';
$('div.ico').append(_ul);
var _ico=$('.ico li');
//Silang nombor
_ico.mouseover(function(){
_index=_ico.index(ini);
_img.filter(':visible').fadeOut(300,function(){
_img.eq(_index).fadeIn(300);
})
$(this).addClass('high').siblings().removeClass('high');
}).eq(0).mouseover();
//Auto kecerunan
_moving=setInterval(autoShow,2000);
_img.hover(function(){clearInterval(_moving)},function(){
_moving=setInterval(autoShow,2000);
})
fungsi autoShow(){
_indeks ;
if(_index==_len) _index=0;
_ico.eq(_index).trigger('mouseover');
};
});
</skrip>
</head>
<badan>
Apabila pratonton kesan, ralat akan digesa di sudut kiri bawah, dan kesannya tidak dapat dilihat selepas menyegarkannya sudah tentu, dalam penggunaan sebenar, masalah seperti itu tidak akan berlaku. <br>
<!--Tambahkan kod berikut antara <body> dan </body>-->
<div class="slides">
<img src="/images/m02.jpg" title="demo" alt="demo">
<img src="/images/m01.jpg" title="demo" alt="demo">
<img src="/images/m03.jpg" title="demo" alt="demo">
<img src="/images/m04.jpg" title="demo" alt="demo">
<img src="/images/m05.jpg" title="demo" alt="demo">
<div class="ico"></div>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?
Mar 22, 2024 am 08:06 AM
Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?
Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato.
Mar 28, 2024 pm 12:50 PM
Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato.
Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam)
May 01, 2024 pm 12:01 PM
Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam)
Bagaimana untuk menyiarkan gambar dalam ulasan TikTok? Di manakah pintu masuk ke gambar di ruang komen?
Mar 21, 2024 pm 09:12 PM
Bagaimana untuk menyiarkan gambar dalam ulasan TikTok? Di manakah pintu masuk ke gambar di ruang komen?
Cara membuat gambar ppt muncul satu persatu
Mar 25, 2024 pm 04:00 PM
Cara membuat gambar ppt muncul satu persatu
Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan!
Mar 23, 2024 am 10:42 AM
Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan!
Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih)
May 04, 2024 pm 06:01 PM
Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih)
Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian
Mar 15, 2024 am 10:30 AM
Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian
