Jquery 将圆线插入图标圆

我试图创建一个圆形图标持有人。一切都很完美，但我想添加一条环线，将所有图标连接起来，创建一个圆圈。 这是我想要的

这是我目前拥有的

这是我正在使用的代码

<div class="three60_wrapper clearfix">


    <ul>
        <li><img src="image url" alt="logo"></li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>


    </ul>


</div>


.three60_wrapper ul {


    list-style-type: none; 
    padding: 0; position: relative; 

}
.three60_wrapper li {
    position: absolute;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}

.three60_wrapper li a{ display: block;
}
.three60_wrapper li img{ display: block; min-width: 130px; height: auto; max-width: 180px;}




jQuery(function() {

    var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
    radius = '20em', //distance from center
    start = -90, //shift start from 0
    $elements = jQuery('.three60_wrapper ul li:not(:first-child)'),
    numberOfElements = (type === 1) ?  $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle
    slice = 360 * type / numberOfElements;

$elements.each(function(i) {
    var $self = jQuery(this),
        rotate = slice * i + start,
        rotateReverse = rotate * -1; 

    $self.css({
        'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'
    });
}); 


});

.three60_{
列表样式类型：无；
填充：0；位置：相对；
}
.Three 60_li{
位置：绝对位置；
-webkit转换：所有2s线性；
-moz转变：所有2s线性；
过渡：所有2s线性；
}
.three60_包装器LIA{显示：块；
}
.three60_包装li img{显示：块；最小宽度：130px；高度：自动；最大宽度：180px；}
jQuery（函数（）{
var type=1，//圆圈类型-1个整数，0.5个半整数，0.25个四分之一整数
半径='20em'，//距中心的距离
start=-90，//从0开始移位
$elements=jQuery（'.three60_包装ul li:not（：first child）'），
numberOfElements=（type==1）？$elements.length:$elements.length-1，//非整圆时元素偶数分布的调整
切片=360*type/numberOfElements；
$elements.每个（功能（i）{
var$self=jQuery（此），
旋转=切片*i+开始，
旋转方向=旋转*-1；
$self.css({
'变换'：'旋转（'+rotate+'度）平移（'+radius+'）旋转（'+rotateReverse+'度）'
});
}); 
});

它是以这个为基础的

---

创建一个圆并在其上重叠现有的UL图像不会解决您需要的问题吗

这几乎可以满足您的需求：

li:first-child {
    border: medium solid red;
    width: 24em;
    height: 24em;
    margin-left: -10em;
    margin-top: -10em;
    border-radius: 50%;
}

---

您需要对实际尺寸进行更多试验。您还需要添加

z-index

值，以确保实际图标位于圆圈前面。

您是否考虑过使用SVG进行此操作？如果您不使用SVG，你也可以只使用上面的图像和图像映射它。@GaryHayes我想OP也需要小提琴的动态效果。我想我应该看看它：Pit为我工作。那很简单，谢谢。有没有更好的解决方案，你可以建议，使这种类型的圆形图标？再次感谢