JavaScript图像滑块在图像之间没有淡入淡出

我使用JavaScript制作了一个图像滑块，在YouTube的帮助下，当图像发生变化时，它们不会相互褪色，而是出现“跳跃”，这可以在这里显示：JavaScript图像滑块在图像之间没有淡入淡出

http://www.jdlloyd.co.uk/demo.html

有人能解释/让他们淡出人们彼此更新的代码？

感谢

CODE：

// This simple function returns object reference for elements by ID 
 
function _(x){ 
 
\t "use strict"; 
 
\t return document.getElementById(x);} 
 
// Variables for bubble array, bubble index, and the setInterval() variable 
 
var ba, bi=0, intrvl; 
 
// bca - Bubble Content Array. Put your content here. 
 
var bca = [ 
 
    '<a href="#"><img src="http://46.4.95.138/sfimages20150708/SF.US.42303038394f4e51504b.1.jpg" width=100% height="250px"></a>', 
 
\t '<a href="#"><img src="http://img.psdvault.com/2008/12/3-copy-paste-resize-500x250.jpg" width=100% height="250px"></a>', 
 
\t '<a href="#"><img src="http://thesixthirty.com/music/wp-content/uploads/2015/03/TheSixThirty_SongOfTheDay_Rectangle_031715.jpg" width=100% height="250px"</a>' 
 
]; 
 
// This function is triggered by the bubbleSlide() function below 
 
function bubbles(bi){ 
 
\t // Fade-out the content 
 
\t "use strict"; 
 
\t _("bubblecontent").style.opacity = 0; 
 
\t // Loop over the bubbles and change all of their background color 
 
\t for(var i=0; i < ba.length; i++){ 
 
\t \t ba[i].style.background = "rgba(0,0,0,.1)"; 
 
\t } 
 
\t // Change the target bubble background to be darker than the rest 
 
\t ba[bi].style.background = "#999"; 
 
\t // Stall the bubble and content changing for just 300ms 
 
\t setTimeout(function(){ 
 
\t \t // Change the content 
 
\t \t _("bubblecontent").innerHTML = bca[bi]; 
 
\t \t // Fade-in the content 
 
\t \t _("bubblecontent").style.opacity = 1; 
 
\t }, 0); 
 
} 
 
// This function is set to run every 5 seconds(5000ms) 
 
function bubbleSlide(){ 
 
\t "use strict"; 
 
\t bi++; // Increment the bubble index number 
 
\t // If bubble index number is equal to the amount of total bubbles 
 
\t if(bi === ba.length){ 
 
\t \t bi = 0; // Reset the bubble index to 0 so it loops back at the beginning 
 
\t } 
 
\t // Make the bubbles() function above run 
 
\t bubbles(bi); 
 
} 
 
// Start the application up when document is ready 
 
window.addEventListener("load", function(){ 
 
\t // Get the bubbles array 
 
\t "use strict"; 
 
\t ba = _("bubbles").children; 
 
\t // Set the interval timing for the slideshow speed 
 
\t intrvl = setInterval(bubbleSlide, 5000); 
 
});

/* BUBBLE FILTER */ 
 

 
#bubblebox{ width:100%; position:relative; height:250px; margin:0px; border:1px solid #000000; transition:opacity 0.3s linear 0s; border:0px; background-color:#000000;} 
 
#bubbles{ width:100%; position: absolute; bottom: 0px; margin-left: 0px auto; margin-right: 0px auto; text-align:center; border:0px;} 
 
#bubbles > div{ display:inline-block; width:10px; height:10px; margin:10px 10px 10px 10px; background:rgba(0,0,0,.1); text-align:center; border:2px solid #999; border-radius:100%; font-size:17px; text-decoration:none; transition: background 0.3s linear 0s; cursor:pointer; }

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Demo</title> 
 
    <link rel="stylesheet" href="style.css">  
 
    \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    \t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    <script src="bubbles.js"></script> 
 
</head> 
 

 
<body> 
 

 
<div id="bubblebox"> 
 
<div id="bubblecontent" 
 
<a href="http://www.rapidcodes.co.uk"><img src="http://46.4.95.138/sfimages20150708/SF.US.42303038394f4e51504b.1.jpg" width=100% height="250px"></a> 
 
</div> 
 
    <div id="bubbles"> 
 
    <div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;"></div> 
 
    <div onclick="bubbles(1); clearInterval(intrvl);"></div> 
 
    <div onclick="bubbles(2); clearInterval(intrvl);"></div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-09-12 James

你想要这样的东西http://jsfiddle.net/RachGal/mtdwr5kn/ –

还是这个？ http://jsfiddle.net/RachGal/n2ztwm3t/ –

两者都不错，但仍然希望将子弹导航放在底部的图像上。看过之后，'滑动'过渡将是最好的！ – James

