jqueryで画像スライド切り替えを実装（コード付き）-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryで画像スライド切り替えを実装（コード付き）

php中世界最好的语言

Apr 24, 2018 am 10:48 AM

jquery スイッチ滑り台

今回は、jQueryで画像スライド切り替えを実装するための注意事項を紹介します。実際のケースを見てみましょう。

JQueryはシンプルな画像スライド切り替え効果を実装しています

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>t图片的滑动</title>
  <meta charset="utf-8" />
  <style type="text/css" >
    *{
      margin:0;
      padding:0;
    }
    #main{
      width:1089px;
      height:360px;
      margin:100px;
      background:url(../image/7.png);
    }
    ul li{
      list-style:none ;
      width:100px;
      height:360px;
      float:left;
    }
    a{
      color:#ffffff;
      text-decoration:none;
    }
    .txt{
      width:100px;
      height:360px;
      float:left;
      background:rgb(182, 255, 0);
    }
    p{
      font-family :"Arial.black",Gadugi.sans-serif ;
      font-size:18x;
      position:relative ;
      width:18px;
      font-weight:bold ;
      margin-top :120px;
      margin-left:48px;
    }
    .li1 {
      background: url( ../image/43.png);
    }
    .li2{background: url( ../image/42.png);}
    .li3{background: url( ../image/39.png);}
    .li4{background: url( ../image/47.png);}
  </style>
  
</head>
<body>
  <p id="main">
    <ul>
      <li class=" li1"><a href=" #"><p class=" txt"><p>风景1</p></p></a></li>
      <li class=" li2"><a href=" #"><p class=" txt"><p>风景2</p></p></a></li>
      <li class=" li3"><a href=" #"><p class=" txt"><p>风景3</p></p></a></li>
      <li class=" li4"><a href=" #"><p class=" txt"><p>风景4</p></p></a></li>
    </ul>
  </p>
  <script type="text/javascript" src="../Jqurey/jquery.min.js"></script>
  <script >
    $('ul li').hover(function(){
      $(this).stop(true).animate({ width: '789px' }, 500).siblings().stop(true).animate({width:'100'},500);
    })
  </script>
</body>
</html>

ログイン後にコピー

jQueryの下から上への画像スクロール効果は、jQuery animateメソッドによって生成される下から上への画像スクロール効果です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现图片从下往上滑动切换效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.box .box1').mouseover(function(){
		$(this).stop().animate({"top":"-514px"}, 200); 
	})
	$('.box .box1').mouseout(function(){
		$(this).stop().animate({"top":"0"}, 200); 
	})
})
</script>
</head>
<body>
<p id="in_ct">
<!----------in_ct开始---------->
	<p class="in_ct">	
 	<!----------in_ct1 开始---------->
   <p class="in_ct1">
   	<ul class="box">
     <li>
      <p class="box1">
       <p class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
     <li>
      <p class="box1">
       <p class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
     <li>
     	<p class="box1">      
       <p class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
     <li>
     	<p class="box1">
       <p class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
    </ul> 
   </p>
  <!----------in_ct1 结束---------->
	</p>
<!----------in_ct结束---------->
</p>
</body>
</html>

ログイン後にコピー

上記のデモ画像

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery miniuiテーブルコントロールと結合セルの実装方法

オーバーレイ3Dテキストメソッドのjquery実装の詳細な説明

以上がjqueryで画像スライド切り替えを実装（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7564

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

win11 home版からprofessional版へ切り替える操作チュートリアル_win11 home版からprofessional版へ切り替える操作チュートリアル Mar 20, 2024 pm 01:58 PM

Win11 Home Edition を Win11 Professional Edition に変換するにはどうすればよいですか? Win11 システムは Home Edition、Professional Edition、Enterprise Edition などに分かれており、ほとんどの Win11 ノートブックには Win11 Home Edition システムがプリインストールされています。今日は、エディターが win11 ホームバージョンからプロフェッショナルバージョンに切り替える手順を示します! 1. まず、win11 デスクトップとプロパティでこのコンピューターを右クリックします。 2. 「プロダクトキーの変更」または「Windows のアップグレード」をクリックします。 3. 入力後、「プロダクトキーの変更」をクリックします。 4. アクティベーションキー 8G7XN-V7YWC-W8RPC-V73KB-YWRDB を入力し、[次へ] を選択します。 5.その後、成功を促すメッセージが表示されるので、win11 home バージョンを win11 professional バージョンにアップグレードできます。

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

Excelでブックを切り替えるショートカットキーの使い方 Mar 20, 2024 pm 01:50 PM

Excel ソフトウェアのアプリケーションでは、一部の操作を簡単かつ迅速に行うためにショートカットキーを使用することに慣れています。Excel の複数のテーブル間に関連するデータがある場合があります。それを表示するときに、タスクを常に切り替える必要があります。高速な切り替え方法を使用すると、切り替えにかかる無駄な時間が大幅に節約され、作業効率が大幅に向上します。クイック切り替えを完了するにはどのような方法を使用できますか? この問題に対処するために、今日は編集者がそれについてお話します。内容は次のとおりです。 Excel でブックを切り替えるショートカットキーを使用します。 1. まず、開いた Excel テーブルの下部に複数のワークブックが表示されますが、下の図に示すように、異なるワークブックをすばやく切り替える必要があります。 2. 次に、キーボードの Ctrl キーを動かさずに押し、必要に応じて右側のジョブを選択します。

全角と半角を理解する: 切り替えテクニックの概要 Mar 25, 2024 pm 01:36 PM

日常生活の中で「全角」と「半角」の問題に遭遇することは多いですが、その意味や違いを深く理解している人は少ないかもしれません。全角と半角は実際には文字エンコード方式の概念であり、コンピュータの入力、編集、植字などに特別な用途があります。この記事では、全角と半角の違い、切り替えテクニック、実際のアプリケーションについて詳しく説明します。まず、漢字における全角と半角の定義は、全角文字は1文字位置を占め、半角文字は1文字位置の半分を占めます。コンピューターでは、パスします

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

全角と半角を切り替える方法を簡単に学ぶ Mar 25, 2024 pm 03:42 PM

全角と半角は、中国語の入力方法における 2 つの異なる入力状態を指します。全角は各文字が全角の文字位置を占めることを意味し、半角は各文字が半角の文字位置を占めることを意味します。コンピューターを使用して中国語を入力する場合、さまざまな入力シナリオに適応するために全角と半角を切り替える必要がある場合があります。次に、中国語入力で全角と半角を切り替える方法を誰でも簡単に学べるように、一般的に使用される全角と半角の切り替え方法をいくつか紹介します。方法 1: ショートカットキーを使用して全角と半角を切り替えるほとんどの中国語入力方式ソフトウェアでは、

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

See all articles

jqueryで画像スライド切り替えを実装（コード付き）

オーバーレイ3Dテキストメソッドのjquery実装の詳細な説明

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック