1. 首頁
  2. 問答
  3. 用圖像替換旋轉木馬指示器

用圖像替換旋轉木馬指示器

2017-04-17 23 views
2

我有一個旋轉木馬，並試圖用圓形圖像替換指標，每當我這樣做圖像出現，但指標不消失，我想移動指標，並保持圖像作爲指標，我想將指標移動到左側，我該怎麼做？這裏是我的代碼：用圖像替換旋轉木馬指示器

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://placehold.it/140x100" alt="..."> 
 
</li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src=" http://placehold.it/350x150" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src=" http://placehold.it/350x150" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

來源

2017-04-17 stephjhonny

回答

4

請嘗試使用此，如果您需要進一步的幫助，在下面評論的答案。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <style> 
     .carousel-indicators{ 
      list-style: none; 
     } 
     .carousel-indicators li, .carousel-indicators li.active{ 
      width: 70px; 
      height: 70px; 
      background-color: #fff; 
      position: relative; 
      margin: 10px;   
     } 
     .carousel-indicators img{ 
      position: absolute; 
      width: 100%; 
      border-radius: 50%; 
      height: 100%; 
      top: 0; 
      left: 0;    
     } 
    </style> 
</head> 

<body> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://placehold.it/70x70" alt="..."></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"><img src=" http://placehold.it/70x70" alt="..."></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"><img src=" http://placehold.it/70x70" alt="..."></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src=" http://placehold.it/350x150" alt="..."> 
      <div class="carousel-caption"> 
      1 
      </div> 
     </div> 
     <div class="item"> 
      <img src=" http://placehold.it/350x150" alt="..."> 
      <div class="carousel-caption"> 
      2 
      </div> 
     </div> 
     <div class="item"> 
      <img src=" http://placehold.it/350x150" alt="..."> 
      <div class="carousel-caption"> 
      2 
      </div> 
     </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

來源

2017-04-17 20:28:50

+0

非常感謝你 – stephjhonny

1 

.carousel-indicators { 
 
left:0!important; 
 
margin-left:0!important; 
 
right:0; 
 
width:100%; 
 
text-align:left!important 
 

 
} 
 

 
.carousel-indicators li{ 
 
border:none!important; 
 
background:none!important; 
 
position:relative; 
 
text-indent:0!important; 
 
} 
 

 
.carousel-indicators li img{ 
 
width:10px; 
 
height:10px; 
 
border-radius:5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://clipart-library.com/images/6Tp5aB97c.png" alt="..."> 
 
</li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://clipart-library.com/images/6Tp5aB97c.png" alt="..."> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://clipart-library.com/images/6Tp5aB97c.png" alt="..."> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src=" http://placehold.it/350x150" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src=" http://placehold.it/350x150" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

來源

2017-04-17 20:29:22 AHBagheri

相關問題

 相關問題