Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - 淡入淡出图像 slider 单击上一个下一个按钮

In lại Tác giả: Walker 123 更新时间：2023-11-28 02:56:15 27 4
mua khóa gpt4 Nike

我正在制作一个包含缩略图以及上一个和下一个按钮的图像 slider 。当您单击与主图像不同的缩略图时，我希望它淡入新图像。上一个和下一个按钮也是如此。

我有一个淡入淡出的 web-kit 动画，但它不起作用。这是 bút viết mã .

$('#imgDetail li img').click(function(){
    $('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
 var imgSrc = $('#unidoor').attr('src');
    var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
    console.log(nextSrc);
    nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
 var imgSrc = $('#unidoor').attr('src');
    var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
    console.log(nextSrc);
    nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
  lề: 0;
  phần đệm: 0;
}

thân hình{
  lề: 0;
  phần đệm: 0;
  font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}

.header{
  lề: 0 tự động;
  chiều rộng: 100%;
  màu nền: #333;
  padding: 30px 0 0 0; 
}

.header h1{
  lề: 0;
  căn chỉnh văn bản: giữa;
  màu sắc: trắng;
  font-family: Arial, Helvetica, sans-serif;
}

.header ul {
  kiểu danh sách: không có;
  lề: 0;
/* padding: 0; */
  tràn: ẩn;
  padding: 20px 0px 30px 0;
  căn chỉnh văn bản: giữa;
}

.header li {
  hiển thị: khối;
  hiển thị: khối nội tuyến;
/* border-right: 1px solid #bbb; */
  border-right: 1px solid #bbb;
  height: 25px;
}

.header li:last-child{
  biên giới bên phải: không có;
}

.header li a {
  hiển thị: khối;
  màu sắc: trắng;
  căn chỉnh văn bản: giữa;
  trang trí văn bản: không có;
  padding: 0px 40px;
  cỡ chữ: 1em;
}

.header li a:hover{
  color: #7bbe9a;
/* color: #80b198; */
}

#green-room {
  background: #333 !important;
}

.slideshow-container {
  max-width: 1000px;
  vị trí: tương đối;
  lề: tự động;
}

#unidoor {
/* vị trí: tương đối;
  chiều rộng: 90%;
  lề: 0 tự động;
  hiển thị: khối;
}

#prev {
  vị trí: tuyệt đối;
  nổi: trái;
  bottom: 55%;
  left: 5%;
  con trỏ: con trỏ;
  độ dày phông chữ: đậm;
}

#next {
  vị trí: tuyệt đối;
  phao: đúng;
  bottom: 55%;
  right: 5%;
  con trỏ: con trỏ;
  độ dày phông chữ: đậm;
  chiều rộng: tự động;
}

.previous {
  màu nền: #fff;
  độ mờ: 0,5;
  màu sắc: đen;
  chiều rộng: tự động;
}

.next {
  màu nền: #fff;
  độ mờ: 0,5;
  màu sắc: đen;
}

#imgDetail a {
    trang trí văn bản: không có;
    hiển thị: khối nội tuyến;
    padding: 8px 16px;
}

#imgDetail a:hover {
  background-color: #7bbe9a;
  màu sắc: trắng;
  độ mờ: 1;
}

#imgDetail ul {
  lề: 0 tự động;
  hiển thị: khối;
  chiều rộng: 50%;
}

/* fade animation */

#fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.thumb { 
  width: 25%; 
  chiều cao: tự động; 
  margin: 15px 5px 0 5px;
}

#imgDetail li { 
  display: inline; margin-right: 10px; 
}



<đầu>
    
    
    
    Daniel Pollack
    
  

  
  	

      
Lorem Ipsum 3D Online Portfolio

      
    

    


    

    
    
    
      window.sr = ScrollReveal({reset: true});
      sr.reveal('#unidoor');
    
    
    Xem sitemap của VNExpress

câu trả lời hay nhất

在您的方法中，您需要执行一些代码，我对您的代码进行了一些更改，您可以在代码示例中看到它。

首先，您需要根据需要滑动的图像创建缩略图。

其次，您不应该将每个图像的 src 属性设置为下一个 src(图像 URL)，因为每次您这样做都是在下载图像，您应该将所有图像保存在缓存并下载一次。

第三，你应该在一个函数中监听箭头 previous Và next 的 onclick 事件，也许最好将它们分成两个函数来分配单一职责用于下一个和上一个按钮。

第四，你应该只使用 css 类来为每张幻灯片制作淡入淡出效果，比动画更简单，在演示代码中我创建了 active 类以使其作为淡入淡出效果

Hy vọng điều này sẽ giúp.

