css 简单的滑块/旋转脚本。留下了一个右箭头。也自动旋转。

Posted 2021-05-13

<script type="text/javascript">
  	$("#custom1_mod").wrap("<div id='captavi-slider'></div>")
  	$("#captavi-slider").append("<div class='slide-right'></div><div class='slide-left'></div>");
  	$("#custom1_mod li").first().addClass("current").find("span").addClass("animate");
  	function cycleRotator (){
  		var current = $('#custom1_mod li.current');
  		var next = current.next();
  		if (!next.length) {
  			next = current.parent().find('li:first');
  		};
  		current.find("span").removeClass("animate");
  		current.removeClass("current").removeClass("parent").fadeOut();
  		var currentClass = next.attr("class");
  		next.addClass('current').fadeIn();
  		next.find("span").addClass("animate");  		
  		timerId = setTimeout(cycleRotator, 5000);
  	}
  	var timerId = setTimeout(cycleRotator, 5000);
  	$('.slide-right').click(function(e) {
  		e.preventDefault();
  		clearTimeout(timerId);
  		var current = $('#custom1_mod li.current');
  		var next = current.next();
  		if (!next.length) {
  			next = current.parent().find('li:first-of-type');
  		};
  		current.find("span").removeClass("animate");
  		current.removeClass("current").removeClass("parent").fadeOut();
  		var currentClass = next.attr("class");
  		next.addClass('current').fadeIn().find("span").addClass("animate"); 
  	});
  	$('.slide-left').click(function(e) {
  		e.preventDefault();
  		clearTimeout(timerId);
  		var current = $('#custom1_mod li.current');
  		var previous = current.prev();
  		if (!previous.length) {
  			previous = current.parent().find('li:last-of-type');
  		};
  		current.find("span").removeClass("animate");
  		current.removeClass("current").removeClass("parent").fadeOut();
  		var currentClass = previous.attr("class");
  		previous.addClass('current').fadeIn().find("span").addClass("animate"); 
  	});
  </script>

#custom1_mod li a{
  cursor: default;
}
#custom1_mod li a.btn{
  cursor: pointer;
}
@keyframes fadeInBottomBig {
  0% {
      opacity: 0;
      transform: translateY(2000px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}
#custom1_mod li span {
    height: 75%;
    overflow: hidden;
    position: absolute;
    left: 0px;
    text-overflow: ellipsis;
    top: 100%;
    white-space: nowrap;
    width: 100%;
}
#custom1_mod li span.animate {
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-name: fadeInBottomBig;
    height: 75%;
    overflow: hidden;
    position: absolute;
    left: 0px;
    text-overflow: ellipsis;
    top: 25%;
    white-space: nowrap;
    width: 100%;
}
#captavi-slider{
  position: relative;
  background: none repeat scroll 0 0 #4D4D4D;
  max-height: 580px;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}
#captavi-slider .slide-right, #captavi-slider .slide-left{
  position: absolute;
  top: 100%;
}
#captavi-slider:hover .slide-right{
  position: absolute;
  top: 50%;
  right: 0;
  height: 40px;
  width: 40px;
  margin-right: 30px;
  background: url('../../assets/images/site-images/large_right.png');
  background-position: 0 40px;
}
#captavi-slider:hover .slide-right:hover{
  background-position: 0px 0px;
}
#captavi-slider:hover .slide-left{
  position: absolute;
  top: 50%;
  left: 0;
  height: 40px;
  width: 40px;
  margin-left: 30px;
  background: url('../../assets/images/site-images/large_left.png');
  background-position: 0 40px;
}
#captavi-slider:hover .slide-left:hover{
  background-position: 0px 0px;
}