如何使图像滑块的项目符号在活动时看起来不同

How to make a bullet of an image slider look different while is active?

本文关键字：活动 看起来 符号 项目 图像 何使      更新时间：2023-09-26

我已经有滑块工作了。如果你按下子弹，你会得到图像的位置，如果你不按任何子弹，一段时间后，图像无论如何都会改变。

所以现在我需要知道如何使当前处于活动状态的子弹看起来与其他子弹不同。如果您单击项目符号，我已经对其进行了编码。但我希望它在图像显示时有所不同。你用java这样做吗？

这是我正在使用的代码：

Javascript：

var imageCount = 1;
var total = 6;
function photo(x) {
    var image = document.getElementById('img_slider');
    imageCount = x;
    image.src = "imagenes/img"+ imageCount +".png";
    clearInterval(time);
    time =  window.setInterval(function photoA() {      
    var image = document.getElementById('img_slider');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "imagenes/img"+ imageCount +".png";
    },18000);
}
var time = window.setInterval(function photoA() {    
    var image = document.getElementById('img_slider');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "imagenes/img"+ imageCount +".png";
    },18000);

.CSS：

#slider {
    position:relative;
    overflow: hidden;
}
#img_slider {
    position:relative;
    height:100%;
    width:100%;
}
#slider .bulletswrapper {
    position: relative;
    display: table;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
    z-index: 1;
}
#slider div.bulletswrapper div {
    border: none;
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: #CCCCCC;
    font-size: 0;
    margin: 2px 9px;
    cursor: pointer;
    border-radius: 11px;
    box-shadow: inset 0 1px 3px #666666;
}
#slider div.bulletswrapper div:hover {
    background-color: #e7e7e7;
    box-shadow: inset 0 1px 3px -1px #666666;
}
#slider div.bulletswrapper div:active{
    background-color: #1293dc;
    box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 1px rgba(0,0,0,.5);
}

.HTML：

<div id="slider">
    <img src="imagenes/img1.png" id="img_slider" alt="slider">  
    <div class="bulletswrapper">
       <div id="1_b" onClick="photo(1)">1</div>
       <div id="2_b" onClick="photo(2)">2</div>
       <div id="3_b" onClick="photo(3)">3</div>
       <div id="4_b" onClick="photo(4)">4</div>
       <div id="5_b" onClick="photo(5)">5</div>
       <div id="6_b" onClick="photo(6)">6</div>
    </div>
</div>

我稍微清理了一下您的代码并添加了一个名为 ChangeActiveBullet 的新函数，该函数删除了以前的选择并更新了当前选择。我还引入了一个名为 selectedBullet 的新变量，它会根据需要进行更新（通过 setInterval 或 onclick ）。完整代码如下：

Javascript： 

var imageCount = 1;
var total = 6;
var selectedBullet = 1;
function photo(x) {
  var image = document.getElementById('img_slider');
  ChangeActiveBullet(x);
  imageCount = x;
  image.src = "https://placehold.it/" + imageCount + "50x150/ff0000";
}
var time = window.setInterval(function photoA() {
  var image = document.getElementById('img_slider');
  imageCount = imageCount + 1;
  if (imageCount > total) {
    imageCount = 1;
    document.getElementById((total - 1) + '_b').classList.remove('active');
  }
  if (imageCount < 1) {
    imageCount = total;
  }
  image.src = image.src = "https://placehold.it/" + imageCount + "50x150/ff0000";
  ChangeActiveBullet(imageCount); 
}, 4000);
function ChangeActiveBullet(x) {
  //Use the selectedBullet variable to find the bullet to remove the "active" class from.
  var previousBullet = document.getElementById(selectedBullet + '_b');
  previousBullet.classList.remove('active');
  //Add the "active" class to the current selection.
  var activeBullet = document.getElementById(x + '_b');
  activeBullet.classList.add('active');
  selectedBullet = x;
}

CSS：

#slider div.bulletswrapper div.active {
  background-color: red;
}

下面的演示使用占位符图像，您可以在实现中明显更改这些图像。

小提琴演示

您可以通过设置或清除活动项目符号的样式来更改活动项目符号在photo()和photoA()函数中的显示。

像这样：

// clear and set bullet styles
for( i = 1; i <= total; i++ ) {
    var bullet = document.getElementById( i+'_b');
    bullet.style.backgroundColor = (i===x ? 'white' : '');
}

样本 JSFIDDLE

相关文章：