JSFiddle:https://jsfiddle.net/d34pksmn/1/
HTML:
<div style="overflow: hidden; width: 100%; position: relative; height: 165px; background: #00AC00;">
<div class="dvSli" style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 4;">
</div>
<div style="overflow: visible; position: absolute; left: 2%; top: 75px; z-index: 10; padding: 10px;">
<span id="arrow-left"></span>
</div>
<div style="overflow: visible; position: absolute; right: 0; top: 75px; z-index: 10;">
<span id="arrow-right"></span>
</div>
<div style="overflow: hidden; height: 40px; width: 100%; text-align: center;">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
<!-- Generate a letter for each occurance in `dCon` class DIV -->
</div>
<div class="dCon" style="overflow: auto; width: 6000000%; height: 125px;">
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
ONE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TWO
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
THREE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FOUR
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FIVE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SIX
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SEVEN
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
EIGHT
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
NINE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TEN
</div>
</div>
</div>
如何修改我的 HTML/CSS/JQuery 以便:
- 单击左/右箭头将在
dCon
内滑动每个 DIV 类父 div,如果单击左侧则为左侧,如果单击右侧则为右侧 点击。
我想在不使用任何插件的情况下实现图像轮播。
最佳答案
我不是 100% 确定您在第 2 部分中要求的内容,您可以更具体一点吗?
对于第一部分,这是一个简单的解决方案:
$(function() {
$("#arrow-left").click(function() {
$(".dCon div:first-child").appendTo(".dCon");
$(".dCon").remove(".dCon div:first-child");
});
$("#arrow-right").click(function() {
$(".dCon div:last-child").prependTo(".dCon");
$(".dCon").remove(".dCon div:last-child");
});
});
和更新的 fiddle :https://jsfiddle.net/JSnoobDC16/d34pksmn/6/
关于javascript - 如何使用左/右循环浏览div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37734127/