这不是引导子弹，但它适用于点击和滑动。也许是解决方案？

这里有一个fiddle

$(document).ready(function(){ 
 
      $('#rotator > a.arrow.left').click(function(e){ 
 
       e.preventDefault; 
 
       var rotator = $('#rotator .images'); 
 
       rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){ 
 
        $(this).appendTo(rotator).removeAttr("style"); 
 
       }); 
 
      }); 
 
      $('#rotator > a.arrow.right').click(function(e){ 
 
       e.preventDefault; 
 
       var rotator = $('#rotator .images'); 
 
       rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"}); 
 
      }); 
 
     });

#rotator{width:310px; height:220px; position:relative; overflow:hidden; position:relative;} 
 
     #rotator .images{width:1000%; position:relative; z-index:1;} 
 
     #rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px;} 
 
     #rotator a.arrow.left{left:0;background-image:url("http://www.rachelgallen.com/images/leftarrow.png"); background-repeat:no-repeat; background-size:contain;} 
 
     #rotator a.arrow.right{right:0; background-image:url("http://www.rachelgallen.com/images/rightarrow.png"); background-repeat:no-repeat; background-size:contain;} 
 
     #rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;} 
 
     #rotator .images .imageHolder span {width:290px; margin: 10px; color:#FFF; font-size:18px; position:absolute; top:0; left:0; z-index:4;} 
 
     #rotator .images .imageHolder img{width:310px; height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="rotator"> 
 
     <a href="#" class="arrow left"></a> 
 
     <div class="images"> 
 
      <div class="imageHolder"> 
 
       <span>Daisies</span> 
 
       <img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" /> 
 
      </div> 
 
      <div class="imageHolder"> 
 
       <span>Snowdrops</span> 
 
       <img src="http://www.rachelgallen.com/images/snowdrops.jpg" /> 
 
      </div> 
 
      <div class="imageHolder"> 
 
       <span>Mountains</span> 
 
       <img src="http://www.rachelgallen.com/images/mountains.jpg" alt="" /> 
 
      </div> 
 
      <div class="imageHolder"> 
 
       <span>Yellow Flowers</span> 
 
       <img src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="" /> 
 
      </div> 
 
     </div> 
 
     <a href="#" class="arrow right"></a> 
 
    </div> 
 
</body>

编辑

BOOTSTRAP CAROUSEL

// invoke the carousel 
 
$('#myCarousel').carousel({ 
 
    interval: 3000 
 
}); 
 

 
/* SLIDE ON CLICK */ 
 

 
$('.carousel-linked-nav > li > a').click(function() { 
 

 
    // grab href, remove pound sign, convert to number 
 
    var item = Number($(this).attr('href').substring(1)); 
 

 
    // slide to number -1 (account for zero indexing) 
 
    $('#myCarousel').carousel(item - 1); 
 

 
    // remove current active class 
 
    $('.carousel-linked-nav .active').removeClass('active'); 
 

 
    // add active class to just clicked on item 
 
    $(this).parent().addClass('active'); 
 

 
    // don't follow the link 
 
    return false; 
 
}); 
 

 
/* AUTOPLAY NAV HIGHLIGHT */ 
 

 
// bind 'slid' function 
 
$('#myCarousel').bind('slide', function() { 
 

 
    // remove active class 
 
    $('.carousel-linked-nav .active').removeClass('active'); 
 

 
    // get index of currently active item 
 
    var idx = $('#myCarousel .item.active').index(); 
 

 
    // select currently active item and add active class 
 
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active'); 
 

 
});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css'); 
 
#myCarousel { 
 
    margin-top: 40px; 
 
} 
 
.carousel-linked-nav, 
 
.item img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.carousel-linked-nav { 
 
    width: 120px; 
 
    margin-bottom: 20px; 
 
} 
 
.carousel-control { 
 
    top: 50%; 
 
} 
 
.item img{width:600px; 
 
    height:auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script> 
 

 
<div id="myCarousel" class="carousel slide"> 
 
    <!-- Carousel items --> 
 
    <div class="carousel-inner"> 
 
    <div class="active item"> 
 
     <img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://www.rachelgallen.com/images/mountains.jpg" alt="" /> 
 
    </div> 
 
    </div> 
 
    <!-- Carousel nav --> 
 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
 
</div> 
 

 
<!-- LINKED NAV --> 
 
<ol class="carousel-linked-nav pagination"> 
 
    <li class="active"><a href="#1">&#8226;</a> 
 
    </li> 
 
    <li><a href="#2">&#8226;</a> 
 
    </li> 
 
    <li><a href="#3">&#8226;</a> 
 
    </li> 
 
</ol>

来源

2015-09-12 17:39:49

不完全是我之后，但帮助我对我的解决方案:) – James

JavaScript图像滑块在图像之间没有淡入淡出

回答

相关问题