Как изменить изображение, когда я нажимаю ссылку на 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?

ответ

Смежные вопросы