jquery - 自动化我的滑块

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 标签的情况下做到这一点？

谢谢，索克尔

score 1 · Accepted Answer

我认为这就是你想要的：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

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

score 0 · Accepted Answer

是的，有一个名为hoverIntent的 jQuery 插件，可以按照您的描述进行操作。

这将解决您的问题

此外，我们可以尝试使用延迟来延迟悬停效果

使用延迟检查这个演示小提琴

像这样

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

score 0 · Accepted Answer

编辑/更新：

行。因此，您需要一个能够像旋转木马一样改变图片的脚本。

首先你应该用 javascript 来做，为此你不能使用 pseudoclass :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);

演示：http: //jsfiddle.net/Nctfa/27/

jquery - 自动化我的滑块

3 回答 3

Related

Reference