3

ホバー効果のある画像スライダーを Web サイトに組み込みました。(私のコードはここをクリックしてください: 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タグにまったく影響を与えずにそれを行うことは可能ですか?

ありがとう、トルケル

4

3 に答える 3

0

編集/更新:

Ok。したがって、カルーセルのように画像を変更するスクリプトが必要です。

まず、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);

デモ: http://jsfiddle.net/Nctfa/27/

于 2013-10-08T11:47:37.380 に答える
0

はい、あなたが説明したことを行うhoverIntentと呼ばれるjQuery用のプラグインがあります。

これで問題が解決します

さらに、 Delayを使用してホバー効果を遅らせることができます

遅延を使用してこのデモフィドルを確認してください

このような

$('.accordian').hover(function(){
timeout = setTimeout(function(){
        $('.accordian').delay(200).css('color','red');
    }, 2000);    
});
于 2013-10-08T11:17:20.873 に答える