jQueryを使ったシンプルな画像切り替えスクリプト : JavaScript
クリックで画像を切り替えるシンプルなスクリプト
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>simple slide sho</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/slide.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
jQuery(function($) {
$('.slide').slide();
});
</script>
</head>
<body><div class="slide">
<div class="view">
<div class="item active"><img src="http://farm6.staticflickr.com/5459/7400857386_99f1b0cc94_m.jpg" alt="slide1, photo1"></div>
<div class="item"><img src="http://farm8.staticflickr.com/7225/7320695428_9a042ca4d4_m.jpg" alt="slide1, photo2"></div>
<div class="item"><img src="http://farm8.staticflickr.com/7233/7320683548_69c3c60012_m.jpg" alt="slide1, photo3"></div>
</div><!-- /view -->
<div class="nav">
<div class="item"><span>1</span></div>
<div class="item"><span>2</span></div>
<div class="item"><span>3</span></div>
</div><!-- /nav -->
</div><!-- /slide -->
<div class="slide">
<div class="view">
<div class="item active"><img src="http://farm7.staticflickr.com/6122/5921605859_4bbe36a0b0_m.jpg" alt="slide2, photo1"></div>
<div class="item"><img src="http://farm7.staticflickr.com/6126/5920448731_4cecf0af94_m.jpg" alt="slide2, photo2"></div>
<div class="item"><img src="http://farm7.staticflickr.com/6030/5920933492_c2f0288ac7_m.jpg" alt="slide2, photo3"></div>
</div><!-- /view -->
<div class="nav">
<div class="item"><span>1</span></div>
<div class="item"><span>2</span></div>
<div class="item"><span>3</span></div>
</div><!-- /nav -->
</div><!-- /slide -->
</body>
</html>
jQuery.fn.slide = function() {
var view = [],
viewitem = [],
nav = [],
navitem = [];
$(this).each(function(i) {
view[i] = $(‘.view’, $(this));
viewitem[i] = $(‘.item’, view[i]);
nav[i] = $(‘.nav’, $(this));
navitem[i] = $(‘.item’, nav[i]);
// clickイベント
$(navitem[i]).each(function(j) {
$(navitem[i][j]).click(function() {
var k = 0;
for (k = 0; k < navitem[i].length; k++) {
$(viewitem[i][k]).removeClass('active');
}
$(viewitem[i][j]).addClass('active');
$(viewitem[i][j]).css({
'width': '20px',
'opacity': '0.1'
});
$(viewitem[i][j]).animate({
width: "100%",
opacity: "1.0"
}, {
duration: "slow"
});
});
});
// hover
$(navitem[i]).each(function(j) {
$(navitem[i][j]).hover(function() {
$(this).addClass('mouseover');
}, function() {
$(this).removeClass('mouseover');
});
});
});
return this;
};
jQuery(function() {
$('.slide').slide();
});
[/javascript]
[css]
.view {
overflow: hidden;
}
.view .item{
display: none;
}
.view .active {
display: block;
}
.slide .nav {
overflow: hidden;
clear: both;
margin: 5px 0 10px;
}
.slide .nav .item {
overflow: hidden;
/* zoom: 1; for IE */
border: 1px solid #e1dece;
float: left;
margin: 0 5px 0 0;
width: 24px;
height: 24px;
color: #554d31;
text-align: center;
cursor: pointer;
}
.item span {
line-height: 24px;
vertical-align: middle;
}
div.tmpSlideshowControlOn {
color: #FFFFFF;
background: #DDDDDD;
}
.mouseover {
border: 1px solid #666666;
color: #000000;
background: #FF0000;
}
[/css]
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。