- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个幻灯片,当我将鼠标悬停在它上面时,它会向左移动。我想做的是,当我将鼠标放在左侧时,幻灯片会向左移动,但是当我将鼠标放在右侧时,幻灯片会向右移动。当我将鼠标放在中间时,它不会移动。不太清楚该怎么做。
https://jsfiddle.net/jzhang172/gq3j8993/1/
var $content = $('#imgsList'); // Cache your selectors!
$(".cont").hover( function loop() {
$content.stop().animate({ marginLeft: '-=1600' }, 5000, 'linear', function(){
$content.css({ marginLeft : "0px" });
loop();
});
}, function stop() {
$content.stop();
});
.Img_cl1 .hde img {
width: 112px;
margin: 18px 0px;
}
.cl1 img:hover {
margin-top:-35px;
}
.cl2 img:hover {
margin-top:-34px;
}
.cl3 img:hover {
margin-top:-35px;
}
.cl4 img:hover {
margin-top:-36px;
}
.cl5 img:hover {
margin-top:-48px;
}
.cl6 img:hover {
margin-top:-45px;
}
.cl7 img:hover {
margin-top:-34px;
}
.cl8 img:hover {
margin-top:-47px;
}
.cl9 img:hover {
margin-top:-51px;
}
.cl10 img:hover {
margin-top:-51px;
}
.cl11 img:hover {
margin-top:-37px;
}
.cl12 img:hover {
margin-top:-37px;
}
.Img_cl1 .hde {
float:left !important;
width:200px !important;
text-align:center;
}
.fdfll {
width:2455px;
float:left;
overflow:hidden;
}
#cont1 {
float:left;
}
#contS {
width:100%;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div id="cont1">
<div id="contS" class="Img_cl1">
<div id="imgsList" class="col-md-12 fdfll scroll-left">
<div class=" cl1 hde ">
<img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
</div>
<div class=" cl2 hde">
<img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
</div>
<div class=" cl3 hde ">
<img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
</div>
<div class=" cl4 hde ">
<img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
</div>
<div class=" cl5 hde ">
<img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
</div>
<div class=" cl6 hde ">
<img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
</div>
<div class=" cl7 hde ">
<img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
</div>
<div class=" cl8 hde ">
<img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
</div>
<div class=" cl9 hde ">
<img alt="client" src="http://img14.deviantart.net/d1f8/i/2012/154/2/4/proud_charmander_by_kol98-d525yi2.png" />
</div>
<div class=" cl10 hde ">
<img alt="client" src="http://img2.wikia.nocookie.net/__cb20150510232331/ssb/images/a/a4/.028_Pikachu_%26_Zachary_28_88.png" />
</div>
</a>
<a target="_blank" href="http://reveye.in/">
<div class=" cl11 hde ">
<img alt="client" src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" />
</div>
<div class=" hde cl12 ">
<img alt="client" src="http://oyster.ignimgs.com/mediawiki/apis.ign.com/pokemon-blue-version/8/89/Pikachu.jpg" />
</div>
</div>
</div>
</div>
</div>
最佳答案
您可以尝试的一个选项是创建两个元素作为右/左悬停事件的控件,而不是通过代码确定悬停在哪一侧。然后,绝对定位它们并将它们放在幻灯片窗口的两侧。
因此您的 HTML 可能如下所示:
<div class="cont">
<div id="cont1">
<div id="contS" class="Img_cl1">
<div class="slide-control left">Left</div>
<div class="slide-control right">Right</div>
<div id="imgsList" class="col-md-12 fdfll scroll-left">
<!-- Images go here -->
</div>
</div>
</div>
</div>
然后你的 JavaScript 将变成:
var $content = $('#imgsList'); // Cache your selectors!
$(".slide-control.left").hover( function loop() {
$content.stop().animate({ marginLeft: '-=1600' }, 5000, 'linear', function(){
$content.css({ marginLeft : "0px" });
loop();
});
}, function stop() {
$content.stop();
});
$(".slide-control.right").hover( function loop() {
$content.stop().animate({ marginLeft: '+=1600' }, 5000, 'linear', function(){
$content.css({ marginLeft : -$content.outerWidth() });
loop();
});
}, function stop() {
$content.stop();
});
这是一个 JSFiddle演示解决方案。我已经为控件添加了一些样式,但如果您实际上不想让它们出现,您可以只使用 visibility: hidden
。希望这可以帮助!如果您有任何问题,请告诉我。
关于javascript - SlideShow 悬停在左侧,向右移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32187663/
我使用这个 slider http://bxslider.com/examples/thumbnail-pager-1 。它有效,但我有很多元素,缩略图不适合一行并移至下一行。如何像轮播一样制作缩略图
我正在寻找一个 jQuery 幻灯片来在中心显示事件图像,并在事件图像的左侧和右侧显示下一个上一个图像。事件图像的宽度将是固定的,其他两个图像的宽度将不固定,它将根据浏览器宽度进行计算。 一个good
我正在为我的 slider 使用此插件 http://tympanus.net/codrops/2013/01/28/flipping-circle-slideshow/ 演示链接:http://ty
我有一个 JavaScript SlideShow,我想在图像更改时删除“闪光”效果,并添加淡入淡出效果。我找到了很多解决方案,但没有任何效果我不知道为什么 :-( ... 我把我的代码贴在这里: h
Jquery function Slider() { $(".sl
您可以通过运行以下命令在事件 html 设置中显示 Jupyter 笔记本: $ jupyter nbconvert untitled.ipynb --to slides --post serve 有
我正在尝试使用 jQuery 制作一个非常简单的幻灯片。我首先尝试使用 position:absolute 来让它工作,但这会干扰布局,所以我现在决定尝试使用 display: 来代替。 我目前有这个
我想加载 Jquery Cycle 幻灯片,加载后暂停,直到用户单击“播放”按钮。我是 Jquery 新手,所以你能给我详细的解释和可能的示例代码吗?你可以看到我的幻灯片@www.sessomspho
所以我有这个代码: $(document).ready(function(){ $("#slideshow > div:gt(0)").hide(); setInterval(funct
我已经实现了 Gallerific SlideShow,我遇到的问题是缩略图垂直显示在 2 列中。 http://www.davincispainting.com/InteriorGallery.as
你好,我添加了一个 JQuery SlideShow,其中包含 6 张 png 图片,每张图片大小为 548px X 320px 出于某种原因,有时当页面首次加载时,这些图像显得非常小。当我刷新页面时
这是下拉菜单和幻灯片的 HTML 代码:
我想在同一个页面放映两张幻灯片, 这是类似于我创建的东西的 fiddle : http://jsfiddle.net/55KBN/ 我可以运行第一个幻灯片放映但第二个不工作,当我单击第二个幻灯片放映控
我有一个问题这是我使用 javascript 的第一步,我正在尝试制作 Javascript 幻灯片。我尝试添加“滑入”“滑出”效果但我不知道该怎么做。我谷歌了大约2-3个小时,但仍然没有解决方案。请
我有一个幻灯片,当我将鼠标悬停在它上面时,它会向左移动。我想做的是,当我将鼠标放在左侧时,幻灯片会向左移动,但是当我将鼠标放在右侧时,幻灯片会向右移动。当我将鼠标放在中间时,它不会移动。不太清楚该怎么
我正在尝试创建一个无休止的图像幻灯片,其功能如下: 在窗口上滑动图像 到达最后一个图像时,将从图像的开头开始 这是我当前的代码: var direction = '-'; function doScr
看来Jquery Supersized目前只允许附加整个 body 的背景图片?是否可以使用 css 选择器来告诉他在哪里加载背景幻灯片? 我尝试过类似的方法 $('#custom-div').sup
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
我发现了这个名为 Skitter 的神奇 jQuery 幻灯片。这很棒!所以我在我最新的项目中实现了它。是否可以更改两个图像之间的时间间隔。我在他们的网站和 javascript 文件中到处搜索。在
我在 jquery 循环幻灯片放映中有一个透明的 png。在翻转时,它从图像 A 淡入到 B。在鼠标移出时,它返回到 A。但是,它不会在之后的任何翻转中重复这种淡入淡出。对此有什么想法吗?谢谢
我是一名优秀的程序员,十分优秀!