如何使旋转木马中的每个图像都可以点击并指向不同的URL

时间:2014-02-11 17:48:36

标签: javascript jquery carousel

我需要让旋转木马中的每个图像都可点击并指向单独的网址。我有什么建议可以实现吗?

我的HTML -

<ul id="flexiselDemo3">
            <li><img src="images/1.jpg" height='100' width='150' /><a href="http://"></a></li>
            <li><img src="images/2.jpg" height='100' width='150' /><a href="http://"></a></li>
            <li><img src="images/3.jpg" height='100' width='150' /><a href="http://"></a></li>
            <li><img src="images/4.jpg" height='100' width='150' /><a href="http://"></a></li>                                                 
        </ul> 

如何使每张图片都能点击?我不能这样适合锚标签。

3 个答案:

答案 0 :(得分:1)

用锚标记包裹你的图像

<ul id="flexiselDemo3">
    <li>
        <a href="http://somedomain.com">
            <img src="images/1.jpg" height='100' width='150' />
        </a>
    </li>
    <li>
        <a href="http://somedomain1.com">
            <img src="images/2.jpg" height='100' width='150' />
        </a>
    </li>
    <li>
        <a href="http://somedomain2.com">
            <img src="images/3.jpg" height='100' width='150' />
        </a>
    </li>
    <li>
        <a href="http://somedomai3.com">
            <img src="images/4.jpg" height='100' width='150' />
        </a>
    </li>
</ul>

答案 1 :(得分:1)

使用以下锚标记

包装您的图像
 <li>
    <a href="http://your link">
        <img src="images/1.jpg" height='100' width='150' />
    </a>
</li>

答案 2 :(得分:1)

<ul id="flexiselDemo3">
            <li><a href="http://"><img src="images/1.jpg" height='100' width='150' /></a></li>
            <li><a href="http://"><img src="images/2.jpg" height='100' width='150' /></a></li>
            <li><a href="http://"><img src="images/3.jpg" height='100' width='150' /></a></li>
            <li><a href="http://"><img src="images/4.jpg" height='100' width='150' /></a></li>                                                 
        </ul>