Help us understand the problem. What is going on with this article?

左右のボタンを押すと画像がフェードインで切り替わるjquery

More than 1 year has passed since last update.

左右のボタンを押すと画像がフェードインで切り替わる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なりで切り替わりエフェクトを使いましょう。
一列に並べてスライドさせるもよし、フェードインさせるもよし。
(ここではフェードイン。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした