左右のボタンを押すと画像がフェードインで切り替わるjquery
- 非エンジニアのデザイナーが使うので、CSS側と絡んで調整できるように
HTML
<div class="charaContainer">
<!-- 矢印 -->
<div class="btnBox">
<p class="_prev">ボタン左</p>
<p class="_next">ボタン右</p>
</div>
<!-- 切り替える画像 -->
<div class="charaBox">
<ul>
<li class="hoge on"><img src="" width="" height="" alt=""></li>
<li class="hoge"><img src="" width="" height="" alt=""></li>
<li class="hoge"><img src="" width="" height="" alt=""></li>
</ul>
</div>
</div><!-- /charaContainer -->
jquery
jQuery(function($){
});
$(function(){
$('.hoge').on('click', function(){
if ($(this).hasClass('on')) return;
var idx = $(this).index();
$('.hoge').removeClass('on');
$('.hoge').eq(idx).addClass('on');
});
$('._prev, ._next').on('click', function(){
var curr = $('.hoge').filter('.on').index();
var to = $(this).hasClass('_prev') ? curr - 1 : curr + 1;
var elem;
if (to < 0) {
elem = $('.hoge:last');
} else if ($('.hoge').length <= to) {
elem = $('.hoge:first');
} else {
elem = $('.hoge').eq(to);
}
elem.trigger('click')
});
});
css
.charaBox ul li{
opacity: 0;
duration: 1s;
}
.charaBox ul li.on{
opacity: 1;
}
/* 画像とかボタンの見た目CSSはイイカンジに! */
liにonが付くので、opacityなりで切り替わりエフェクトを使いましょう。
一列に並べてスライドさせるもよし、フェードインさせるもよし。
(ここではフェードイン。)