jquery - 如何使用 jQuery 循环插件一次淡出图像和文本（这里的文本与特定图像相关联）？

Question

如何使用 jQuery 循环插件一次淡出图像和文本（这里的文本与特定图像相关联）？

<div>
<div id= "box-slider" class=" blueboxcontent " >
        <ul>
          <li>
          <div class="img-wrapper">
            <img src="news_instyle_c2p.jpg" />
          </div>
          <div class="text-warpper">
            <p>Some text here for image 1</p>
          </div>
    </li>

    <li>
      <div class="img-wrapper">
            <img src="news_instyle3D.jpg"/>
      </div>
      <div class="text-warpper" >
            <p>Some text here for image 2</p>
      </div>
    </li>

    <li>
      <div class="img-wrapper">
            <img src="news_instyle.jpg"/>
      </div>
      <div class="text-warpper">
           <p>Some text here  for image 3 < /p>
      </div>
    </li>
  </ul>
  </div>

脚本调用：

$( '#box-slider' ).cycle( { 
    fx:    'fade', 
    speed:  700,
    timeout:  2000
 });

CSS：

*{ margin:0; padding:0; }

box-slider{
  width:250px;
  float:left;
  overflow:hidden;
}

box-slider ul li {
  list-style:none;
  float:left;
  height:102px;
  width: 396px;
}

box-slider ul li . img-wrapper {
  width:132px;
  float:left
}

box-slider ul li .text-warpper {
width:264px;
float:left
}

Answer 1

Your problem here is that you only have one slide since cycle is applying to the div and you only have one Because cycle it applied the the direct child below on the dom structure. Your selector should point to the tag. Since it's not identified use the selection below of give it a class or id and select it directly

A simple solution would be to change your selector.

$( '#box-slider ul' ).cycle( { 
  fx:    'fade', 
  speed:  700,
  timeout:  2000
});