$(document).ready(function(){
	// get all images loaded
  var images = $(".unidoor-class");
	// thumbnails containers
  var thumbnailContainer = $("#thumbnails");
    // generate thumbnail images
  generateThumbnails(images, thumbnailContainer);
  // listeners for controls arrows
	$(".prev-next-button").on("click", function() {
  	// get the images
    var currentImageIndex = $(".unidoor-class.active").index();
		var isPrevious = $(this).hasClass("previous");
    var nextIndex;
    if (isPrevious) {
    	if (currentImageIndex === 0) {
      	nextIndex = images.length - 1;
      }
      
      if (currentImageIndex > 0) {
      	nextIndex = currentImageIndex - 1;
      }
    } khác {
    	if (currentImageIndex === images.length - 1) {
      	nextIndex = 0;
      }
      
      if (currentImageIndex < images.length - 1) {
      	nextIndex = currentImageIndex + 1;
      }
    }
		
    // remove any active class from images
		images.removeClass("active");
    // get the next active image and add active class to that next current image
    $(images[nextIndex]).addClass("active");
  });
  
  $(".thumb").on("click", function(event){
	  sự kiện.preventDefault();
    var indexSelected = $(this).data("img-index");
    var currentShown = $(".unidoor-class.active").index();
    if (currentShown === indexSelected) return false;
    images.removeClass("active");
    $(images[indexSelected]).addClass('active');
  });
  
  function generateThumbnails(images, container) {
  	var ul = $("
    ");
      	images.each(function(index, element){
        	var currentThumb = $("");
          var li = $("
  • ");
          var src = $(this).attr("src");
          currentThumb.attr("src", src);
          currentThumb.attr("class", "thumb");
          currentThumb.data("img-index", index);
          li.append(currentThumb);
          ul.append(li);
        });
        container.append(ul);
      }
    });
* {
  lề: 0;
  phần đệm: 0;
}

thân hình{
  lề: 0;
  phần đệm: 0;
  font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}

.header{
  lề: 0 tự động;
  chiều rộng: 100%;
  màu nền: #333;
  padding: 30px 0 0 0; 
}

.header h1{
  lề: 0;
  căn chỉnh văn bản: giữa;
  màu sắc: trắng;
  font-family: Arial, Helvetica, sans-serif;
}

.header ul {
  kiểu danh sách: không có;
  lề: 0;
/* padding: 0; */
  tràn: ẩn;
  padding: 20px 0px 30px 0;
  căn chỉnh văn bản: giữa;
}

.header li {
  hiển thị: khối;
  hiển thị: khối nội tuyến;
/* border-right: 1px solid #bbb; */
  border-right: 1px solid #bbb;
  height: 25px;
}

.header li:last-child{
  biên giới bên phải: không có;
}

.header li a {
  hiển thị: khối;
  màu sắc: trắng;
  căn chỉnh văn bản: giữa;
  trang trí văn bản: không có;
  padding: 0px 40px;
  cỡ chữ: 1em;
}

.header li a:hover{
  color: #7bbe9a;
/* color: #80b198; */
}

#green-room {
  background: #333 !important;
}

.slideshow-container {
  max-width: 1000px;
  vị trí: tương đối;
  lề: tự động;
}

#unidoor, .unidoor-class {
  vị trí: tuyệt đối;
  chiều rộng: 100%;
  lề: 0 tự động;
  hiển thị: khối;
  trên cùng: 0;
  trái: 0;
  độ mờ: 0;
  transition: opacity .5s;
}

.unidoor-class.active {
  vị trí: tương đối;
  độ mờ: 1;
}

#prev {
  vị trí: tuyệt đối;
  nổi: trái;
  bottom: 55%;
  left: 5%;
  con trỏ: con trỏ;
  độ dày phông chữ: đậm;
}

#next {
  vị trí: tuyệt đối;
  phao: đúng;
  bottom: 55%;
  right: 5%;
  con trỏ: con trỏ;
  độ dày phông chữ: đậm;
  chiều rộng: tự động;
}

.previous {
  màu nền: #fff;
  độ mờ: 0,5;
  màu sắc: đen;
  chiều rộng: tự động;
}

.next {
  màu nền: #fff;
  độ mờ: 0,5;
  màu sắc: đen;
}

#imgDetail {
  vị trí: tương đối;
  chiều rộng: 90%;
  lề: 0 tự động;
}

#imgDetail a {
    trang trí văn bản: không có;
    hiển thị: khối nội tuyến;
    padding: 8px 16px;
}

#imgDetail a:hover {
  background-color: #7bbe9a;
  màu sắc: trắng;
  độ mờ: 1;
}

#imgDetail ul {
  lề: 0 tự động;
  hiển thị: khối;
  chiều rộng: 50%;
}

/* fade animation */

#fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.thumb { 
  width: 25%; 
  chiều cao: tự động; 
  margin: 15px 5px 0 5px;
}

#imgDetail li { 
  display: inline; margin-right: 10px; 
}

关于javascript - 淡入淡出图像 slider 单击上一个下一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46437681/

27 4 0
Đề xuất bài viết: c++ - C/C++ 加密压缩库
Đề xuất bài viết: c++ - SDL_PollEvent 深入
Đề xuất bài viết: javascript - 捕获页面上的所有 DOM 事件(没有 Firebug 等)
Đề xuất bài viết: c++ - 使用 MFC C++ 6.0 从 ms access 读取整数数据
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress