jQuery menyedari kesan menukar gambar masuk dan keluar_jquery
Sebelum itu, mari kita lihat apakah kesan yang kita mahukan:
Kami mahu gambar bertukar secara automatik selepas "tempoh masa tertentu". Terdapat petak kecil di sudut kanan bawah yang kelihatan seperti nombor 1, 2, 3 dan 4. Nombor ini muncul secara automatik berdasarkan bilangan gambar apabila tetikus melepasinya. Warna nombor mempunyai perubahan tertentu;
Mari kita lihat cara melaksanakannya.
Langkah pertama: tulis halaman html mudah dahulu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript" src="scrollPic.js" ></script>
<link rel="stylesheet" href="scrollPic.css">
</head>
<body>
<div class="pic-slider-io">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</div>
</body>
</html>src="../js/jquery.js"
Maksud kod ini, "../" bermaksud untuk melompat keluar dari direktori peringkat atas, dan kemudian mencari fail jquery.js dalam folder js
Dalam halaman html, kami menambah div dengan kelas 'pic-slider-io' di dalam badan Terdapat empat gambar di bawah li .jpg. 2.jpg... Mudah untuk menulis scrollPic.js;
Mula-mula lihat gaya halaman yang tidak melakukan apa-apa pada masa ini:
Anda boleh melihat bahawa imej berjubin pada halaman dalam saiz asalnya dan dipaparkan pada halaman dalam mod ul li lalai
Langkah 2: Tulis gaya css untuk mengawalnya
Mula-mula kawal paparan div:
.pic-slider-io{
height : 200px; //设置div的高为200px；
width : 800px; //设置div的宽为800px；
float : letf; //float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
position : relative; //position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定 //位元素会相对于它在正常流中的默认位置偏移。relative 生成相对定位的元素，相对于其正常位置进行定位。
overflow : hidden; //overflow 属性规定当内容溢出元素框时发生的事情.hidden 内容会被修剪，并且其余内容是不可见的。
}
Pastikan semua imej adalah bersama-sama Imej itu sendiri lebih besar daripada lebar dan ketinggian div, jadi limpahan: tersembunyi tidak akan memaparkan limpahan lain untuk meneruskan 
Kemudian, kami kini mengawal gaya ul:
.pic-slider-io ul{
margin : 0px; //设置上下左右的外边距都为0；
padding : 0px;//设置上下左右的内边距都为0； 注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分别对应的是上，右，下，左；
height : auto; //自适应高度，浏览器自动计算
width : 100%; //宽度为100%
list-style-type : none; //把li的点去掉
float : left;
display : block; //此元素将显示为块级元素，此元素前后会带有换行符
position : absolute;//生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
top : 0;
left : 0;
z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
}
Tetapan gaya ini terutamanya untuk menjadikan timbunan li lebih tinggi daripada ul, yang bersamaan dengan terapung di atas ul;
.pic-slider-io ul li {
height: auto;
width: 100%;
float: left;
padding: 0px;
margin: 0px;
overflow: hidden;
z-index:1; //这个li层就比ul那个叠层更高
}
Sekarang mari kita lihat rupa halaman tersebut:
.pic-slider-io ul li img{
width: 100%;
z-index:1;//设置图片和li在同一层上，这个应该没问题吧
}
Lihat, selepas penggayaan, keseluruhan imej dipaparkan;
Langkah 3: Tulis scrollPic.js
.pic-page-btn {//这是在父div中的子div样式，用于显示在右下角的数字承载模块
float: left;
width: auto;
height: 30px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 99; //他的叠层比父级div还要高，把这个按钮样式放在图片之上
}
.pic-page-btn span{ //这个是设置子div的数字样式
height: 30px;
width: 30px;
background-color: #999;
display: block;
float: left;
line-height: 30px;
text-align: center;
color: #FFF;
margin-right: 10px;
cursor:pointer;
}
.pic-page-btn .current {//这是将要设置鼠标滑过改变其背景颜色
background-color: #1D5D76;
}
Di sini kita hampir selesai menukar imej,
Kemudian mari kita panggil yang lalai dalam html dan lihat:
$(function(){
$.scrollPic = function (options){ //定义了一个scrollPic函数，有一个传参，用于调用；
/************************开始整个默认插件参数讲解*******************************/
//整个defaults以花括号包含的是默认的参数，调用此插件的只需要修改ele，Time，autoscroll即可；
var defaults={
ele: '.pic-slider-io', //pic-slider-io是一个class，css中定义了其样式；
Time : '2000', //Time是定义了滑动的时间；
autoscroll : true //autoscroll设为true表示自动切换图片；
};
/************************结束整个默认插件参数讲解*******************************/
//$.extend({},defaults, option)有{}主要是为了创建一个新对象，保留对象的默认值。
var opts = $.extend({}, defaults, options);
//$(opts.ele)可以理解为取这个执行，与$('.class1').click();类似表示，然后理解为赋值给PicObject；
//或者这样理解,$(opts.ele)就是$('.pic-slider-io')，只不过（.pic-slider-io是个class作为参数，所以要(opts.ele)来表示）；
var PicObject = $(opts.ele);
//PicObject.find('ul')，这个可以理解成$(opts.ele).find('ul'),因为opts.ele其实就是取得的一个class，
//相当于$('.pic-slider-io').find('ul');然后赋值给scrollList，所以整个就用scrollList来表示他；
var scrollList = PicObject.find('ul');
//同理scrollList.find('li')可以表示为$('.pic-slider-io').find('ul').find('li');所以这个是一层一层来查找的如果你看到html就会更加清晰；
var listLi = scrollList.find('li');
//图片的命名是1.jpg,2.jpg,这样的，index是用来表示图片的名字的初始化赋值为0；
var index = 0;
//这是定义一个picTimer(自动切换函数)的函数；
var picTimer;
//一个li中包含一个图片，所以这是查找有多少个图片，赋值给len；
var len = PicObject.find('li').length;
/*****************开始自动切换函数************************/
function picTimer(){
showPic(index);//调用showPic(index)函数(在下面)
index++;
if(index == len){//如果index的值等于len，就表示从第一张图片到最后一张图片切换完了，然后是index赋值为0重新开始
index=0;
}
}
/*****************结束自动切换函数************************/
//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
//此判断为如果autoscroll为true，则不停的调用picTimer函数，以Time的速度调用
if(opts.autoscroll){
var time = setInterval(picTimer,opts.Time);
}
/*****************开始动画函数************************/
function showPic(index){//定义动画函数
//listLi是找到第一个li，然后隐藏他，listLi在var listLi = scrollList.find('li');已经介绍了
listLi.hide();
//fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。siblings()方法是遍历。
listLi.eq(index).fadeIn(500).siblings().hide();
//找到paging对应的css样式，如果与当前的index一致，则添加class为current的css样式，否则就移除。
PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current');
}
/*****************结束动画函数************************/
//这是在class为pic-slider-io的div中添加一个class为pic-page-btn的子div。
//主要是设置右下角数字的承载
PicObject.append('<div class="pic-page-btn"></div>');
//在这个class为pic-page-btn的子div中添加图片张数对应的数字个数，1,2,3，，，，，
//从这可以看出来，数字不是自己一个个添得，是根据li的个数，也就是图片的个数自动生成的
for( i=1;i<=len;i++){
PicObject.find('.pic-page-btn').append('<span>'+i+'</span>');
}
//这个就是和上面讲listLi一样的
var paging = PicObject.find('.pic-page-btn span');
//为相应的右下角的数字改变其背景颜色
paging.eq(index).addClass('current');
}
});
Lihat paparan antara muka:
<script type="text/javascript">
$(function(){
$.scrollPic();
});
</script>
paging.eq(index).addClass('current');
//鼠标经过1、2、3、4的效果
PicObject.find(paging).mouseover(function(){
index = PicObject.find(paging).index($(this));
showPic(index); //调用showPic(index)函数。
});
//鼠标经过1、2、3、4的效果
//清除计时器
//当鼠标悬浮在1,2,3,4上面的时候，就相当于要切换图片了
//所以我们就要清除计时器，重新来过了
PicObject.hover(function(){
clearInterval(time);//这个是相对于setInterva()的；
},function(){
if(opts.autoscroll){
time = setInterval(picTimer,opts.Time);
}else{
clearInterval(time);
}
});
Sila lihat menggunakan pemalam dengan parameter:
Baiklah, penerangan keseluruhan plug-in saya harap semua orang dapat mengambil iktibar daripadanya. (Akhir sekali, apabila menulis keseluruhan js, sebaiknya tambahkan koma bertitik di hadapan $(function(){}); untuk mengelakkan konflik dengan js lain)
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat 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
1387
52
Apakah direktori pemasangan sambungan pemalam Chrome?
Mar 08, 2024 am 08:55 AM
Apakah direktori pemasangan sambungan pemalam Chrome? Dalam keadaan biasa, direktori pemasangan lalai pelanjutan pemalam Chrome adalah seperti berikut: 1. Lokasi direktori pemasangan lalai pemalam chrome dalam windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2 chrome dalam windows7 Lokasi direktori pemasangan lalai pemalam: C:\Users\username\AppData\Local\Google\Chrome\User.
Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini
Mar 13, 2024 pm 04:34 PM
Apabila pengguna menggunakan penyemak imbas Edge, mereka mungkin menambahkan beberapa pemalam untuk memenuhi lebih banyak keperluan mereka. Tetapi apabila menambah pemalam, ia menunjukkan bahawa pemalam ini tidak disokong. Bagaimana untuk menyelesaikan masalah ini? Hari ini, editor akan berkongsi dengan anda tiga penyelesaian. Kaedah 1: Cuba gunakan pelayar lain. Kaedah 2: Flash Player pada penyemak imbas mungkin sudah lapuk atau tiada, menyebabkan pemalam tidak disokong Anda boleh memuat turun versi terkini dari tapak web rasmi. Kaedah 3: Tekan kekunci "Ctrl+Shift+Delete" pada masa yang sama. Klik "Kosongkan Data" dan buka semula penyemak imbas.
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?
Feb 28, 2024 am 08:39 AM
Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi keperluan untuk memanipulasi atribut ketinggian elemen. Kadangkala, kita mungkin perlu menukar ketinggian unsur secara dinamik, dan kadangkala kita perlu mengalih keluar atribut ketinggian unsur. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar atribut ketinggian elemen dan memberikan contoh kod khusus. Sebelum menggunakan jQuery untuk mengendalikan atribut ketinggian, kita perlu terlebih dahulu memahami atribut ketinggian dalam CSS. Atribut ketinggian digunakan untuk menetapkan ketinggian elemen
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Cara Google Chrome membenarkan pemalam animasi dijalankan
Mar 28, 2024 am 08:01 AM
Bagaimanakah Google Chrome membenarkan pemalam animasi dijalankan? Google Chrome sangat berkuasa. Ramai rakan suka menggunakan pelayar ini untuk menonton animasi video Namun, jika anda ingin menonton pelbagai video animasi, anda perlu memasang pemalam animasi Ramai rakan menggunakan Google Chrome pemalam animasi, saya masih tidak mengambil berat tentang video Bagaimana saya harus menangani masalah ini? Seterusnya, biarkan editor menunjukkan kepada anda langkah-langkah khusus untuk membenarkan pemalam animasi dijalankan dalam Google Chrome Rakan-rakan yang berminat boleh datang dan melihat. Langkah khusus untuk Google Chrome membenarkan pemalam animasi dijalankan: 1. Mula-mula jalankan Google Chrome pada komputer anda dan klik butang menu utama di penjuru kanan sebelah atas halaman utama (seperti yang ditunjukkan dalam gambar). 2. Selepas membuka menu utama, pilih pilihan "Tetapan" di bawah (seperti yang ditunjukkan dalam gambar). 3. Dalam tetapan
Bagaimana untuk menyahsekat pemalam Google Chrome
Apr 01, 2024 pm 01:41 PM
Bagaimana untuk menyahsekat pemalam Google Chrome? Ramai pengguna suka memasang pelbagai pemalam yang berguna apabila menggunakan Google Chrome ini boleh menyediakan fungsi dan perkhidmatan yang kaya dan meningkatkan kecekapan kerja Walau bagaimanapun, sesetengah pengguna mengatakan bahawa selepas memasang pemalam dalam Google Chrome, pemalam itu akan sentiasa dipaparkan disekat, jadi bagaimana anda boleh menyahsekat pemalam selepas menghadapi situasi ini? Sekarang biarkan editor menunjukkan kepada anda langkah untuk menyahsekat pemalam dalam Google Chrome Rakan yang memerlukan perlu datang dan melihat. Bagaimana untuk menyahsekat pemalam dalam Google Chrome Langkah 1. Apabila gesaan yang disekat muncul, klik "Control Bar" dan pilih "Install ActiveX Control". 2. Kemudian buka menu "Tools" pelayar dan klik "Internet Options". 3.
