单选按钮-图像+；使用javascript的文本选择器

我需要创建带有颜色的单选按钮（而不是按钮）。单击特定颜色将显示颜色名称以及相应的汽车颜色图像。屏幕看起来像这样

在“分级”部分中，进度条和总分级表都必须具有动画。 我应该如何根据需求进行调整（不幸的是不允许使用引导），这是我到目前为止所做的-

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
文本对齐：居中；
}
身体{
框大小：边框框；
填充顶部：180px；
背景：#ffffff；
}
输入{
显示：无；
}
.按钮{
显示：内联块；
位置：相对位置；
宽度：50px；
高度：50px；
利润率：10px；
光标：指针；
}
.按钮跨度{
显示：块；
位置：绝对位置；
宽度：50px；
高度：50px；
填充：0；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
边界半径：100%；
背景：#eeeeee；
盒影：0 2px 5px 0 rgba（0,0,0,0.26）；
过渡：ease.3s；
}
.按钮范围：悬停{
填充：10px；
}
.红色.按钮跨度{
背景：红色；
}
.银色.按钮跨度{
背景：银；
}
.灰色.按钮跨度{
背景：灰色；
}
.蓝色.按钮跨度{
背景：蓝色；
}
.层{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：透明；
/*过渡：ease.3s*/
z指数：-1；
}
.灰色输入：选中~.图层{
背景：url（“images/grey.jpg”）
}
.red输入：选中~.layer{
背景：url（“images/red.jpg”）
}
.silver输入：选中~.layer{
背景：url（“images/silver.jpg”）
}
.blue输入：选中~.layer{
背景：url（“images/blue.jpg”）
}

文件

这里有一些javascript代码，可以根据按钮显示不同的图像：

函数显示（）{
变量图像={
银牌：{
img:“https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-ingot-silver_7e7e7e.jpg",
描述：“1号车”，
速度：50
},
灰色：{
img:“https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-magnetic_3e3e3e.jpg",
描述：“2号车”，
速度：80
},
红色：{
img:“https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-race-red_c61008.jpg",
描述：“汽车3”，
速度：70
},
蓝色：{
img:“https://stimg.cardekho.com/images/car-images/large/Ford/Ford-Mustang/3835/ford-mustang-absolute-black_1a1a1a.jpg",
描述：“4号车”，
速度：90
}
};
对于（i=0；i<4；i++）{
if（document.colorpicker.color[i].checked==true）{
var checkNumber=document.colorpicker.color[i]；
console.log（document.stage.src）；
document.stage.src=images[checkNumber.value].img；
document.getElementById（“description”）.innerHTML=images[checkNumber.value].description；
移动（图像[checkNumber.value].速度）；
}
}
}
功能移动（wd）{
var elem=document.getElementById（“进度”）；
var宽度=1；
var id=设置间隔（第10帧）；
函数框架（）{
如果（宽度>=wd）{
清除间隔（id）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
elem.innerHTML=“速度：“+width*1+'%”；
}
}
}

---

将单选按钮包装在

中没有足够的详细信息我的意思是你想做什么我已经为你的问题创建了理解你的问题或问题的答案，但我没有理解你所要求的要点？你能解释一下吗？点击单选按钮时需要对齐图像，meterI的动画也添加了进程栏，请检查画笔，我在这里复制代码。@Saifulrahman看不到链接，您能否附加附加附加的进度条？您可以将说明更改为所需的颜色名称。您可以加载加载的第一辆车数据，而不是占位符车数据。以下是车速表总体额定进度条上的一些演示：可在上找到
<div id="bar">
<div id="progress"></div>
</div>

#bar {
  width: 30%;
  background-color: black;
  margin:auto;

}

#progress {
  width: 1%;
  height: 30px;
  background-color: #fcec03;
  line-height: 30px;
  text-align: center;
}