コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > js code_javascript スキルを実装するための画像の表示 (前後) 機能

js code_javascript スキルを実装するための画像の表示 (前後) 機能

WBOY
リリース： 2016-05-16 17:35:27
オリジナル
925 人が閲覧しました

注: 画像フォルダー内の画像の名前は 1 から 5.jpg です。
宣言された var array = [1, 2, 3, 4, 5]; この配列には画像の名前が格納されます。 🎜>

コードをコピーします コードは次のとおりです。

;
;







< td>

;style type=" text/css"> #mydiv { 幅: 500px; 上: 50%; 🎜>左: 50 %; マージン-左: -290 ピクセル; img
{
幅: 480 ピクセル; : 380px;
}

type="text/ javascript">
$(function () {
//最初のメソッド
/*
$('#btn1').toggle(function () { $(' img') .attr('src', 'images/1.jpg'); },
function () { $('img').attr('src', 'images/2.jpg'); },
function () { $('img').attr('src', 'images/3.jpg'); },
function () { $('img').attr(' src', 'images/4.jpg'); },
function () { $('img').attr('src', 'images/5.jpg' }); 🎜>$ ('#btn2').toggle(function () { $('img').attr('src', 'images/5.jpg'); },
function () { $(' img') .attr('src', 'images/4.jpg'); },
function () { $('img').attr('src', 'images/3.jpg'); },
function () { $('img').attr('src', 'images/2.jpg'); },
function () { $('img').attr(' src', 'images/1.jpg') });
*/

//2 番目のメソッド

var array = [1, 2, 3, 4, 5 , 6 ];
var count = 0;
//Back
$('#btn1').click(function () {
if (count > 0) {
count -- ;
$('img').attr('src', 'images/' array[count] '.jpg')
}
})
//転送
$ ('#btn2').click(function () {
if (count < 5) {
count ;
$('img').attr('src', 'images/ ' 配列 [カウント] '.jpg');
}
})

;








関連ラベル：
アイコン
ソース：php.cn
前の記事：アップロードしたjs検証（画像・ファイル拡張子）_javascriptスキル 次の記事：7 つの目を引く jQuery/CSS3 特殊効果の共有 example_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
MySQL でグループ化してカウントするにはどうすればよいですか? 友人に送信され、削除されていないメッセージの合計数を抽出するクエリを作成しようとしています。これはテーブル構造のスクリーンショットです。 達成したい出力は次のとおりです。 idme...
から 2024-04-06 18:30:17
0
1
353
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート