この記事の例では、マウス ホバー ストップ カルーセル特殊効果コードの jquery 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:
具体的なコードは次のとおりです:
1. メインプログラム
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet" href="css/layout.css" /> </head> <body> <div class="slideShow"> <!--图片布局开始--> <ul> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="img/picture01.jpg" class="lazy" / alt="jqueryはマウスホバーストップカルーセル特殊効果を実装します_jquery" ></a></li> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="img/picture02.jpg" class="lazy" / alt="jqueryはマウスホバーストップカルーセル特殊効果を実装します_jquery" ></a></li> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="img/picture03.jpg" class="lazy" / alt="jqueryはマウスホバーストップカルーセル特殊効果を実装します_jquery" ></a></li> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="img/picture04.jpg" class="lazy" / alt="jqueryはマウスホバーストップカルーセル特殊効果を実装します_jquery" ></a></li> </ul> <!--图片布局结束--> <!--按钮布局开始--> <div class="showNav"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按钮布局结束--> </div> <script src="js/jquery-1.11.3.js"></script> <script src="js/layout.js"></script> </body> </html>
2. CSS スタイル
*{ margin: 0; padding: 0; } ul{ list-style: none; } .slideShow{ width: 346px; height: 210px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul{ width: 2000px; position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/ } .slideShow ul li{ float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/ width: 346px; } .slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px; line-height: 20px; } .slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; } .slideShow .showNav .active{ background: #b63e1a; }
3. jQuery プログラム
まず、マウス ホバー画像カルーセルを停止する原理について説明します。
- 1. マウスがフレーム上にあるときに、タイマーをクリアし、clearInterval(timer) を使用してタイマーを閉じ、自動カルーセルを停止します
- 2. マウスがフレームから離れたら、タイマーを再起動します
- 3. ホバー機能はマウスをホバーして離れるために使用されます
hover(over,out) ホバー イベント (マウスがオブジェクトの上を移動したり、オブジェクトの外に移動したりする) をシミュレートするメソッド。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。
パラメータ:
Over (関数): マウスが要素上に移動したときにトリガーされる関数。
out (関数): マウスが要素の外に移動したときにトリガーされる関数。
jQuery プログラムを見てみましょう:
$(document).ready(function(){ var slideShow=$(".slideShow"), //获取最外层框架的名称 ul=slideShow.find("ul"), showNumber=slideShow.find(".showNav span"),//获取按钮 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度 var timer=null; //定时器返回值,主要用于关闭定时器 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0 /*手动点击按钮进行图片轮播代码开始*/ showNumber.on("click",function(){ //为每个按钮绑定一个点击事件 $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉 var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值 iNow=index; ul.animate({ "left":-oneWidth*iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNow确定 }) }); /*手动点击按钮进行图片轮播代码结束*/ /*定时自动轮播图片代码开始*/ timer=setInterval(function(){ //打开定时器 iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click },2000); //2000为轮播的时间 /*定时自动轮播图片代码结束*/ /*鼠标悬浮图片停止轮播代码开始*/ slideShow.hover( function(){ clearInterval(timer); },function(){ timer=setInterval(function(){ //打开定时器 iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click },2000); //2000为轮播的时间 } ); /*鼠标悬浮图片停止轮播代码结束*/ })
上の図からわかるように、タイマーを開始するコードが繰り返されているため、ここで自動再生関数 autoPlay() を定義してコードを簡素化できます。簡略化されたコードは次のとおりです。
/*定时自动轮播图片代码开始*/ function autoPlay(){ timer=setInterval(function(){ //打开定时器 iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click },2000); //2000为轮播的时间 } autoPlay(); /*定时自动轮播图片代码结束*/
jQuery プログラムの最終バージョンは次のようになります:
$(document).ready(function(){ var slideShow=$(".slideShow"), //获取最外层框架的名称 ul=slideShow.find("ul"), showNumber=slideShow.find(".showNav span"),//获取按钮 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度 var timer=null; //定时器返回值,主要用于关闭定时器 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0 /*手动点击按钮进行图片轮播代码开始*/ showNumber.on("click",function(){ //为每个按钮绑定一个点击事件 $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉 var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值 iNow=index; ul.animate({ "left":-oneWidth*iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNow确定 }) }); /*手动点击按钮进行图片轮播代码结束*/ /*定时自动轮播图片代码开始*/ function autoPlay(){ timer=setInterval(function(){ //打开定时器 iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click },2000); //2000为轮播的时间 } autoPlay(); /*定时自动轮播图片代码结束*/ /*鼠标悬浮图片停止轮播代码开始*/ slideShow.hover( function(){ clearInterval(timer); },autoPlay ); /*鼠标悬浮图片停止轮播代码结束*/ })
記事 1: 記事 2: この記事が jQuery プログラミングを学ぶすべての人に役立つことを願っています。

实现方法: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、第四个参数可省略,规定当事件发生时运行的函数。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ドリームウィーバー CS6
ビジュアル Web 開発ツール
