0

1 つのコントロール メニュー (例: アイテム 1 | アイテム 2 | アイテム 3) のみを使用するスライダーを設定しようとしていますが、背景画像とテキストを含む div コンテナーの両方に影響します。

SAP の例を見てみましょう: http://www.sap.com/germany/index.epx この黄色の四角をクリックすると、ボックス内のテキストと背景の両方が変更されます (正しいアスペクトでも)。比）。

jCarousel、Nivo Slider、bxSlider など、いくつかのスライドショー プラグインを試してみましたが、JavaScript のスキルが低いため、目標を達成する方法がわかりません...

誰でも私を助けることができますか？

ありがとう、セバスチャン

編集：返信ありがとうございます！私はあなたの解決策を試し、コメントしました（以下を参照）。それに加えて、この効果を機能させようとしている Web ページへのリンクを提供します: http://prism-informatics.com/new/#

バックグラウンドのスライド効果には、「bgStretcher」というライブラリ/スクリプト/モジュールを使用します。背景画像のプリロード、素敵なトランジション効果、「ライブスケーリング」を提供します...

そして、ページの中央に jCarousel があります (「IT-Strategy」のようなテキストが入った白いボックス)。最善の方法は、ボックスの下のコントロール (数字「1」または「2」) をクリックすると、bgStretcher-script に適切な bg-picture にスライドするように指示することです... jsスキル、それを行う方法があるかどうかはわかりません...

4

3 に答える 3

0

この新しい答えはbgStretcherを利用しています：（フィドル：http：//jsfiddle.net/rNLEQ/）

<!DOCTYPE html><html><head>

<link rel="stylesheet" type="text/css" href="http://www.ajaxblender.com/script-sources/bgstretcher-2/bgstretcher.css" />

<style>
.slider {
    background-color: white;
    width: 300px;
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}
.slider > div {
    display: none;
}
.slider > .control, .slider > .active {
    display: block;
}
.slider > .control li {
    display: inline;
    padding: 10px;
}
.slider > .control .showPage {
    font-weight: bold;
}​
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.ajaxblender.com/script-sources/bgstretcher-2/bgstretcher.js"></script>
<script>
jQuery(function($) {
    $('body').bgStretcher({
        images: [
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg1.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg2.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg3.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg4.jpg',
        ],
        imageWidth: 1024, 
        imageHeight: 768, 
        nextSlideDelay: 8000,
        slideDirection: 'N',
        slideShowSpeed: 1000,
        transitionEffect: 'fade',
        sequenceMode: 'normal',
        buttonPrev: '#prev',
        buttonNext: '#next',
        pagination: '.control',
        anchoring: 'left center',
        anchoringImg: 'left center',
        preloadImg: true,
        callbackfunction: function() {
            var i = $('#bgstretcher .bgs-current').index('#bgstretcher li') + 1;
            $('.slider > div').removeClass('active');
            $('#slide'+i).addClass('active');
        }
    });
});
</script>
</head><body>

<p>Other content here.</p>

<div class="slider">
    <div id="slide1" class="active">
        <h2>One</h2>
        <p>Something you want to say 1.</p>
    </div>
    <div id="slide2">
        <h2>Two</h2>
        <p>Something you want to say 2.</p>
    </div>
    <div id="slide3">
        <h2>Three</h2>
        <p>Something you want to say 3.</p>
    </div>
    <div id="slide4">
        <h2>Four</h2>
        <p>Something you want to say 4.</p>
    </div>
    <div class="control"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body></html>
于 2012-06-30T01:06:40.470 に答える
0

これを試してください：（ここでも：http://jsfiddle.net/HzWRT/）

<!DOCTYPE html><html><head>

<style>
.slider {
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}
.slider > div {
    display: none;
}
.slider > .control, .slider > .active {
    display: block;
}
.slider > .control .active {
    font-weight: bold;
}
</style>

</head><body>

<p>Other content here.</p>

<div class="slider">
    <div id="one">
        <h2>One</h2>
        <p>Something you want to say.</p>
    </div>
    <div id="two">
        <h2>Two</h2>
        <p>Something you want to write.</p>
    </div>
    <div class="control">
        <a href="#one" data-background="lightblue" class="active">One</a>
        <a href="#two" data-background="lightgreen">Two</a>
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
    $('.slider > .control').delegate('a', 'click', function() {
        var $this = $(this),
            slider = $this.closest('.slider');
        $('body').css('background', $this.data('background'));
        slider.find('.active').removeClass('active');
        slider.find($this.attr('href')).addClass('active');
        $this.addClass('active');
        return false;
    }).find('.active').trigger('click');
});
</script>
</body></html>

タイマーで自動的に変更されるわけではありませんが、それが必要かどうかを指定していません。

画像の背景を使用するには、「lightblue」と「lightgreen」を「url(http://example.com/bg.png)」などの任意の CSS 背景プロパティに置き換えるだけです。

于 2012-06-29T22:11:23.350 に答える
0

それは大きなスライドショーです。

それらを分割するのはどうですか？テキスト スクローラー、および css を使用して背景の画像を変更する大きなスプライトを背面に配置します。

まず、テキストをスクロールする必要があります。テキストをスクロールできるあらゆる種類の画像スクローラーもあります。jcarouselを使用する場合は、テキストスクローラーに従ってください

次に、画像にスプライトと div / body 要素を使用するかどうかを決定します。選択したものの高さと幅を設定し、「display:block」または「display:inline-block」が設定されていることを確認する必要があります。

最後に、いつ画像をスクロールするかを知るために「テキストのスクロール」をつかみます。(このアイデアを $("#some-other-carousel .jcarousel-prev").click() に使用して、別のカルーセルを進めることもできます)

例：

<body style="background:url(/some/sprite.png) no-repeat 0 0;">
<ul id="text-id">
  <li>whatever</li>
  <li>a jcarousel</li>
  <li>text carousel</li>
  <li>needs</li>
</ul>
</body>

js

  $(function(){
//start the carousel with whatever it needs to scroll text
     $("#text-id").jcarousel();
// y - size of your sprite
     var totalSpriteYsize = 400;
// your example used the body element for a picture background, so that's what this does
     var $body = $("body");
// 'listen' for your text carousel clicks, and alter the background picture
      $body.on({"click":function(event){
       var curPosition = parseInt($body.css("background-position-y"),10);
       var adjustY =100;
// all sprite Y positions go negative from 0, and we don't want to go off the end of the sprite
       var newPosition = -((curPosition - adjustY) % totalPicYsize);
       if($(this).is(".jcarousel-prev"){
         newPosition = -((curPosition + adjustY) % totalPicYsize);
       }
       $body.css("background-position-y", newPosition+"px");
//this .on selector decides which 'clicks' to listen to.
      }},".jcarousel-prev,.jcarousel-next",null);

    });
于 2012-06-29T22:31:37.757 に答える