首页 > 特效插件 > 滚动轮播 >  左右切换带缩略图的js幻灯图片轮播代码正文

左右切换带缩略图的js幻灯图片轮播代码

特效介绍
js幻灯图片轮播代码
左右切换带缩略图的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、追加更多图片的方法也很简单,这里不赘述。