简单的Jquery旋转器创造了彼此相邻的2个画廊

时间：2014-04-18 20:32:16

标签： javascript jquery html css



我目前面临的问题是我无法从中配置Jquery旋转器 Easy Jquery Auto Image Rotator和脚本来源 Google jquery.min.js

我给了第二个画廊一个不同的类，并将js脚本加倍 然后我用第二个库替换了所有的类和选择器名称 但后来只有一个画廊的作品，我希望有一个涵盖的解决方案 两个画廊都有功能。

此外，我还试图只使用一个功能，并将两个div id放入（id）部分 - ＆GT;没有工作。现在两个层都放在彼此之上，我无法移动它们 通过给他们浮动：左和浮动：右。

我非常感谢你的帮助。

提前致谢。

这些是div：     

<div class="rotator">
  <ul>
    <li class="show"><img src="img/screenshots/screen1-big.jpg" alt="pic1" /></li>
    <li><img src="img/screenshots/screen2-big.jpg" alt="pic2" /></li>
    <li><img src="img/screenshots/screen3-big.jpg" alt="pic3" /></li>
    <li><img src="img/screenshots/screen4-big.jpg" alt="pic4" /></li>
  </ul>
</div>  
</div>
<div class="wrapper">
<div class="gallery">
  <ul>
    <li class="take"><img src="img/screenshots/screen3.jpg" alt="pic1" /></li>
    <li><img src="img/screenshots/screen2.jpg" alt="pic2" /></li>
    <li><img src="img/screenshots/screen4.jpg" alt="pic3" /></li>
    <li><img src="img/screenshots/screen1.jpg" alt="pic4" /></li>
  </ul>
</div>  


</div>


这些是div类 

/* rotator in-page placement */
div.rotator {display:none; float:left; width: 451px;}
/* rotator css */
div.rotator ul { margin:0; padding:0;}
div.rotator ul li { position:absolute; list-style: none;}
/* rotator image style */   
div.rotator ul li img {width:451px; height: 313px;}
div.rotator ul li.show {z-index:500;}

div.gallery {display:none; float:right; width: 451px;}
/* rotator css */
div.gallery ul { margin:0; padding:0;}
div.gallery ul li { position:absolute; list-style: none;}
/* rotator image style */   
div.gallery ul li img {width:451px; height:313px;}
div.gallery ul li.take {z-index:500;}

旋转器div的功能1 

    function theRotator() {
        //Set the opacity of all images to 0
        $('div.rotator ul li').css({opacity: 0.0});

        //Get the first image and display it (gets set to full opacity)
        $('div.rotator ul li:first').css({opacity: 1.0});

        //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

        if ($('div.rotator ul li').length > 1) {
        setTimeout('rotate()', 6000);
    }
    }

    function rotate() { 
        //Get the first image
        var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

        if (current.length == 0 ) current = $('div.rotator ul li:first');

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = $( sibs[ rndNum ] );


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate()', 6000);}) .removeClass('show');

    };

    $(document).ready(function() {      
        //Load the slideshow
        theRotator();
        $('div.rotator').fadeIn(1000);
            $('div.rotator ul li').fadeIn(1000); // tweek for IE
    });

图库div的功能2 

function theGalley() {
        //Set the opacity of all images to 0
        $('div.gallery ul li').css({opacity: 0.0});

        //Get the first image and display it (gets set to full opacity)
        $('div.gallery ul li:first').css({opacity: 1.0});

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds

        if ($('div.gallery ul li').length > 1) {
        setTimeout('rotate()', 6000);
    }
    }

    function rotate() { 
        //Get the first image
        var current = ($('div.gallery ul li.take')? $('div.gallery ul li.take') : $('div.gallery ul li:first'));

        if (current.length == 0 ) current = $('div.gallery ul li:first');

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('take')) ? $('div.gallery ul li:first') :current.next()) : $('div.gallery ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = $( sibs[ rndNum ] );


        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0}).addClass('take').animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate()', 6000);}) .removeClass('take');

    };

    $(document).ready(function() {      
        //Load the slideshow
        theGallery();
        $('div.gallery').fadeIn(1000);
            $('div.gallery ul li').fadeIn(1000); // tweek for IE
    });

1 个答案:

答案 0 :(得分：0)

错字

首先，您将function定义为 theGalley ，但是当您调用它时，您称之为 theGallery

我认为第二次幻灯片是不工作的？

如果我不需要，我不想深入深入，但要修正错字并告诉我是否能解决问题。

我会在您通过回复更新后发布更多内容。

更新

工作实时网站：http://sinsysonline.com/rotate/image-rotator.html

关于：旋转功能中的function(){setTimeout('rotate()',（最后回调），您two functions名为rotate。这是一个很大的 no-no ，写作Javascript。

让我们假装你的classes被召唤（为了便于阅读）：

  • 旋转体
  • rotator2

您可以使其正常运作： 

function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});
    $('div.rotator2 ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});
    $('div.rotator2 ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    if ($('div.rotator ul li').length > 1) {
        setTimeout('rotate()', 1000);
        setTimeout('rotate2()', 1000);
    }
}
function rotate() { 
    //Get the first image
    var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate()', 1000);}) .removeClass('show');
};
function rotate2() {    
    //Get the first image
    var current = ($('div.rotator2 ul li.show')? $('div.rotator2 ul li.show') : $('div.rotator2 ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator2 ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator2 ul li:first') :current.next()) : $('div.rotator2 ul li:first'));

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate2()', 1000);}) .removeClass('show');
};
$(document).ready(function() {      
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
    $('div.rotator2').fadeIn(1000);
    $('div.rotator2 ul li').fadeIn(1000); // tweek for IE
});
相关问题
最新问题