图片滑块Safari问题 [英] Image slider Safari issue

问题描述

我刚刚完成了一个网站，但我有一个问题，我的图像滑块在Safari。

I've just completed a website i'm working on but i'm having an issue with my image slider in Safari. It seems to be fine in Firefox and 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标签淡入时，

If there was a way for me to have the h2 and h3 tags fade in when the parent img fades in, this should sort it - how would i go about doing that?

推荐答案

我想这与这行有关系：

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

请尝试：

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

这篇关于图片滑块Safari问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！