zoukankan      html  css  js  c++  java
  • 网站图片轮播淡入淡出效果

    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;
       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;
       16px;
      margin:0 8px;
      background-color: #fff !important;
      opacity:0.8 !important;
    }
    .carousel-indicators .active {
         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>
    
  • 相关阅读:
    Unity 3D第三人称视角、用途广泛限定角度(视角不能360度翻转)
    Android Studio安卓导出aar包与Unity 3D交互
    Unity 3D调用Windows打开、保存窗口、文件浏览器
    安卓与Unity交互之-Android Studio创建Module库模块教程
    Unity 3D与Android Studio安卓交互之-导出jar包
    C#字符串string以及相关内置函数
    Unity 3D委托entrust
    数据结构与算法学习一
    .NET Core学习一--Powered by .NET Core on Kubernetes
    easyui.form
  • 原文地址:https://www.cnblogs.com/wave-gbt/p/6035802.html
Copyright © 2011-2022 走看看