我爱模板网 > 特效插件 > 滚动轮播 >  带缩略图的jquery图片轮播插件正文

带缩略图的jquery图片轮播插件

特效介绍
jquery图片轮播插件
jquery图片轮播插件

        基于superslider和jquery的带缩略图的八张图片轮播的jquery插件,大图上面包括图片的描述和播放按钮,比较适合视频图片网站和新闻网站。兼容IE6+。
使用方法
1、在头部引入相关的css和js文件:
<link href="template/anisee/css/style.css" rel="stylesheet" type="text/css" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="template/anisee/js/slider.js" type="text/javascript"></script>
<script src="template/anisee/js/common.js" type="text/javascript"></script>
2、在body引入html代码:
<div id="screen" class="wrap clear">
  <div class="bd">
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/conan.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">名侦探柯南</a></h2>
        <p>人称日本警察之救世主的高中生侦探工藤新一在与青梅竹马毛利兰去游乐园游玩时,不经意地发现行踪可疑的黑衣人。工藤新一于是尾随跟踪,并目睹了黑衣人正在进行可疑交易......</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/slam.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">灌篮高手</a></h2>
        <p>初中时已是篮球高手的流川枫,大病初愈的宫城良田,曾误入歧途的初中时MVP三井寿加入湘北篮球队,使赤木队长的称霸全国不再只是梦想......</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/chibi.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">樱桃小丸子</a></h2>
        <p>故事围绕着小丸子以及其家人和同学展开,有关于亲情、友谊等,或是一些生活小事,但当中有笑有泪,令人回想起童年的稚气......</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/shin.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">蜡笔小新</a></h2>
        <p>。作者臼井仪人从日常生活中的故事取材,叙述小新在日常生活中所发生的事情。小新是一个有点调皮的小孩,他喜欢别出心裁,富于幻想......</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/digimon.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">数码兽合体战争</a></h2>
        <p>故事的主线围绕少年们成为数码宝贝军的指挥官和敌对的数码宝贝军进行战斗而展开。即“数码宝贝军VS数码宝贝军!空前绝后的大战即将开始!</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/conan.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">名侦探柯南</a></h2>
        <p>人称日本警察之救世主的高中生侦探工藤新一在与青梅竹马毛利兰去游乐园游玩时,不经意地发现行踪可疑的黑衣人。工藤新一于是尾随跟踪,并目睹了黑衣人正在进行可疑交易......</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/slam.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">灌篮高手</a></h2>
        <p>初中时已是篮球高手的流川枫,大病初愈的宫城良田,曾误入歧途的初中时MVP三井寿加入湘北篮球队,使赤木队长的称霸全国不再只是梦想......</p>
      </div>
    </div>
    <div class="mt"><a href="http://www.5imoban.net" target="_blank" title="html网页模板"><img src="pic/slide/chibi.jpg" /></a>
      <div class="bg"></div>
      <div>
        <h2><a href="http://www.5imoban.net" onfocus="this.blur()">樱桃小丸子</a></h2>
        <p>故事围绕着小丸子以及其家人和同学展开,有关于亲情、友谊等,或是一些生活小事,但当中有笑有泪,令人回想起童年的稚气......</p>
      </div>
    </div>
  </div>
  <div class="hd">
    <ul>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/conan.jpg"><span class="txt">名侦探柯南</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/slam.jpg"><span class="txt">灌篮高手</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/chibi.jpg"><span class="txt">樱桃小丸子</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/shin.jpg"><span class="txt">蜡笔小新</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/digimon.jpg"><span class="txt">数码兽合体战争</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/conan.jpg"><span class="txt">名侦探柯南</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/slam.jpg"><span class="txt">灌篮高手</span><span class="bg"></span> <span class="mask"></span></a></li>
      <li><a href="http://www.5imoban.net" onfocus="this.blur()"> <img src="pic/slide/chibi.jpg"><span class="txt">樱桃小丸子</span><span class="bg"></span> <span class="mask"></span></a></li>
    </ul>
  </div>
</div>
3、调用插件:
<script>anisee.init.screens()</script>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:基于koala带时间轴的焦点图插件 下一篇:Revolution Slider强大的图片幻灯插件下载
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