Seperti yang ditunjukkan pada gambar.
Efek switching gambar sangat mudah diimplementasikan dan memiliki kompatibilitas yang baik.
Halaman HTML adalah sebagai berikut
Salinan kode adalah sebagai berikut:
<div>
<Div id = "Focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-End Wrapper->
</body>
Gaya CSS
Salinan kode adalah sebagai berikut:
<type style = "text/css">
* {margin: 0; padding: 0;}
body {font-size: 12px; Warna:#222; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; Latar belakang:#f0f0f0;}
.clearfix: After {Content: "."; Tampilan: Blok; Tinggi: 0; jelas: keduanya; Visibilitas: tersembunyi;}
.clearfix {zoom: 1;}
ul, li {List-style: none;}
img {border: 0;}
.wrapper {width: 800px; margin: 0 otomatis; padding-bottom: 50px;}
/ * qqshop fokus */
#focus {width: 800px; Tinggi: 280px; meluap: tersembunyi; Posisi: relatif;}
#focus ul {height: 380px; Posisi: Absolute;}
#focus ul li {float: left; Lebar: 800px; Tinggi: 280px; meluap: tersembunyi; Posisi: kerabat; Latar belakang:#000;}
#focus ul li div {position: absolute; meluap: tersembunyi;}
#focus .btnbg {position: absolute; Lebar: 800px; Tinggi: 20px; Kiri: 0; Bawah: 0; Latar belakang:#000;}
#focus .btn {position: absolute; Lebar: 780px; Tinggi: 10px; padding: 5px 10px; Kanan: 0; Bawah: 0; Teks-Align: Benar;}
#focus .btn span {display: inline-block; _Display: inline; _zoom: 1; Lebar: 25px; Tinggi: 10px; _font-size: 0; margin-kiri: 5px; kursor: pointer; Latar belakang: #fff;}
#focus .btn span.on {latar belakang: #fff;}
#focus .prenext {width: 45px; Tinggi: 100px; Posisi: Absolute; Atas: 90px; Latar Belakang: URL (img/sprite.png) No-Repeat 0 0; kursor: pointer;}
#focus .pre {kiri: 0;}
#focus .next {kanan: 0; Latar belakang posisi: Top kanan;}
</tyle>
Skrip JS
Salinan kode adalah sebagai berikut:
$ (function () {
var swidth = $ ("#focus"). width (); // Dapatkan lebar peta fokus (area tampilan)
var len = $ ("#focus ul li"). panjang; // Dapatkan jumlah gambar fokus
indeks var = 0;
var pictimer;
// Kode berikut menambahkan tombol numerik dan bilah tembus cahaya di belakang tombol, serta dua tombol pada halaman sebelumnya dan halaman berikutnya
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
untuk (var i = 0; i <len; i ++) {
btn += "<span> </span>";
}
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div>";
$ ("#fokus"). Append (btn);
$ ("#fokus .btnbg"). css ("opacity", 0,5);
// Tambahkan Slide Mouse di acara untuk tombol kecil untuk menampilkan konten yang sesuai
$ ("#fokus .btn span"). css ("opacity", 0.4) .mouseEnter (function () {
index = $ ("#focus .btn span"). index (this);
showpics (index);
}). eq (0) .trigger ("mouseenter");
// halaman sebelumnya dan halaman berikutnya pemrosesan transparansi
$ ("#fokus .prenext"). css ("opacity", 0,2) .hover (function () {
$ (ini) .stop (true, false) .animate ({"opacity": "0.5"}, 300);
},fungsi() {
$ (ini) .stop (true, false) .animate ({"opacity": "0.2"}, 300);
});
// tombol halaman sebelumnya
$ ("#fokus .pre"). Klik (fungsi () {
Indeks -= 1;
if (index == -1) {index = len - 1;}
showpics (index);
});
// tombol halaman berikutnya
$ ("#fokus .next"). Klik (fungsi () {
indeks += 1;
if (index == len) {index = 0;}
showpics (index);
});
// Contoh ini menggulir ke kiri dan kanan, yaitu, semua elemen Li mengambang ke kiri di baris yang sama, sehingga lebar elemen UL perifer perlu dihitung di sini.
$ ("#Focus UL"). CSS ("Lebar", Swidth * (Len));
// Pemutaran otomatis berhenti ketika mouse meluncur pada gambar fokus, dan dimulai ketika mouse meluncur keluar.
$ ("#focus"). hover (function () {
ClearInterval (pictimer);
},fungsi() {
pictimer = setInterval (function () {
showpics (index);
indeks ++;
if (index == len) {index = 0;}
}, 4000); // 4000 ini mewakili interval pemutaran otomatis, unit: milidetik
}). Trigger ("Mouseleave");
// Tampilkan fungsi gambar, tampilkan konten yang sesuai sesuai dengan nilai indeks yang diterima
function showpics (index) {// sakelar biasa
var nowleft = -Index*swidth; // Hitung nilai kiri elemen UL berdasarkan nilai indeks
$ ("#fokus ul"). Stop (true, false) .animate ({"left": nowleft}, 300); // Gulir elemen UL melalui animate () ke posisi yang dihitung
// $ ("#fokus .btn span"). Removeclass ("on"). EQ (index) .addclass ("on"); // beralih ke efek yang dipilih untuk tombol saat ini
$ ("#fokus .btn span"). stop (true, false) .animate ({"opacity": "0.4"}, 300) .eq (index) .stop (true, false) .animate ({"opacity": "1"}, 300); // beralih ke efek yang dipilih untuk tombol saat ini
}
});
Gambar switching kiri dan kanan digunakan