个人中心
gpt4 book ai didi

JavaScript 图像 slider 在图像之间不褪色

转载 作者：行者123 更新时间：2023-11-28 16:52:47 24 4
gpt4 key购买 nike

在 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>

编辑

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>

关于JavaScript 图像 slider 在图像之间不褪色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32540797/

24 4 0
文章推荐： javascript - 将 onClick 设置为 false
文章推荐： python - Google App Engine 中的验证逻辑
文章推荐： Javascript:为函数中创建的表格的偶数行和偶数单元格着色
文章推荐： python - 扭曲的 react 堆 : priority and insights
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com