html
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"><a rel="nofollow" href="/special/black-friday"><img src="static/new_index/image/black-friday.jpg"></a></div> <div class="item"><a rel="nofollow" href="/out/1356720817746" target="_blank"><img src="static/new_index/image/Bloomingdales.jpg"></a></div> <div class="item"><a rel="nofollow" href="/out/1356722837948" target="_blank"><img src="static/new_index/image/asos.jpg"></a></div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#carousel" data-slide="prev"><img src="static/new_index/image/left.png"></a> <a class="carousel-control right" href="#carousel" data-slide="next"><img src="static/new_index/image/right.png"></a> </div>css
.carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .item:hover{ cursor: pointer; } .carousel-control { display: none; height: 96px; width: 72px; opacity: 0.3; color: #fff; margin: 7%; background-color: #000000; border: #000000; padding-top: 20px; z-index: 2; } .carousel-control:hover { color: #fff; outline: 0; opacity: 0.6; } .carousel-indicators li{ height: 16px; width: 16px; margin:0 8px; background-color: #fff !important; opacity:0.8 !important; } .carousel-indicators .active { width: 16px; height: 16px; margin:0 8px; background-color: #68c4cb !important; border-color: #68c4cb; }js
<script> $(function(){ $('.carousel').carousel({ interval: 5000 }); $('.carousel-fade').hover(function(){ $('.carousel-control').css("display","block"); }); $('.carousel-fade').mouseleave(function(){ $('.carousel-control').css("display","none"); }); }); </script>转载于:https://www.cnblogs.com/wave-gbt/p/6035802.html
相关资源：图片淡入淡出切换效果实现