javascript - slider 到图像上的图标

Question

我有一张图片，上面有图标，如下图所示。

图像上的图标是可点击的，每当我点击任何图标时，它应该被移动到中心。我该怎么做？？？

index.php

<div class="container-fluid">
    <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img">
        <img src="images/Services.jpg">
        <ul>
        <div class="col-md-12 col-lg-12">   
            <div class="row">
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div> 
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
            </div>
        </div>
        </ul>
    </div>
</div><br><br>

text.css

   .bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
  opacity: .6;
}

我点击的图标应该移到中心。请帮我解决问题。

提前致谢!!!

Answer 1

我在图像轮播上工作过，它可以帮助您实现您的期望。

尝试将您的图片用于旋转木马指示器。我已经默认了一个轮播。

根据您的要求更改css 和div 位置。

让我知道您正在寻找什么。

查看正在编辑的 fiddle :http://jsfiddle.net/KishorVelayutham/yhevvxz4/26/

希望这有帮助..!