• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  左右切换带缩略图的正文

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

作者:网页模板
大小:0.259MB
点击次数:
发布时间:2014-03-20 13:13
分享到:

特效介绍

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、追加更多图片的方法也很简单,这里不赘述。
  • 本文标签:
  • js幻灯图片,js图片轮播代码
仿多玩首页flash焦点图轮播特效
纯js仿苹果官网app动态展示效果代码