退出登录 收藏
 王林漫谈  www.wanglinmantan.cc

WLFocus

一个没有什么卵用的焦点图插件

Version 1.0  2016-04-02

 Demo

 Explain

 第一步:引入压缩包解压后文件夹中的jquery-2.1.1.min.js文件,js.js文件,styel.css文件。

 第二步:复制张贴以下内容到你需要的地方。建议在外再加一个div包裹层,以定位到你需要的地方。注意提示部分.

  <div id="container">
      <div id="list">
        <a href="#"><img src="images/b4.jpg" /></a> <!--请注意这一张图片要和你打算的最后一张图片一样--->
        <a href="#"><img src="images/b0.jpg" /></a>
        <a href="#"><img src="images/b1.jpg" /></a>
        <a href="#"><img src="images/b2.jpg" /></a>
        <a href="#"><img src="images/b3.jpg" /></a>
        <a href="#"><img src="images/b4.jpg" /></a>
        <a href="#"><img src="images/b0.jpg" /></a> <!--请注意这一张图片要和你打算的第一张图片一样--->
      </div>
        <div id="buttons">
          <span class="on"></span>
          <span></span>
          <span></span>
          <span></span>
  <span></span> <!--请注意这里的span标签数量要和你的实际显示的幻灯片数量一致,这里是5个,对应上面1--5张图片--->
        </div>
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
  </div>

 第三步:复制张贴以下调用代码。
         window.onload=function(){ focus_picture(5,1000,400,4000,500,1); }
  参数可更改,第1个参数代表实际显示的幻灯片数量,这里是5个。
              第2个参数代表图片宽度,也就是焦点图宽度。
              第3个参数代表图片高度,也就是焦点图高度。
              第4个参数代表自动切换时间。
              第5个参数代表切换速度。
              第6个参数若为1,则代表切换方向从右到左(大部分都是如此);
                              若为0,则代表切换方向从左到右;
  其他补充:若不需要边框可到以下代码中把边框去掉。
            若想修改小圆点的样式可到css文件中修改。
            总之,可随意修改。
   因本人为初学者,水平不高,以前从未写过插件,所以第一次写难免不规范,功能也比较简单,bug是难免的,适合要求不高者使用,当然您可以修改完善,那是极好的。