写真を自動または手動で切り替える方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

写真を自動または手動で切り替える方法

小云云

Jan 30, 2018 am 09:21 AM

スイッチ自動

JS を学習していたとき、興味深い小さな例をたくさん集めましたが、これらの JS 効果を示すための優れたプラットフォームを見つけるのに苦労したため、それらを皆さんと共有するのが待ちきれませんでした。この記事では、jQuery の自動または手動画像切り替えエフェクトを中心に詳しく紹介します。興味のある方は参考にしていただければ幸いです。

大手ショッピングモールのウェブサイトや一部のウェブサイトのホームページを閲覧すると、このウェブサイトに関連するリアルタイム切り替え画像が表示されます。この記事では、jQuery を使用して画像の自動切り替えを実現する例を紹介します。

ホームページのコアコード (Default.aspx):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>jQuery实现图片切换</title>  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/tupianqiehuan.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/tupianqiehuan.css"> 
</head> 
<body> 
    <p class="wrapper"> 
        <h1>jquer实现图片切换</h1> 
        <p id="focus"> 
            <ul> 
                <li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/02.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/03.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/04.jpg" alt="" /></a></li><span style="white-space:pre">                 </ul> 
        </p> 
    </p> 
</body> 
</html>

ログイン後にコピー

CSS コード (tupianqiehuan.css):

*{margin:0;padding:0;} 
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix{zoom:1;} 
ul,li{list-style:none;} 
img{border:0;} 
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 
/* focus */ 
#focus{width:800px;height:280px;overflow:hidden;position:relative;} 
#focus ul{height:380px;position:absolute;} 
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} 
#focus ul li p{position:absolute;overflow:hidden;} 
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 
#focus .btn span.on{background:#fff;} 
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;} 
#focus .pre{left:0;} 
#focus .next{right:0;background-position:right top;}

ログイン後にコピー

JS コード (tupianqiehuan.js):

りー

ホットAIツール

ホットツール

ホットトピック

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

7533

CakePHP チュートリアル

1379

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

Win11 Activation Key Permanent

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

Related knowledge

Xiaomi Mi 14Ultraで4gと5gを切り替えるにはどうすればよいですか? Feb 23, 2024 am 11:49 AM

Xiaomi 14Ultraは、今年最も人気のあるXiaomiモデルの1つです.Xiaomi 14Ultraは、プロセッサとさまざまな構成をアップグレードするだけでなく、多くの新しい機能アプリケーションをユーザーにもたらします.これは、Xiaomi 14Ultra携帯電話の販売からもわかります.人気がありますが、まだ知られていない一般的に使用される機能がいくつかあります。では、Xiaomi 14Ultraはどのようにして4gと5gを切り替えるのでしょうか？以下に具体的な内容をご紹介していきます！ Xiaomi 14Ultraで4gと5gを切り替えるにはどうすればよいですか? 1. 電話機の設定メニューを開きます。 2. 設定メニューで「ネットワーク」および「モバイルネットワーク」オプションを見つけて選択します。 3. モバイルネットワーク設定に、[優先ネットワークタイプ] オプションが表示されます。 4. このオプションをクリックまたは選択すると、次の内容が表示されます。

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 バージョンにアップグレードできます。

Win10システムでデュアルシステム切り替えを実装する方法 Jan 03, 2024 pm 05:41 PM

Win システムに初めて触れたとき、多くの友人は慣れていないかもしれません。コンピューターにはデュアルシステムがあります。現時点では、実際に 2 つのシステムを切り替えることができます。切り替えの詳細な手順を見てみましょう。 2 つのシステム間で。 win10システムで2つのシステムを切り替える方法 1. ショートカットキーの切り替え 1. 「win」+「R」キーを押してファイル名を指定して実行を開きます 2. 実行ボックスに「msconfig」と入力し、「OK」をクリックします 3. 開いた「」で「システム構成」インターフェイスで、必要なシステムを選択し、「デフォルトとして設定」をクリックします。完了後、「再起動」で切り替えを完了できます。方法 2. 起動時に切り替えを選択します。 1. デュアルシステムの場合、選択操作インターフェイス起動時に表示されます。キーボードの「上下キー」を使用してシステムを選択できます。

Apple コンピュータのデュアルシステムブートモードを切り替える Feb 19, 2024 pm 06:50 PM

起動時に Apple デュアルシステムを切り替える方法 Apple コンピュータは強力なデバイスなので、独自の macOS オペレーティングシステムに加えて、Windows などの他のオペレーティングシステムをインストールしてデュアルシステム切り替えを実現することもできます。では、起動時に 2 つのシステムを切り替えるにはどうすればよいでしょうか?この記事では、Apple コンピュータのデュアルシステムを切り替える方法を紹介します。まず、デュアルシステムをインストールする前に、Apple コンピュータがデュアルシステムの切り替えをサポートしているかどうかを確認する必要があります。一般的に言えば、Apple コンピュータは以下に基づいています。

JavaScriptを使用した自動サムネイル生成 Jun 16, 2023 pm 12:51 PM

インターネットの発展に伴い、Web ページに写真は欠かせないものになりました。しかし、画像の数が増えると、画像の読み込み速度が非常に重要な問題になります。この問題を解決するために、多くの Web サイトではサムネイルを使用して画像を表示していますが、サムネイルを生成するには専門的な画像処理ツールを使用する必要があり、専門家以外の人にとっては非常に面倒です。その場合、JavaScript を使用してサムネイルの自動生成を実現するのが良い選択になります。 JavaSの使い方

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

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

Linux でのドライブの自動マウント Mar 20, 2024 am 11:30 AM

Linux オペレーティングシステムを使用していて、システムが起動時にドライブを自動的にマウントするようにしたい場合は、デバイスの一意の識別子 (UID) とマウントポイントのパスを fstab 構成ファイルに追加することでこれを行うことができます。 fstab は、/etc ディレクトリにあるファイルシステムテーブルファイルで、システムの起動時にマウントする必要があるファイルシステムに関する情報が含まれています。 fstab ファイルを編集すると、システムを起動するたびに必要なドライブが正しくロードされるようになり、システムの安定した動作が保証されます。ドライバーの自動マウントはさまざまな場面で便利に使えます。たとえば、システムを外部ストレージデバイスにバックアップする予定です。自動化を実現するには、起動時であってもデバイスがシステムに接続されたままであることを確認してください。同様に、多くのアプリケーションは直接

Linux のヒント: vim に貼り付けるときに自動インデントをキャンセルする Mar 07, 2024 am 08:30 AM

はじめに: vim は強力なテキスト編集ツールであり、Linux で非常に人気があります。最近、別のサーバーで vim を使用しているときに、奇妙な問題が発生しました。ローカルで作成したスクリプトをコピーしてサーバー上の空のファイルに貼り付けると、自動インデントが発生しました。簡単な例を使用すると、ローカルで作成したスクリプトは次のとおりです: aaabbbcccddd。上記の内容をコピーしてサーバーの空のファイルに貼り付けると、取得されるものは次のとおりです: aabbbcccddd。明らかに、これは vim が自動的に行うことです。インデントをフォーマットします。ただし、このオートマチックは少し知性がありません。解決策をここに記録します。解決策: ホームディレクトリに .vimrc 構成ファイルを設定します。

See all articles

写真を自動または手動で切り替える方法

ホット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版

ホットトピック