特效描述:利用jQuery实现自适应图片画廊插件,利用jQuery实现自适应图片画廊插件
代码结构
1. 引入JS
<script src="jquery.js" type="text/javascript"></script>
<script src="jmorph.js" type="text/javascript"></script>
2. HTML代码
<div id="container">
<h1><a href="#">jQuery morphing gallery</a></h1>
<a href="#">back to the article</a>
<div class="jmorph">
<div class="imageContainer">
<div class="image">
<div class="currentImg" style>
<div class="nextImg"></div>
</div>
</div>
</div>
<div class="clearfix">
<a href="#pvious" class="pvious">< Prev</a>
<div class="bandContainer">
<ul class="band">
<li><a href="1.jpg">Forest</a></li>
<li><a href="2.jpg">Cliff</a></li>
<li><a href="3.jpg">Sky</a></li>
<li><a href="4.jpg">Town</a></li>
<li><a href="5.jpg">Trees</a></li>
</ul>
</div>
<a href="#next" class="next">Next ></a>
</div>
</div>
</div>
<script>
$(".jmorph").jmorphGallery();
</script>
与本文相关的文章