特效描述：利用jquery实现 幻灯片 展示效果，利用jquery实现幻灯片展示效果
代码结构
1. 引入CSS
<link rel=”stylesheet” href=”css/layout.css” type=”text/css” media=”screen” charset=”utf-8″ />
<link rel=”stylesheet” href=”css/jd.gallery.css” type=”text/css” media=”screen” charset=”utf-8″ />
2. 引入JS
<script src=”scripts/mootools-1.2.1-core-yc.js” type=”text/javascript”></script>
<script src=”scripts/mootools-1.2-more.js” type=”text/javascript”></script>
<script src=”scripts/jd.gallery.js” type=”text/javascript”></script>
3. HTML代码
<h1>
<span class=”company”>cxvn.com</span>
</h1>
<script type=”text/javascript”>
function startGallery() {
var myGallery = new gallery($(‘myGallery’), {
timed: true
});
}
window.addEvent(‘domready’,startGallery);
</script>
<div class=”content”>
<div id=”myGallery”>
<div class=”imageElement”>
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/1.jpg” class=”full” />
<img src=”images/brugges2006/1-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/2.jpg” class=”full” />
<img src=”images/brugges2006/2-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/3.jpg” class=”full” />
<img src=”images/brugges2006/3-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/4.jpg” class=”full” />
<img src=”images/brugges2006/4-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/5.jpg” class=”full” />
<img src=”images/brugges2006/5-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/6.jpg” class=”full” />
<img src=”images/brugges2006/6-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/7.jpg” class=”full” />
<img src=”images/brugges2006/7-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 8 Title</h3>
<p>Item 8 Description</p>
<a href=”#” title=”open image” class=”open”></a>
<img src=”images/brugges2006/8.jpg” class=”full” />
<img src=”images/brugges2006/8-mini.jpg” class=”thumbnail” />
</div>
</div>
</div>
<div style=”text-align:center;clear:both”>
</div>
下载地址
1.《利用jquery实现幻灯片展示效果》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《利用jquery实现幻灯片展示效果》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/code/focus/409.html