Artikel ini menerangkan contoh tutorial melaksanakan karusel imej skrin lebar dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:
Perkenalkan perpustakaan jquery
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
Bina html
Keseluruhan kod dibahagikan kepada tiga bahagian:
1. Memuatkan bahagian
2. Di bahagian gambar, hanya boleh ada 4 gambar di sini Kawan-kawan yang berminat boleh memperbaikinya;
3. Bahagian butang TAB Sudah tentu, hanya terdapat 4 butang di sini, dan ia juga perlu diperbaiki.
<div class="gg" id="gg"> <div class="ggLoading"> <div class="ggLoading2"><em>精彩活动载入中</em></div> </div> <div class="ggs"> <div class="ggBox" id="ggBox"> <a href="#" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;"> <img src="/static/imghwm/default1.png" data-src="images/1.jpg" class="lazy" alt="" /></a> <a href="#" title="首测世界的雕琢篇章开启"> <img src="/static/imghwm/default1.png" data-src="images/2.jpg" class="lazy" alt="" /></a> <a href="#" title="上古世纪游戏资料手册"> <img src="/static/imghwm/default1.png" data-src="images/3.jpg" class="lazy" alt="" /></a> <a href="#" title="游戏四大特色揭晓"> <img src="/static/imghwm/default1.png" data-src="images/4.jpg" class="lazy" alt="" /></a> </div> </div> <div class="ggb"> <div class="ggBtns" id="ggBtns"> <a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a> <a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a> <a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a> <a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a> </div> </div> </div>
Gaya CSS
CSS di sini boleh disesuaikan mengikut keperluan projek Anda tidak perlu mematuhi kod di bawah, selagi anda memahami prinsipnya. Jika anda tidak memahami CSS di bawah, sila tebusnya saya tidak akan menerangkannya satu per satu di sini.
.ggLoading, .ggLoading2 { background-image: url(../images/nav.png); } .gg { width: 100%; height: 500px; position: relative; z-index: 1; overflow: hidden; margin: 0 auto; background: #d3d3d3 url(../images/loading.jpg) repeat-x; } .ggLoading { position: absolute; left: 40%; top: 200px; width: 325px; text-align: center; height: 56px; background-position: 0 -274px; background-repeat: no-repeat; line-height: 56px; color: #9c9c9c; } .ggLoading2 { width: 330px; height: 56px; background-position: 213px -330px; background-repeat: no-repeat; } .ggLoading em { font-weight: bold; } .ggs { width: 200%; height: 500px; left: -50%; top: 0; position: absolute; } .ggBox { width: 1920px; height: 500px; margin: 0 auto; } .ggBox a { display: block; width: 1920px; height: 500px; position: absolute; z-index: 1; opacity: 0.1; } .ggBox img { display: block; width: 1920px; height: 500px; } .ggb { position: absolute; width: 100%; left: 0; bottom: 0; height: 40px; z-index: 4; background-color: #32342e; background-repeat: repeat-x; background-position: 50% -40px; } .ggBtns { width: 960px; height: 40px; margin: 0 auto; border-left: 1px solid #090908; border-right: 1px solid #6a6a60; } .ggBtns a { float: left; display: block; width: 240px; height: 40px; text-align: center; padding-top: 10px; color: #848380; font-size: 14px; line-height: 40px; background-position: 0 10px; position: relative; top: -10px; outline: none; background-repeat: no-repeat; cursor: pointer; } .ggBtns a em { display: block; width: 210px; height: 40px; margin: 0 auto; overflow: hidden; } .ggBtns a:hover { color: #e7e7e7; } .ggBtns a:focus { outline: none; } .ggBtns a.ggOn { color: #e7e7e7; background-position: 0 0; } .ggb, .ggBtns a { background-image: url(../images/main.jpg); } a.ggOn { background-image: url(../images/gg.png); }
Kod JS
Akhirnya, kita telah sampai ke bahagian penting. Tidak banyak kod dalam bahagian ini, jadi mari kita lihat.
$(function () {//文档加载后执行 //定义$con,$box,$btns,$i变量,autoChange自动播放函数,loop定时器。 var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0, autoChange = function () { i += 1;//计数器+1 if (i === 4) { i = 0; }//如果计数器i等4就把i重置为0. $btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn'); //找到TAB按钮中的第i个a标签,为其加上ggOn的样式,同时移除所有同级的a标签ggOn样式 var curr = $box.find('a:eq(' + i + ')'), prev = curr.siblings(); //定义curr变量,并赋值为$box中当前显示图片的a标签,定义prev变量,赋值为$box中除了当前显示图片的A标签外的所有A标签。 prev.css('z-index', 2);//$box中除了当前显示图片的A标签外的所有A标签的index值变为2,即向下移一层 curr.css('z-index', 3).animate({ //$box中当前显示图片的a标签index值变为3,即向上移一层,然后使用jquery动画以150毫秒把透明度变为1,之后执行匿名函数function。 'opacity': 1 }, 150, function () { //$box中除了当前显示图片的A标签外的所有A标签的index值变为1,并把透明度变为0.1 prev.css({ 'z-index': 1, 'opacity': 0.1 }); }); }, loop = setInterval(autoChange, 5000);//定义定时器,每5秒执行一次autoChange函数,达到自动播放效果。 $con.hover(function () { //定义鼠标悬浮与离开事件 clearInterval(loop); //鼠标悬浮时移除Loog定时器,即停止播放 }, function () { loop = setInterval(autoChange, 5000); //鼠标离开时载放Loog定时器,继续播放 }); $btns.find('a').click(function () {//定义tab按钮事件 i = $(this).index() - 1; //tab按钮中当前A标签的index值-1,并赋值给i计数器 autoChange(); //调用切换方法切换图片 }); });
1. Penukaran imej
Gunakan i sebagai kaunter, paparkan gambar pada masa ini untuk i, sembunyikan semua gambar lain, tambah gaya ggOn pada butang pada masa ini untuk i, keluarkan gaya ggOn untuk butang lain, dan saya akan menambah setiap kali fungsi pensuisan dipanggil 1.
2. Main automatik
Tentukan gelung pemasa untuk memanggil fungsi pensuisan setiap 5 saat.
3. Acara tuding tetikus
Ternyata pemasa gelung dikosongkan apabila tetikus melayang, dan pemasa gelung dimuatkan apabila tetikus pergi.
4. Acara butang
Ikat peristiwa klik butang tab Selepas mengklik, tetapkan i nilai indeks butang tab semasa -1, dan panggil fungsi pensuisan.

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


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

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
