JS

Question

我正在尝试设置一个仅使用一个控件菜单的滑块（例如，第1项|第2项|第3项），但同时影响背景图像和包含文本的div容器。

从SAP查看此示例：http://www.sap.com/germany/index.epx 在那里你可以点击这个黄色方块，两个方框中的文字和背景都会发生变化（即使是正确的宽高比）。

我尝试了几个幻灯片插件，比如jCarousel，Nivo Slider，bxSlider，......但是由于我的javascript技巧很弱，我真的不知道如何实现我的目标......

任何人都可以帮助我？

谢谢，塞巴斯蒂安

编辑：谢谢你的回复！我尝试了你的解决方案并对其进行了评论（见下文）。除此之外，我提供了一个网页链接，我试图让这个效果起作用： http://prism-informatics.com/new/#

对于背景滑动效果，我使用名为“bgStretcher”的库/脚本/模块。它提供了bg图像的预加载，漂亮的过渡效果和“实时缩放”......

页面中央有一个jCarousel（白色框中有文字，如“IT-Strategy”）。最好的事情是，如果你点击框下面的控件（数字“1”或“2”），那么这告诉bgStretcher脚本滑到适当的bg图片...因为我的坏js技能，我不知道是否有办法做到这一点......

Answer 1

试试这个:(也在这里：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”替换为任何CSS背景属性，例如“url（http://example.com/bg.png）”

Answer 2

这是一个很大的幻灯片放映。

将它们分开怎么样？文本滚动条，以及后面使用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);

    });

Answer 3

这个新答案使用了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>

两个幻灯片（背景滑块和文本滑块）由一个菜单控制

3 个答案:

JS