左右切换带缩略图的js幻灯图片轮播代码
- 作者：网页模板
- 大小：0.259MB
- 点击次数：
- 发布时间：2014-03-20 13:13
特效介绍
左右切换带缩略图的js幻灯图片轮播代码。鼠标移动到大图上，会显示向左和向右的按钮。完美兼容IE6，可以无限增加轮播图片的数量。
使用方法
1、在head区引入<!--引入开始-->和<!--引入结束-->之间的代码。2、在body区引入下面的代码：
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<div class="text">加载图片说明……</div>
<div class="length">计算图片数量……</div>
<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<div class="bg"></div>
<!--js幻灯大图-->
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<!--js幻灯缩略图-->
<li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li> /
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
3、图片的链接地址和标题在js里面：{info: "都市魅力", href: 'http://www.5imoban.net/'},
{info: "古香古色", href: 'http://www.5imoban.net/'},
{info: "沉浸舞步的舞者", href: 'http://www.5imoban.net/'},
{info: "名贵跑车", href: 'http://www.5imoban.net/'},
{info: "聆听天籁的精灵", href: 'http://www.5imoban.net/'},
{info: "绚彩光芒", href: 'http://www.5imoban.net/'}
4、追加更多图片的方法也很简单，这里不赘述。- 本文标签：
- js幻灯图片,js图片轮播代码
