1. Sisipkan layer di DreamWeaver dan gunakan layer ini sebagai area gulir. Atur parameter lapisan sebagai berikut:
Atur nomor lapisan menjadi: slayer, yang merupakan atribut ID lapisan tersebut.
Nilai kiri dan atas adalah posisi lapisan pada halaman dan dapat diatur sesuai kebutuhan;
Lebar dan tinggi merupakan ukuran layer dan juga diatur sesuai kebutuhan;
Klip mengacu pada area tampilan lapisan, dan bagian di luar klip disembunyikan. Kami menggunakan area tampilan ini untuk menyembunyikan bagian kanan lapisan, dan kemudian mengontrol pergerakan lapisan sambil mengontrol area tampilan ini untuk menyelesaikan pengguliran. efek area yang kita inginkan.
Atur kanan ke lebar tampilan, di sini ke 340; bagian bawah sama dengan tinggi.
Berikut ini adalah kode untuk lapisan tersebut:
< div id="slayer" style="position:absolute; atas: 120px; kiri: 100px; klip: rect(0 340 120 0); tinggi: 120px; warna latar: #CCCCCC; warna latar belakang lapisan: # CCCCCC; batas: 1px tidak ada #000000; lebar: 670px" >
Kita dapat menempatkan beberapa gambar secara horizontal di dalam layer, di sini kita menggunakan tabel sebagai gantinya. Ukuran lapisan yang diatur di atas cukup untuk menampung semua gambar.
2. Kode berikut adalah kode scrolling layer yang kita sisipkan di bawah tanda layer <div>:
Saat menyisipkan, perhatikan bahwa nilai layerW adalah nilai di sisi kanan klip, yaitu 340 di sini.
< bahasa skrip="javascript" >
< !-- //oleh semua
var layerW=340; //Mengatur lebar area tampilan
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.kiri);
var layerT=parseInt(slayer.style.top);
var langkah=0; //nilai gulir
fungsi movstar(a,waktu){
jika (a< 0&&langkah >-parseInt(slayer.scrollWidth)+lapisanW||a >0&&langkah< 0)
bergerak(a);
movx=setTimeout("movstar("+a+","+waktu+")",waktu);
}
perpindahan fungsi(){
batas waktu habis(movx);
}
fungsi bergerak(a){
slayer.style.left = (langkah+=a) + layerL;
clipL=0 langkah;
clipR=lapisanW-langkah;
klipB=lapisanH;
klipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /skrip >
3. Sisipkan layer lain untuk menempatkan "tombol kontrol".
Lapisan ini terletak di bawah lapisan sebelumnya dan digunakan untuk menempatkan “tombol kontrol”. Posisinya dapat diatur sesuai kebutuhan, seperti gambar di bawah ini. Kita menggunakan blok warna pada tabel sebagai tombol kontrol disini. Akan lebih baik jika kita membuat dua gambar berbentuk panah.
4. Tambahkan kode berikut di tag "Tombol Kontrol".
Ini ditambahkan di tag tabel <td>. Jika Anda menggunakan gambar sebagai tombol, tambahkan di tag <img>.
Tombol kiri:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Tombol kanan:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
Arti dari kode di atas adalah ketika mouse menunjuk ke tombol, tindakan dimulai, menekan dan menahan tombol akan mempercepat, mouse meninggalkan tombol untuk menghentikan tindakan, dan tanda - menunjukkan pergerakan ke arah yang berlawanan.
5. Lengkap
Saat mouse menunjuk ke "Tombol Kontrol", ia akan menggulir ke kiri atau ke kanan. Mengklik dan menahan mouse akan mempercepat pengguliran.
Kode keseluruhannya adalah: (dapat disalin dan diuji di area BODY)
< div id="slayer" style="position:absolute; atas: 120px; kiri: 100px; klip: rect(0 340 120 0); tinggi: 120px; warna latar: #CCCCCC; warna latar belakang lapisan: # CCCCCC; batas: 1px tidak ada #000000; lebar: 670px" >
< bahasa skrip="javascript" >
< !-- //oleh semua
var layerW=340; //Mengatur lebar area tampilan
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.kiri);
var layerT=parseInt(slayer.style.top);
var langkah=0; //nilai gulir
fungsi movstar(a,waktu){
jika (a< 0&&langkah >-parseInt(slayer.scrollWidth)+lapisanW||a >0&&langkah< 0)
bergerak(a);
movx=setTimeout("movstar("+a+","+waktu+")",waktu);
}
perpindahan fungsi(){
batas waktu habis(movx);
}
fungsi bergerak(a){
slayer.style.left = (langkah+=a) + layerL;
clipL=0 langkah;
clipR=lapisanW-langkah;
klipB=lapisanH;
klipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /skrip >
< tabel cellpacing="10" border="0" cellpadding="0" >
<tr bgcolor="#FFCC99" >
< td tinggi = "100" lebar = "100" > </ /td >
< td tinggi = "100" lebar = "100" > </ /td >
< td tinggi = "100" lebar = "100" > </ /td >
< td tinggi = "100" lebar = "100" > </ /td >
< td tinggi = "100" lebar = "100" > </ /td >
< td tinggi = "100" lebar = "100" > </ /td >
< /tr >
< /tabel >
< /div >
< div id="Layer1" style="position:absolute; lebar:344px; tinggi:20px; z-index:1; kiri: 97px; atas: 244px" >
< lebar tabel="100%" tinggi="100%" >
<tr>
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover() ;movstar(1,20)" lebar="14" >< /td >
< td >< /td >
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover ();movstar(-1,20)" lebar="14" >< /td >
< /tr >
< /tabel >
< /div >