BxSliderでリンクをクリックしたときに画像を変更するにはどうすればよいですか？

私はjQueryプラグインBxSliderを使用します。私はこの部分以下をクリックしたとき、私はBxSliderでリンクをクリックしたときに画像を変更するにはどうすればよいですか？

<li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>

、私は画像を意味し、この部分を表示したいと思います。

<dd id="miori"><a href="">miori</a></dd>

JavaScriptコードはどのように書くべきですか？いくつかのアドバイスをお願いしますか？

<html> 
<head> 
    <title>bxslider</title> 
    <link href="/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 
</head> 
<body> 

    <dl class="sample"> 
     <dt>menu</dt> 
      <dd id="tao"><a href="">tao</a></dd> 
      <dd id="miori"><a href="">miori</a></dd> 
    </dl> <!-- sample --> 

    <ul class="bxslider"> 
     <li id="tao"><img src="http://koi-navi.net/wp-content/uploads/2015/10/5e9dd24e-e1444440113499.jpg"> </li> 
     <li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li> 
    </ul> <!-- bxslider --> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript" ></script>} 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('.bxslider').bxSlider(); 
      $('dd#miori').on('click', function(){ 
       alert("hello"); // what should I write here? 
      }); 
     }); 
    </script> 

</body> 
</html>

出典

2016-09-03 yamachan

これを参照してください。http://bxslider.com/examples/thumbnail-pager-1

はこれを試してみてください：

<html> 
    <head> 
     <title>bxslider</title> 
     <link href="/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 
    </head> 
    <body> 

     <!-- <dl class="sample"> 
      <dt>menu</dt> 
       <dd id="tao"><a href="">tao</a></dd> 
       <dd id="miori"><a href="">miori</a></dd> 
     </dl> <!-- sample --> 
     <div id="bx-pager"> 
      <a data-slide-index="0" href="">tao</a> 
      <a data-slide-index="1" href="">miori</a> 
     </div> 
     <ul class="bxslider"> 
      <li id="tao"><img src="http://koi-navi.net/wp-content/uploads/2015/10/5e9dd24e-e1444440113499.jpg"> </li> 
      <li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li> 
     </ul> <!-- bxslider --> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript" ></script>} 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.bxslider').bxSlider({pagerCustom: '#bx-pager'}); 
       /*$('dd#miori').on('click', function() { 
        alert("hello"); // what should I write here? 
       });*/ 
      }); 
     </script> 

    </body> 
</html>

出典

2016-09-03 05:34:42 Ish

ありがとうございました。 – yamachan

喜んで:) – Ish

BxSliderでリンクをクリックしたときに画像を変更するにはどうすればよいですか？

答えて

関連する問題