自动滑块

Question

我有一个带有悬停效果的图片滑块，可以在我的网站上构建。 （点击这里查看我的代码：http://jsfiddle.net/Nctfa/）。

HTML：

<div class="accordian">
<ul>
    <li>
        <div class="image_title">   <a href="#">TERA Online</a>

        </div>  <a href="#">
            <img src="http://spieletrend.com/screenshots/tera-release-termin.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Diablo 3</a>

        </div>  <a href="#">
            <img src="http://www.airbornegamer.com/wp-content/uploads/2013/08/diablo-3-HD-wallpaper-640x320.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Assassin's Creed</a>

        </div>  <a href="#">
            <img src="http://totalgame.es/wp-content/uploads/2013/09/Assassins-Creed-4-Black-Flag.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Grand Theft Auto V</a>

        </div>  <a href="#">
            <img src="http://b.vimeocdn.com/ts/448/977/448977532_640.jpg"/>
        </a>

    </li>
    <li>
        <div class="image_title">   <a href="#">Battlefield 4</a>

        </div>  <a href="#">
            <img src="http://stickskills.com/omega/wp-content/uploads/2013/04/Battlefield4-e1366202710731.jpg"/>
        </a>

    </li>
</ul>

CSS：

* {
margin:0px;
padding:0px;
color:#fff;
}
.accordian {
    width: 805px;
    height: 320px;
    overflow: hidden;
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
    width: 2000px;
}
.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.accordian ul:hover li {
    width: 40px;
}
.accordian ul li:hover {
    width: 640px;
}
.accordian li img {
    display: block;
}
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}

我希望在不悬停时自动更改突出显示的图片（例如：http://www.pixedelic.com/plugins/diapo/）。

是否有可能在不影响img标签的情况下这样做？

谢谢， Thorkel

Answer 1

我认为这就是你想要的：http://jsfiddle.net/BYossarian/Nctfa/28/

我建议你在幻灯片中旋转一堂课（我用过shown）：

var ulElem = $('.accordian').find('ul');

function rotate() {

    var next = ulElem.find('.shown').removeClass('shown').next();

    if (next.length) {
        next.addClass('shown');
    } else {
        ulElem.find('li').eq(0).addClass('shown');
    }
}

// i just wrapped this in a setTimeout so the slides are briefly shown 
// equally spaced at the start, but you could just jump right into it
setTimeout(function () {
    ulElem.addClass('shown');
    ulElem.find('li').eq(0).addClass('shown');
    setInterval(rotate, 1800);
}, 1800);

但是，然后使用CSS不仅会显示.shown元素，还会在shown元素悬停时忽略ul类：

.accordian ul.shown:not(:hover) li {
    width: 40px;
}
.accordian ul:not(:hover) li.shown {
    width: 640px;
}

使用:not选择器：

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

但请注意，:not不适用于IE6-8：

http://caniuse.com/css-sel3

因此，如果您关心它们，则需要使用事件来跟踪悬停状态。

Answer 2

是的，有一个名为hoverIntent的jQuery插件可以完成您所描述的内容。

这将解决您的问题

此外，我们可以尝试使用 Delay

延迟悬停效果

Check this demo fiddle using delay

像这样

$('.accordian').hover(function(){
timeout = setTimeout(function(){
        $('.accordian').delay(200).css('color','red');
    }, 2000);    
});

Answer 3

编辑/更新：

确定。所以你想要一个像轮播一样改变图片的脚本。

首先你应该在javascript中这样做，为此你不能使用伪类:hover。 最好使用简单的类hover，例如

.accordian ul.hover li {
    width: 40px;
}
.accordian ul li.hover {
    width: 640px;
}

现在你应该使用javascript来产生同样的效果。

function _hover() {
    $(this).addClass('hover'); 
    $(this).parent().addClass('hover');
}
function _out() {
    $(this).removeClass('hover'); 
    $(this).parent().removeClass('hover');
}

var $lis = $('.accordian ul li');
$lis.hover(_hover,_out);

最后，您可以编写一个自动化轮播的简单脚本。这样的事情：

var index = 0;
setInterval(function() {
    $lis.removeClass('hover'); // remove previous hover
    $lis.parent().removeClass('hover');
    _hover.call($lis[index]); // set the jQuery element as context
    index = (index+1)%$lis.length; // increment or back to 0
},1400);

DEMO： http://jsfiddle.net/Nctfa/27/