在 YouTube 的帮助下，我使用 JavaScript 制作了一个图像 slider ，当图像发生变化时，它们不会相互淡入淡出，而是看起来“跳跃”，可以在此处显示:
http://www.jdlloyd.co.uk/demo.html
有人可以解释/更新代码，使它们相互融合吗？
谢谢
代码:
// This simple function returns object reference for elements by ID
function _(x){
"use strict";
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>',
'<a href="#"><img src="http://img.psdvault.com/2008/12/3-copy-paste-resize-500x250.jpg" width=100% height="250px"></a>',
'<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){
// Fade-out the content
"use strict";
_("bubblecontent").style.opacity = 0;
// Loop over the bubbles and change all of their background color
for(var i=0; i < ba.length; i++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
// Change the target bubble background to be darker than the rest
ba[bi].style.background = "#999";
// Stall the bubble and content changing for just 300ms
setTimeout(function(){
// Change the content
_("bubblecontent").innerHTML = bca[bi];
// Fade-in the content
_("bubblecontent").style.opacity = 1;
}, 0);
}
// This function is set to run every 5 seconds(5000ms)
function bubbleSlide(){
"use strict";
bi++; // Increment the bubble index number
// If bubble index number is equal to the amount of total bubbles
if(bi === ba.length){
bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
}
// Make the bubbles() function above run
bubbles(bi);
}
// Start the application up when document is ready
window.addEventListener("load", function(){
// Get the bubbles array
"use strict";
ba = _("bubbles").children;
// Set the interval timing for the slideshow speed
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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>最佳答案
它不是引导元素符号，但它适用于点击和滑动。也许是解决方案？
这是一个 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>编辑
// 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
<li class="active"><a href="#1">•</a>
</li>
<li><a href="#2">•</a>
</li>
<li><a href="#3">•</a>
</li>
</ol>关于JavaScript 图像 slider 在图像之间不褪色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32540797/