基于jQuery带标题的图片3D切换焦点图

时间:2022-07-07 21:45:54

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

实现的代码。

html代码:

<div id="wowslider-container">
<div class="ws_images">
<ul>
<li><a href="#">
<img src="data:images/data/images/slide1.png" alt="123" title="" /></a></li>
<li><a href="#">
<img src="data:images/data/images/slide2.png" alt="456" title="标题1234" /></a>标题1234</li>
<li><a href="#">
<img src="data:images/data/images/slide3.png" alt="789" title="标题1234" /></a>标题1234</li>
<li>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/_GOt0sMIZVY?autoplay=0&rel=0&enablejsapi=1&playerapiid=ytplayer&wmode=transparent"
frameborder="0" allowfullscreen></iframe>
<img src="data:images/data/images/slide5new.jpg" alt="012" title="" /></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#">
<img src="data:images/data/tooltips/slide1.png" alt="CSS3 Slider" /></a> <a href="#">
<img src="data:images/data/tooltips/slide2.png" alt="CSS Slideshow" /></a> <a href="#">
<img src="data:images/data/tooltips/slide3.png" alt="CSS Gallery" /></a>
<a href="#">
<img src="data:images/data/tooltips/slide5new.jpg" alt="Video Support" /></a>
</div>
</div>
</div>
<script type="text/javascript" src="data:images/engine/wowslider.js"></script>
<script type="text/javascript" src="data:images/engine/script.js"></script>