我正在尝试像youtube一样制作内容滑块
这是我的......
我的内容完全向右或向左滑动800px。但问题出在这里..当我先点击左侧图标时,点击右侧图标将无效!能解决这个问题吗??
使用Javascript:
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
});
$(document).ready(function(){
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({left: '+=800px'});
});
});
HTML:
<div id="trendingdiv" class="" style="overflow-x:scroll; overflow: hidden;">
<table id="trendingtable" class="table" style="position:relative;">
<a id="trendingpreviousicon" style="cursor:pointer; margin-top: 62px;
position:absolute; z-index:1;" class="previous round">‹</a>
<a id="trendingnexticon" style="cursor:pointer; margin-left: 1250px;
margin-top: 62px; position:absolute; z-index:1;" class="next round">›
</a>
<tr>
<?php while ($tsingers = mysqli_fetch_assoc($tsingersquery)): ?>
<td>
<div class="media" style="border: 1px solid #e6e6e6; width:400px;
padding: 0px;">
<img src="images/<?=$tsingers['image'];?>" alt="<?
=$tsingers['name'];?>"
class="pull-left img-responsive" style="width: 200px; height:
150px;" id="artistimg">
<div id="trendingmediabody" class="media-body">
<p id="trendingname" style="font-size:14px; font-weight:
bolder;"><?=$tsingers['name'];?></p>
<p id="trendingcategory" style="font-size:12px; font-weight:
bolder;"><?=$tsingers['category'];?></p></br></br>
</div>
</div>
</td>
<?php endwhile; ?>
</tr>
</table>
</div>
答案 0 :(得分:0)
Heyo,你只需要一个$(文件).ready(),你可以将两个函数放在那个函数中。
尝试检查检查器,看看幻灯片动画后是否有什么东西不与按钮重叠
答案 1 :(得分:0)
我会猜测并说这是因为你动画left
和right
而不是其中一个。 left
并不代表&#34;向左移动&#34;,这意味着,&#34;设置left
CSS样式属性&#34;。并且left
表示&#34;我的左边界相对于我最近的亲戚父亲的位置&#34;。
请改为尝试:
$(document).ready(function () {
$("#trendingnexticon").on('click', function () {
$("#trendingtable").animate({
left: '-=800px'
});
});
$("#trendingpreviousicon").on('click', function () {
$("#trendingtable").animate({
left: '+=800px'
});
});
});
答案 2 :(得分:0)
“左”和“右”属性存在冲突。
$(document).ready(function(){
$("#trendingnexticon").on('click' ,function(){
$("#trendingtable").animate({right: '+=800px'});
});
$("#trendingpreviousicon").on('click' ,function(){
$("#trendingtable").animate({right: '-=800px'});
});
});
P.S。:我也删除了双$(文件).ready,因为一个就够了。