Question

我刚刚完成了一个我正在处理的网站，但我在Safari中的图像滑块出现了问题。它似乎在Firefox和Chrome中都很好。

以下是网址：http://www.paulcrookconsultancy.com/

这是我正在使用的代码：

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
images.fadeOut(500).eq(target).fadeIn(500);
triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
  if ( !$(this).hasClass('active') ) {
      target = $(this).index();
      sliderResponse(target);
      resetTiming();
  }
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
    function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

这是CSS：

.mask {
float:left;
width:100%;
height:100%;
overflow:hidden;
background:#eee;
}

ul.images {
position:relative;
z-index:2;
top:0px;
left:0px;
height:100%;
}

ul.images li { 
    position:absolute;
top:0px;
left:0px;
bottom:0;
}

ul.images li img {
position:relative;
    width:100%;
height:100%;
}

ul.images li h2, ul.images li h3 {
position:absolute;
margin:0;
line-height:50px;
padding:0 15px;
width:100%;

}

ul.images li h2 {
bottom:50px;
color:#fff;
font-weight:300;
background:url(../images/imgSliderBack.png);
}

ul.images li h3 {
bottom:0;
color:#97835f;
font-size:15px;
font-weight:400;
background:#000;
}

ul.triggers li {
float:left;
margin:15px 5px;
width:10px;
height:10px;
border-radius:5px;
background:#192545;
cursor:pointer;
}

ul.triggers li.active {background:#97835f;}

ul.triggers li:hover {background:#000;}

HTML：

<div class="mask">
      <div class="spinner"></div>
      <ul class="images">
        <li>
          <img src="images/slide1.jpg" alt="Business Solutions"/>
          <h2>Are you short of time?</h2>
          <h3>Find out more about our services and how they will benefit your business.</h3>
        </li>
        <li>
          <img src="images/slide2.jpg" alt="Financial and Business Advisor"/>
          <h2>Do you know who to trust with your finances and business planning?</h2>
          <h3>Discover what previous clients think of our service.</h3>
        </li>
        <li>
          <img src="images/slide3.jpg" alt="Trusted Advisor"/>
          <h2>Do you need a trusted advisor?</h2>
          <h3>Paul Crook has over 35 years experience working in the industry.</h3>
        </li>
        <li>
          <img src="images/slide4.jpg" alt="Business Growth"/>
          <h2>Do you want to grow your business and make it more efficient?</h2>
          <h3>Lets work together to see your business benefit.</h3>
        </li>
      </ul>
    </div>

如果有一种方法可以让h2和h3标签在父img淡入时淡入，这应该对它进行排序 - 我将如何做到这一点？

Answer 1

我猜这与这一行有关：

images.hide().first().show();

请改为尝试：

images.not(":eq(0)").hide();

图像滑块Safari问题

1 个答案: