Question

我尝试使用flexslider在活动幻灯片上制作动画背景颜色，但我不知道该怎么做...所以我试着做一些简单但不能正常工作。

我有4张幻灯片，所以我想在点击下一张幻灯片时只更改4种颜色...

jQuery

  $( function() {
  $('.dot li').click( function() {
    $('.wrapper').css('background', '#749e4f');
    $('.dot li').click( function() {
    $('.wrapper').css('background', '#d16b42');

  });
});

导航| Flexslider

<div class="slider-nav">
<ul class="dot">
<li><a href="#">iphone 5<span class="bullet">1</span></a></li>
<li><a href="#">htc one <span class="bullet">2</span></a></li>
<li><a href="#">ipad mini<span class="bullet">3</span></a> </li>
<li><a href="#">droid z<span class="bullet">4</span></a></li>
</ul>
</div>

感谢您的任何想法：）

Answer 1

这可能会对您有所帮助，因为您是初学者，我想稍微解释一下以下代码，以便您更好地理解。

保持array中的颜色。数组的长度必须是您所拥有的li的数量。
为所有click元素创建一个公共li处理程序。（它已在您的代码中）

在点击处理程序中，只需根据点击的Li元素的index引用数组，即可更改目标元素的颜色。

$( function() {
   var xColors =['red','green','yellow','blue'];
   $('.dot li').click( function() {
     $('.wrapper').css('background', xColors[$(this).index()] );    
   });
});

LIve - DEMO

Answer 2

真的不明白你的问题仍然希望这能有所启发：

您可以将颜色保存为li：

    <div class="slider-nav">
    <ul class="dot">
        <li  class='red'><a href="#">iphone 5<span class="bullet">1</span></a></li>
        <li  class='yellow'><a href="#">htc one <span class="bullet">2</span></a></li>
        <li  class='blue'><a href="#">ipad mini<span class="bullet">3</span></a> </li>
        <li  class='green'><a href="#">droid z<span class="bullet">4</span></a></li>
   </ul>
   </div>

$( function() {
  $('.dot li').click( function() {
    $('.wrapper').css('background',$(this).attr('class'));  
});

点击后jQuery更改背景颜色

2 个答案:

LIve - DEMO