自動化我的滑塊

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元素：通過使用:not選擇

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

：

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

但請注意，:not不會爲工作IE6-8：

http://caniuse.com/css-sel3

所以如果你關心他們，你需要使用事件來追蹤懸停狀態。

Answer 2

是的，還有的jQuery插件叫hoverIntent，做你的描述。

這將解決你的問題

此外，我們可以嘗試使用 Delay

耽誤懸停效果

Check this demo fiddle using delay

這樣

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

Answer 3

編輯/ UPDATE：

好的。所以你需要一個腳本，像旋轉木馬一樣改變畫面。

首先你應該用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/