Question

我的网站有一个bootstrap轮播。

当幻灯片放入轮播视图时，如何使用相应的图像显示图像指向箭头？这是我想要的例子。

所有相关的引导链接都在文档的<head>部分中。

这是我到目前为止的代码;

<div class="menu-cascading-image-button-arrow-container">
    <div class="triangle" id="tri-2"></div>
    <div class="menu-cascading-image-button" id="center-left" data-target="#slider" data-slide-to="1">
        <div class="inner-text-box">This year's ISA account<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
    </div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-3"></div>
    <div class="menu-cascading-image-button" id="center-right" data-target="#slider" data-slide-to="3">
        <div class="inner-text-box">Current Accounts<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
    </div>
</div>
<div class="menu-cascading-image-button-arrow-container">
<div class="triangle" id="tri-4"></div>
    <div class="menu-cascading-image-button" data-target="'slider" data-slide-to="4">
        <div class="inner-text-box">Savings Accountss<i class="fa fa-chevron-right" aria-hidden="true"></i></div>
    </div>
</div>

CSS

.menu-cascading-image-button-arrow-container{
width:25%;
float:left;
cursor:pointer;
background-color:#E0DDDD;
position:relative;
}
.menu-cascading-image-button-arrow-container:hover{
background-color:#0D0155;
color:white;
}
.triangle{
width:0px;
height:0px;
border:transparent solid 20px;
border-bottom:#0D0155 solid 20px;
display:none;
padding:0px;
margin-left:100px;
bottom:99%;
position:absolute;
}
.menu-cascading-image-button{
float:left;
cursor:pointer;
width:100%;
}
#menu-button-container{
width:100%;
}
.inner-text-box{
font-size:15px;
color:#0D0155;
padding:15px;
font-weight:200;
}
.inner-text-box i{
float:right;
padding-top:3px;
font-weight:100;
}
.inner-text-box:hover{
color:white;
}

由于

Answer 1

由于他们独立于独立轮播项目，他们不会移动。

当所有旋转木马项目只有一个元素时，实际技巧将起作用。使用JS，您可以根据活动的元素移动元素。

以下代码说明了这一点。单击项目以查看其移动。这是一个简单的例子，需要加强才能使其在复杂的安排中发挥作用。

＆＃13;

var container = '.menu-cascading-image-button-arrow-container';
var item = '.menu-cascading-image-button';
var triangle = '#triangle';
var triangleWidth = $(triangle).outerWidth();

function markActive(elementToGo) {
  $el = $(elementToGo);
  $(item).removeClass('active');
  $el.addClass('active');
  var offset = $el.position();
  var width = $el.outerWidth();
  var left = width / 2 - triangleWidth / 2;
  $(triangle).css('margin-left', left + offset.left);
}
$(document).ready(function() {
  //initial page load
  markActive(item + ':first');
  
  //mark item active on click
  $(item).on('click', function(e) {
    e.preventDefault();
    markActive(this)
  })

})

＆＃13;

.menu-cascading-image-button-arrow-container {
  position: relative;
  margin-top: 25px;
}
.menu-cascading-image-button-arrow-container .menu-cascading-image-button {
  width: 25%;
  float: left;
  cursor: pointer;
  background-color: #E0DDDD;
  color: #0D0155;
  position: relative;
  border-right: 1px solid #aaa;
  box-sizing: border-box;
}
.menu-cascading-image-button-arrow-container .menu-cascading-image-button.last {
  border-right-color: transparent;
}
.menu-cascading-image-button-arrow-container .menu-cascading-image-button.active,
.menu-cascading-image-button-arrow-container .menu-cascading-image-button:hover {
  background-color: #0D0155;
  color: white;
}
.menu-cascading-image-button-arrow-container[data-active] .triangle {
  display: block
}
.triangle {
  transition: margin linear 0.3s;
  width: 0px;
  height: 0px;
  border: transparent solid 20px;
  border-bottom: #0D0155 solid 20px;
  display: none;
  padding: 0px;
  margin-left: 100px;
  bottom: 99%;
  position: absolute;
}
#menu-button-container {
  width: 100%;
}
.inner-text-box {
  font-size: 15px;
  padding: 15px;
  font-weight: 200;
}
.inner-text-box i {
  float: right;
  padding-top: 3px;
  font-weight: 100;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu-cascading-image-button-arrow-container" data-active>
  <div class="triangle" id="triangle"></div>
  <div class="menu-cascading-image-button" id="center-left" data-target="#slider" data-slide-to="1">
    <div class="inner-text-box">This year's ISA account<i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>

  <div class="menu-cascading-image-button" id="center-right" data-target="#slider" data-slide-to="3">
    <div class="inner-text-box">Current Accounts<i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>

  <div class="menu-cascading-image-button last" data-target="'slider" data-slide-to="4">
    <div class="inner-text-box">Savings Accountss<i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

＆＃13;

如图所示，如何让“图像指向”箭头出现在滑动转盘中？

1 个答案: