0

我正在尝试设置一个仅使用一个控制菜单的滑块（例如项目 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-script 滑动到适当的 bg-picture...因为我的坏js技能，不知道有没有办法

4

3 回答 3

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”替换为任何 CSS 背景属性，例如“url(http://example.com/bg.png)”

于 2012-06-29T22:11:23.350 回答
0

这是一个大幻灯片。

把它们分开怎么样？文本滚动条，后面有一个大精灵，您可以使用 css 更改背景中的图像。

首先，您需要滚动一些文本。有各种各样的图像滚动器也可以为您滚动文本。如果您使用 jcarousel，则只需按照文本滚动条进行操作

其次，决定是否要为图像使用 sprite 和 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 回答
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 回答