javascript - 如何对段落下方的单选按钮进行编码以使右侧的图像动画化
问题描述
我正在制作所附屏幕截图中显示的页面。该页面有 2 个 div 部分(左和右部分)嵌套在一个主容器 div 中。我使用了以下 HTML:
<div class="places" id="places">
<img src="images/places-img.png" alt="places" />
<div class ="placetext">
<h2>Places</h2>
<p>Experience Japan...</p>
</div>
</div
我还使用了以下 CSS:
.places {
background-color: #000000;
height: 100%;
width: 100%;
display: block;}
.places img {
float: right;
width: 50%;
height: 100%;
display: inline-block;}
.placetext {
float: left;
width: 50%;
height: 100%;
display: inline-block;
position: absolute;}`
.placetext h2 {
display: inline-block;
position: relative;
margin-top: 30%;
color: white;
font-family: Electroharmonix;
padding-left: 15%;
border-bottom: 5px solid #DC1A31;}
.placetext p {
color: #FFFFFF;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-weight: 200;
text-align: justify;
font-size: 16px;
column-count: 2;
column-gap: 30px;
column-rule: 1px solid white;
margin: 0 8%;
line-height: 1.8;}
我想知道如何在文本下方包含这些单选按钮并将它们链接到右侧的图像,因此当单击按钮时,它们允许右侧的图像通过平滑地向左推到下一个图像来缓慢转换,例如一个旋转木马。
在右侧,我打算包含 5 张图片。
我对 JavaScript 了解不多,但我知道这可能需要它来为图像设置动画。
**编辑:
我之前在画廊里做过这个,但不管我怎么修改它,它都会完全破坏布局——Javascript:
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
解决方案
推荐阅读
- mongodb - 获取MongoDB中活动的键值对结果
- c++ - += 运算符同时作为参数传递
- javascript - onchange 只检测 div 的第一个复选框
- vue.js - Vue.Js 在组件之间画线问题
- c - 如何在 C 中编辑特定的二进制数据而不删除/覆盖整个文件?
- scala - 实例化 'org.apache.spark.sql.hive.HiveSessionState' 时出错:使用 spark session 读取 csv 文件时
- html - 如何从这一行生成工具栏?
- java - 创建 zip 文件而不写入磁盘
- build - 在执行“bitbake image_name”期间出现错误“检查程序 pkg-config:未找到”
- json - 用jq将过滤后的json转换成csv