如何使用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

您在这里的问题是您只有一张幻灯片，因为循环适用于div 并且您只有一张幻灯片因为循环它在 dom 结构上应用了下面的直接子项。您的选择器应指向该标记。由于未识别，请使用下面的选择给它一个类或 ID 并直接选择它

一个简单的解决方案是更改您的选择器。

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