ホームページ >ウェブフロントエンド >jsチュートリアル >js code_javascript スキルを実装するための画像の表示 (前後) 機能
js code_javascript スキルを実装するための画像の表示 (前後) 機能
- WBOYオリジナル
- 2016-05-16 17:35:27924ブラウズ
注: 画像フォルダー内の画像の名前は 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');
}
})
;
}
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');
}
})
;
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。