【问题标题】:click on slider image to do a function in javascript单击滑块图像以在 javascript 中执行功能
【发布时间】:2015-02-21 17:44:56
【问题描述】:

我正在使用 wowslider 进行幻灯片放映。我想在单击特定图像时执行一个功能。

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>


</head>
<body style="background-color:transparent;margin:auto">


<div id="wowslider-container1">
<div class="ws_images"><ul>
    <li><img src="data1/images/1.jpg" alt="1" title="1" id="wows1_0"/></li>

    <li><img src="data1/images/2.jpg" alt="2" title="2" id="wows1_2" ondblclick="show()" /></li>
    <li><img src="data1/images/3.jpg" alt="3" title="3" id="wows1_3"/></li>
    <li><img src="data1/images/4.jpg" alt="4" title="4" id="wows1_4"/></li>
    <li><img src="data1/images/5.jpg" alt="5" title="5" id="wows1_5"/></li>
    <li><img src="data1/images/6.jpg" alt="6" title="6" id="wows1_6"/></li>
    <li><img src="data1/images/7.jpg" alt="7" title="7" id="wows1_7"/></li>

</ul></div>
<div class="ws_thumbs">
</div>
<div class="ws_shadow"></div>
</div>  
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>


<script type="text/javascript">

function show() {
    window.alert("checked");
}

</script>

</body>
</html>

这是我的代码。我通过在图像上添加 doube click 属性进行了尝试。但它不起作用。建议高度赞赏。在此先感谢:)

【问题讨论】:

  • 你能不能为你的代码分享 jsfiddle。
  • 对不起,我对这个环境完全陌生。这意味着什么 ? jsfiddle ?
  • 您是否尝试在单击&lt;li&gt; 时调用该函数?在您的情况下应该与单击图像相同吗?
  • @kishore 和 jsfiddle.net 你可以分享你的代码。

标签: javascript html wowslider


【解决方案1】:

使用 jQuery 为您的图像 ID:

$('#wows1_2').click(show); // show is your function

或:

$('#wows1_2').click(function(){ //do something here });

【讨论】:

  • 在哪里添加这一行? @克里斯
  • 将它添加到 html 文件中的任何位置,这样做以确保 html 已加载: $( document ).ready(function() { $('#wows1_2').click(显示);});
猜你喜欢
  • 2016-02-09
  • 1970-01-01
  • 1970-01-01
  • 2012-09-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-03
  • 1970-01-01
相关资源
最近更新 更多