我创建了一个图像滑块。我希望我的图像可以点击

时间:2015-08-06 04:31:57

标签: javascript angularjs html5 ionic-framework

当我在图像上添加事件时,它似乎被某些东西阻挡了,所以我的功能没有运行。

这是我的滑块:

<ion-slide-box slide-interval="4000" auto-play="false" does-continue="true" show-pager="true">
    <ion-slide>
        <div class="stack-con">
            <div class="layer1">
                <p class="text-center animation-fadeIn">
                    <img style="width: 28%;"src="images/terminus_63_img2.jpg" ng-click="warranty.byy();"/>
                    <img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');">
                    <img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');">
                </p>
            </div>
            <div class="layer2">
                <div class="text-center animation-slideDown hidden-x text-shadow" style="padding-top: 15px; font-size: 15px; color: white;"></div>
            </div>
        </div>
    </ion-slide>
</ion-slide-box>

有什么建议吗?每次单击em时我都需要图像来运行该功能。提前致谢。

2 个答案:

答案 0 :(得分:0)

你试过用你的东西包裹你的img吗?就像<a>

一样

答案 1 :(得分:0)

这是您的代码运行示例 DEMO Click here

你错过了关闭前两个图像标签

<ion-slide-box slide-interval="4000" auto-play="false" does-continue="true" show-pager="true">
    <ion-slide>
        <div class="stack-con">
            <div class="layer1">
                <p class="text-center animation-fadeIn">
                    <a><img style="width: 28%;"src="images/terminus_63_img2.jpg" ng-click="warranty.byy();"/></a>
                        <a><img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');"/></a>
                        <a><img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');"/></a>
                </p>
            </div>
            <div class="layer2">
                <div class="text-center animation-slideDown hidden-x text-shadow" style="padding-top: 15px; font-size: 15px; color: white;"></div>
            </div>
        </div>
    </ion-slide>
</ion-slide-box>