Kod jQuery menyedari kesan penukaran fade-in dan fade-out automatik + manual pada wall

Kod jQuery menyedari kesan penukaran fade-in dan fade-out automatik + manual pada wall_jquery gambar

WBOY

Lepaskan： 2016-05-16 15:01:32

asal

1534 orang telah melayarinya

Bacaan berkaitan:

Kod Jquery untuk melaksanakan kesan karusel imej (1)

Anda selalunya boleh melihat kesan pudar secara automatik masuk dan keluar daripada imej latar belakang pada halaman web, yang sangat cantik dan sangat praktikal. Hari ini, saya akan mengambil sedikit masa untuk berkongsi dengan anda kesan suis automatik + manual fade-in dan fade-out pada dinding gambar berdasarkan kod jquery. Mari kita belajar bersama!

Saya akan menunjukkan kepada anda pemaparan terlebih dahulu Jika anda fikir ia bagus, sila rujuk kod pelaksanaan tertentu.

Tambahkan div (kelas=bekas) dan tetapkan lebar dan tinggi Di sini, lebar ialah 800px dan tinggi ialah 450px. Tambah kedudukan berpusat. Tambah senarai ul (class="img") pada div untuk menahan imej Tetapkan kedudukan tag li dalam ul kepada mutlak Pada masa ini, imej akan bertindih dan menetapkan paparan kepada tiada. Imej menetapkan lebar dan tinggi untuk sama dengan bekas. Tambahkan satu lagi senarai ul pada bekas untuk memegang baris nombor di bawah, dan kemudian letak dan tetapkan dengan sewajarnya. Tambah dua div: kiri dan kanan, yang masing-masing adalah butang kiri dan kanan, dan lakukan kedudukan dan tetapan yang sepadan Anak panah di dalam adalah masing-masing lebih besar daripada tanda dan kurang daripada tanda.

Pengenalan kepada idea dan prinsip pelaksanaan:

Apabila tetikus bergerak ke atas nombor yang sepadan, gunakan $(this).index() untuk mendapatkan nombor siri dalam bekas di mana nombor itu terletak, kemudian hantar nombor siri ke fungsi eq() untuk mendapatkan li label, dan kemudian tambah fungsi fadeIn( ); Dengan cara ini, gambar tersembunyi dipaparkan, dan sibling().fadeOut() dipanggil pada masa yang sama untuk menyembunyikan nod adik-beradik pada tahap yang sama, supaya dipaparkan sebelum ini gambar disembunyikan.

Tambah fungsi setInterval() untuk menukar imej pada masa yang sama.

Saya rasa masalah utama ialah konflik antara pensuisan automatik dan pensuisan manual harus dihentikan apabila tetikus bergerak ke atas gambar

Tambahkan fungsi tuding pada bekas Apabila tetikus bergerak ke dalam bekas, gunakan fungsi clearInterval() untuk mengalih keluar fungsi selang masa Dengan cara ini, apabila tetikus bergerak ke atas gambar, gambar tidak akan bertukar. Tambahkannya apabila tetikus bergerak keluar fungsi setInterval(). Dengan cara ini gambar boleh terus ditukar.

Nota: i dan t perlu ditetapkan sebagai pembolehubah global supaya fungsi yang berbeza boleh dikongsi. i mewakili indeks imej yang sedang dipaparkan. t ialah ID setInterval. Apabila tetikus bergerak keluar, tidak perlu var a t, cuma: t=setInterval(time_fun,1500);.

eq(n): Cari unsur ke-n

cth: $('li').eq(2).css('background-color', 'red');//Tetapkan warna latar belakang tag li kedua kepada merah

index(): Cari nilai indeks bagi elemen

Jika anda berminat, kaji kod:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center; 
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px; 
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>

Salin selepas log masuk

Di atas ialah kod jQuery yang dibawa oleh editor kepada anda untuk merealisasikan kesan penukaran fade-in dan fade-out automatik pada dinding gambar Saya harap ia akan membantu anda juga terima kasih banyak atas sokongan anda terhadap laman web Script House!