简单的jq滑块通过位置
Simple jq slider via position
伙计们!我有一个简单的js为简单滑块的问题。它适用于左位置:-=999px;我的js为button更改了类,使其成为非活动的,但button仍然可以工作。我想念哪里?我需要禁用我点击的按钮。
$(function(){
var slideWidth = $('#slider ul li').width();
$('a.control_next').click(function() {
$('ol > li:first-child > a').removeClass('active');
$('ol > li:last-child > a').removeClass('control_next');
$('ol > li:first-child > a').addClass('control_prev');
$('ol > li:last-child > a').addClass('active');
$('#anim').animate({
left: "-=920",
}, 500, function() {
});
});
$('a.control_prev').click(function() {
$('ol > li:last-child > a').removeClass('active');
$('ol > li:last-child > a').addClass('control_next');
$('ol > li:first-child > a').addClass('active');
$('ol > li:first-child > a').removeClass('control_prev');
$('#anim').animate({
left: "+=920",
}, 500, function() {
})
});
});
#slider {
overflow: hidden;
padding-left: 0;
padding-right: 0;
}
#slider ul {
position: absolute;
overflow: hidden;
width: 1000%;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
float: left;
width: 920px;
}
ol{
margin: 200px auto 0 auto;
padding: 30px 20px;
list-style: none;
bottom: 0px;
text-align: center;
}
ol > li {
margin: 0 6px;
display: inline-block;
}
ol > li > a{
width: 11px;
height: 11px;
display: block;
background: #f7f7f7;
cursor: pointer;
border-radius: 20px;
box-shadow: inset 0 0 3px #a9afb3;
}
ol > li > a:hover:not(.active) {
background: #333;
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
ol > li > a.active{
background: #a9afb3;
cursor: default;
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider" class="block">
<ul id="anim">
<li><h2 class="twitter">AOS New York @aod</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, sint! Accusamus rem molestias facilis, aliquid. Eum facere adipisci, minus ullam, quis quam eaque quia at recusandae vel veniam sint, veritatis.</p></li>
<li><h2 class="twitter">AOS New York @aod</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, sint! Accusamus rem molestias facilis, aliquid. Eum facere adipisci, minus ullam, quis quam eaque quia at recusandae vel veniam sint, veritatis.</p></li>
</ul>
<ol>
<li><a class="control_prev active"> </a></li>
<li><a class="control_next"> </a></li>
</ol>
</div>
尝试使用标志并在每个相应的处理程序(如(中设置它们
$(function() {
var slideWidth = $('#slider ul li').width();
var next = true;
var prev = false;
$('a.control_next').click(function() {
if (next) {
$('ol > li:first-child > a').removeClass('active');
$('ol > li:last-child > a').removeClass('control_next');
$('ol > li:first-child > a').addClass('control_prev');
$('ol > li:last-child > a').addClass('active');
$('#anim').animate({
left: "-=920",
}, 500, function() {});
next = false;
prev = true;
}
});
$('a.control_prev').click(function() {
if (prev) {
$('ol > li:last-child > a').removeClass('active');
$('ol > li:last-child > a').addClass('control_next');
$('ol > li:first-child > a').addClass('active');
$('ol > li:first-child > a').removeClass('control_prev');
$('#anim').animate({
left: "+=920",
}, 500, function() {})
}
next = true;
prev = false;
});
});
#slider {
overflow: hidden;
padding-left: 0;
padding-right: 0;
}
#slider ul {
position: absolute;
overflow: hidden;
width: 1000%;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
float: left;
width: 920px;
}
ol {
margin: 200px auto 0 auto;
padding: 30px 20px;
list-style: none;
bottom: 0px;
text-align: center;
}
ol > li {
margin: 0 6px;
display: inline-block;
}
ol > li > a {
width: 11px;
height: 11px;
display: block;
background: #f7f7f7;
cursor: pointer;
border-radius: 20px;
box-shadow: inset 0 0 3px #a9afb3;
}
ol > li > a:hover:not(.active) {
background: #333;
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
ol > li > a.active {
background: #a9afb3;
cursor: default;
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider" class="block">
<ul id="anim">
<li>
<h2 class="twitter">AOS New York @aod</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, sint! Accusamus rem molestias facilis, aliquid. Eum facere adipisci, minus ullam, quis quam eaque quia at recusandae vel veniam sint, veritatis.</p>
</li>
<li>
<h2 class="twitter">AOS New York @aod</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, sint! Accusamus rem molestias facilis, aliquid. Eum facere adipisci, minus ullam, quis quam eaque quia at recusandae vel veniam sint, veritatis.</p>
</li>
</ul>
<ol>
<li><a class="control_prev active"> </a>
</li>
<li><a class="control_next"> </a>
</li>
</ol>
</div>
相关文章:
- jquery试图按名称获取按钮位置
- 我可以获得相对于被点击元素的确切点击位置吗
- 谷歌地图固定位置覆盖
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 循环比赛位置算法
- es6 相当于下划线查找位置
- jQuery循环在特定位置暂停
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 自定义函数中的光标位置
- 安卓平台上的QWebView HTML5地理位置
- DIV并排,位置不正确
- 使用jQuery更改元素的顶部位置
- 在谷歌地图上绘制位置数据库
- 跟踪jqplot垂直折线图的鼠标位置
- 设置画布渲染器的x和y位置
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 根据页面的位置突出显示文本中的字符
- 传单缩放控制位置错误
- 返回的y值大于实际y位置[JS(无jQ)/DOM]
- 简单的jq滑块通过位置