Question

我有一个功能齐全的图像滑块浮动在（3）DIVS的无序列表旁边。滑块的第一种颜色与第一种DIV相对应。我正在尝试创建一种效果，当有人点击滑块上的“下一个”按钮时，不仅滑块会转换到下一个颜色，而且旁边浮动的DIV也会淡出，而下一个DIV则对应到了下一个颜色淡入。

我有滑块工作，但我很难弄清楚如何允许按钮的每次点击也连续循环每个与滑块颜色相对应的DIV。

我是jquery的相对初学者，但我能理解它的一些更复杂的逻辑，我只是想不通。我尝试隐藏DIV的溢出，并遵循相同的图像滑块过程，但没有运气。

我真的很感激任何帮助。到目前为止，我所掌握的是一个Jsfiddle。

    <ul id="slide_info">
    <div id="info1">
        <h2>Blue Header</h2>
        <p>Description</p>
    </div>  

    <div id="info2">
        <h2>Red Header</h2>
        <p>Description</p>
    </div>  

    <div id="info3">
        <h2>Yellow Header</h2>
        <p>Description</p>
    </div>  


</ul>

https://jsfiddle.net/lgwj/Lb6p87ft/1/

Answer 1

在这里。您可以根据需要调整div的高度和宽度。

jQuery(document).ready(function ($) {
  
	var slideCount = $('#slider ul li').length;
	var slideWidth = $('#slider ul li').width();
	var slideHeight = $('#slider ul li').height();
	var sliderUlWidth = slideCount * slideWidth;
	
	$('#slider').css({ width: slideWidth, height: slideHeight });
	$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    $('#slider ul li:last-child').prependTo('#slider ul');

  var slideinfoWidth = $('.desc').width();
  var slideinfoHeight = $('.desc').height();
  var sliderUlinfoWidth = slideCount * slideWidth;
    
      $('#slide_info').css({ width: slideinfoWidth, height: slideinfoHeight });
  $('#info').css({ width: sliderUlinfoWidth});

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 300, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
        $('#info').animate({
            left: - slideinfoWidth
        }, 300, function () {
            $('.desc:first-child').appendTo('#info');
            $('#info').css('left', '');
        });
    };
	
    $('a.control_next').click(function () {
        moveRight();
    });

});

html, body {
  margin: 0;
  padding: 0;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  float:right;
  width: 50% !important;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 550px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 639.5px;
  height: 550px;
  text-align: center;
  line-height: 300px;
}

a.control_next {
  position: absolute;
  top: 45%;
  z-index: 999;
  display: block;
  padding: 50px 50px;
  width: auto;
  height: auto;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  opacity: 0.5;
  background-image:url(prev-icon.png);
  background-repeat:no-repeat;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}


a.control_next {
  right: 0;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;}
  
  
  
 #feat {
  	width: 100%;}
  
  
.feat_slides {
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;}
	
#feat_slide1 {
	background: #006699;}
	
#feat_slide2 {
	background: #CC0033;}
	
#feat_slide3 {
	background:#FFFF99;}
	
	
#slide_info {
	float: left;
	width:50%;
	padding-left: 0;}
	
.slide_info {
	}
	
#info1, #info2, #info3 {
	background-color: #fff;
	width: 50%;
	height: 500px;
	padding-top: 215px;
	padding-left: 30px;}

.desc{
  float:left;
}
#slide_info{
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="feat">
	<ul id="slide_info"><div id="info">
    	<div class="desc" id="info1">
			<h2>Blue Header</h2>
			<p>Description</p>
        </div>
        
        <div class="desc" id="info2">
			<h2>Red Header</h2>
			<p>Description</p>
        </div>	
        
        <div class="desc" id="info3">
			<h2>Yellow Header</h2>
			<p>Description</p>
        </div>	
        </div>
	</ul>
   
<div id="slider">
  <a href="#" class="control_next" id="toggle_info">BUTTON</a>
  <ul>
    <li class="feat_slides" id="feat_slide1"></li>
    
    <li class="feat_slides" id="feat_slide2"></li>
    
    <li class="feat_slides" id="feat_slide3"></li>
  </ul>  
</div>

</div>

Answer 2

我看到的第一个明显的事情是div作为ul的直接孩子即使这可能不会导致任何问题，这肯定是无效的HTML。大多数现代浏览器正在修复这...但仍然是一件坏事。

因此div中的<ul id="slide_info">元素必须由<li>和</li>包裹。

然后，关于你的代码，你使用了一个巧妙的appendTo技巧来“循环”列表项......为什么不使用相同的技巧呢？

现在关于淡入/淡出...有动画延迟考虑。您可以使用回调函数，这些函数是在完成另一个函数时执行的函数。

$(document).ready(function(){

  // Variable declarations
  var slideCount = $('#slider ul li').length;
  var slideWidth = $('#slider ul li').width();
  var slideHeight = $('#slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  // Positionning
  $('#slider').css({ width: slideWidth, height: slideHeight });
  $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

  // ??? Why this "re-ordering" on load?
  $('#slider ul li:last-child').prependTo('#slider ul');

  // Hide all slide-info item except the first
  $("#slide_info li").not("#slide_info li:nth-child(1)").hide();

  // Click handler
  $('a.control_next').click(function () {

    // Animate the slides
    $('#slider ul').animate({
      left: - slideWidth
    }, 300, function () {
      $('#slider ul li:first-child').appendTo('#slider ul');
      $('#slider ul').css('left', '');
    });

    // Animate slide infos
    // Get the visible one into a variable
    var visible = $("#slide_info li:visible");
    // Fade it out and fade in the next one
    visible.fadeOut(300, function(){
      // This is a callback, so after the fadeOut:
      visible.next().fadeIn(300,function(){
        // This is also a callback...
        // "visible" is now faded out, but still in this variable.
        // Append it to the end of the list.
        visible.appendTo("#slide_info");
      });
    })
  });

});

Your Fiddle updated

按钮单击，DIV淡出，而另一个DIV在同一位置淡入

2 个答案: