如何制作div滑块？
我正在试图制作一个滑块，滚动3个div元素到3个新的滚动元素。 我正在寻找一个手动滑块，在右侧指向右侧，左侧指向左侧。 当向右箭头点击时，滑块应该向右滑动并显示其余3个div元素。 如果先点击左箭头，则不会发生任何事情。 如果在点击右箭头后点击它，它应该滑回到前三个div元素。 如果连续点击右箭头两次，则第二次点击应该滑回到最初的3个div元素。 基本上，我想最终得到像团结网站上的滑块一样的东西。 链接：http：//unity3d.com/unity
这是我的HTML代码。 它显示3列和2行的框：
<div class="categories">
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
</div>
以下是框的CSS样式：
/**********************
*******CATEGORIES******
**********************/
.categories {
width: 90%;
margin: 3% 9%;
clear: left;
}
.category {
padding: 7% 5% 3% 5%;
width: 20%;
border: 1px solid #E0E0E0;
float: left;
cursor: pointer;
text-align: center;
}
.category:hover {
border: 1px solid #4F8E64;
}
.category h3 {
color: #3F7250;
margin: 6% 0;
}
.category p {
text-align: center;
}
确保填充，边距和宽度保持百分比。 随意修改代码并在小提琴或其他东西上与我分享。
你可以使用Caroufredsel jquery插件。 这里是安装页面：
http://dev7studios.com/caroufredsel-old/installation.php
下面是你的一个例子：
http://coolcarousels.frebsite.nl/c/58/
当您在示例中向下滚动并单击橙色栏中的[..]时 - 您将看到该示例的代码。
这是你的轮播的代码：
$('#carousel').carouFredSel({
width: '90%',
items: 3,
scroll: 3,
auto: false,
prev: '#prev',
next: '#next',
infinite: false
});
如果您希望幻灯片不是循环的，也可以使用circular: false 。
好的，如果你考虑bootstrap，那么下面的评论就包括bootstrap js和css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
HTML
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
<div class="item">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
section{
display:inline-block;
border:1px solid black;
}
.item{
text-align:center
}
你可以随心所欲地操作这些部分和内容。
你可以使用jQuery来做一些事情，并制作客户滑块，它会根据你的逻辑工作。 希望这会帮助你。
链接地址: http://www.djcxy.com/p/64457.html