个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我设计了一个图像 slider 。此 slider 会自动很好地滑过图像。但我希望在单击下方 div(所谓的圆形按钮)中的特定列表项时也显示特定图像。
也就是说，即使 slider 显示队列中的第 5 个图像，如果我按下第 2 个列表项，应该显示该序列的第 2 个图像，并且在此 slider 之后应该再次正常继续。我再次单击返回 1，它应该显示第一个图像并且 slider 再次正常滚动。怎么做 ？
这是我的代码片段。
我哪里做错了？
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
text-decoration:none;
font-weight:bold;
width:32px;
height:32px;
position:absolute;
top:45%;
text-indent:-9999px;
display:block;
border:1px solid white;
}
.Next_Class
{
right: 282px;
background-image: url(Images/rightarrow.jpg);
}
.Prev_Class
{
left:282px;
background-image:url(Images/leftarrow.jpg);
}
ul.Round_Buttons
{
position:relative;
left:35%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:white;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border:1px solid #3610a5;
cursor:pointer;
box-shadow:1px -1px 3px 1px #3610a5;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#my_image_slider>#1").show("fade", 1000);
$("#my_image_slider>#1").delay(3500)
.hide("slide", { direction: 'left' }, 800);
var image_count = $("#my_image_slider > img").length; //total number of images
var count = 2;
setInterval(function () {
$(("#my_image_slider #") + count)
.show("slide", {direction: 'right'}, 1000);
$(("#my_image_slider #") + count).delay(3500)
.hide("slide", { direction: 'left' }, 800);
if (count == image_count) {
count = 1;
} else {
count = count + 1;
}
}, 5300);
$(".Round_Buttons li").click(function () {
var id_temp = this.id.charAt(0);
$("my_image_slider #id_temp").show("fade", 1000);
});
});
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
<a href="#" class="Next_Class">Next</a>
<a href="#" class="Prev_Class">Prev</a>
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1_Round_Buttons"><a href="#">1</a></li>
<li id="2_Round_Buttons"><a href="#">2</a></li>
<li id="3_Round_Buttons"><a href="#">3</a></li>
<li id="4_Round_Buttons"><a href="#">4</a></li>
<li id="5_Round_Buttons"><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
最佳答案
你不需要在圆形按钮上手动显示目标图像click
只需将您的 count 变量重置为该值，并让 setInterval 函数显示它。
$(".Round_Buttons li").click(function () {
count = this.id.charAt(0);
});
关于javascript - 如何在 jquery 中单击特定的 list_item 时显示特定的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23572915/
25
4
0
您好，我在使用此应用程序时遇到问题。 import java.util.ArrayList; import java.util.List; import android.app.Activity; i
我设计了一个图像 slider 。此 slider 会自动很好地滑过图像。但我希望在单击下方 div(所谓的圆形按钮)中的特定列表项时也显示特定图像。 也就是说，即使 slider 显示队列中的第 5
所以我试图简单地返回 '/opt/omeka/apps'/但尽管在先前的语句中返回了调试语句返回我正在寻找的内容，但我得到的响应是它不存在。 我假设这里有一个愚蠢的语法错误，只是在寻找更正。 var.
我有一个由项目符号列表组成的谷歌文档，例如 这个 是 一个 测试 我选择此列表并调用以下函数。 function TestFunction() { var BullList = Document
为什么我收到错误“无法解析 list_item” 我正在扩展父类(super class)，但无法访问 list_item。为什么我失踪了？这是 udacity 类(class)构建 miwok 应用
我是一名优秀的程序员,十分优秀！