脚本之家myFocus焦点图在Jimdo网站上的演示

      最近,有位 ruxintian 朋友在本站留言,询问脚本之家推出的 myfocus 焦点图能否用于Jimdo网站。按

演示地址(http://demo.jb51.net/js/myfocus/demo.html)看了一下,确实比本站以前介绍过的

介绍一种图片轮换特效代码》、《推荐一款Jimdo官方自定义模板中使用的Flash图片轮换代码》及《推荐一款Flash图片轮换代码的补充和扩展》等要丰富和漂亮的多。学习了它的教程,并经过试验,证明这种焦点图完全可以用于Jimdo网站。本文做个简单试验和介绍。

      所谓焦点图,其实就是一种图片轮换特效,通过图片来展示广告,同时附带文字说明及链接。这种形式在大大小小的网站上都有应用,确实在视觉上能为网站增色不少。下面先看下它的演示。

myFocus 焦点图演示:

      点击上面的“查看演示”按纽即能看到实际效果,再选择“风格选择”后的选项框,可以查看各种风格的图片轮换效果。不过,这个演示确实也就是一种演示,如何将它实际地用到我们自己的Jimdo网站上来呢?具体过程就不详细说明了,下面看看实际效果。

  • 图片1说明
  • 图片2说明
  • 图片3说明
  • 图片4说明
  • 图片5说明

      上面展示的是其中的一种风格,具体代码如下:

<script type="text/javascript" src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js">
</script>

<script type="text/javascript">
//<![CDATA[
//设置
myFocus.set({
        id:'myFocus',   //ID
        pattern:'mF_fscreen_tb'   //更换显示风格
});
//]]>
</script>
<div id="myFocus" style="width:560px; height:300px;">  <!--焦点图盒子-->
    <div class="pic">  <!--图片列表-->
        <ul>
            <li>
                <a href="demo.html#1"><img src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/img/1a.jpg" thumb="" alt="图片1说明" text="图片1更详细的描述文字" /></a>
            </li>
            <li>
                <a href="demo.html#2"><img src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/img/2a.jpg" thumb="" alt="图片2说明" text="图片2更详细的描述文字" /></a>
            </li>
            <li>
                <a href="demo.html#3"><img src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/img/3a.jpg" thumb="" alt="图片3说明" text="图片3更详细的描述文字" /></a>
            </li>
            <li>
                <a href="demo.html#4"><img src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/img/4a.jpg" thumb="" alt="图片4说明" text="图片4更详细的描述文字" /></a>
            </li>
            <li>
                <a href="demo.html#5"><img src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/img/5a.jpg" thumb="" alt="图片5说明" text="图片5更详细的描述文字" /></a>
            </li>
        </ul>
    </div>
</div>

      代码还是比较简单的,两段JS代码分别调用 myFocus 库文件(myfocus-2.0.0.min.js)和设置风格,通过更改 'mF_fscreen_tb' 中的名称,即可更换不同的显示风格。后面的列表部分,主要是设置图片的链接地址、图片地址及一些文字说明。这部分肯定要换成自己的东西。

      总的来说,这种焦点图还是很漂亮的,风格多,同时更改起来也很方便。不过,用于Jimdo网站的话,还是有一定的局限性,因为相关文件无法上传到Jimdo网站上,只能调用,如JS、CSS等,一旦原文件更改地址或被删除,就无法正常运行了。

      感兴趣的朋友可以去 http://demo.jb51.net/js/myfocus/demo.html 学习一下它的教程,也可以将整个演示文件下载到本地研究一下。

Write a comment

Comments: 4
  • #1

    ruxintian (Sunday, 28 July 2013 16:40)

    网上邻居您好,非常感谢您热心的指导!并专门写了一篇博客,我会好好研究,谢谢!

  • #2

    华哥娱乐 (Monday, 29 July 2013 05:26)

    Jimdo建站交流①群
    群 号:2236273

  • #3

    shengbaiting (Thursday, 01 August 2013 05:43)

    我已经用在自己的网站上了,很好用!谢谢!

  • #4

    UGG Boots Outlet (Monday, 03 October 2016 04:58)

    http://www.ultraboostuncaged.us/ Ultra Boost Uncaged
    http://www.outlettoms.us/ Toms Outlet
    http://www.cheap--jordanshoes.us.com/ Jordan Shoes
    http://www.rayban-outlets.com/ Ray Ban Outlet
    http://www.oakleyoutlet-store.us/ Oakley Outlet
    http://www.longchampoutletstore.org/ Longchamp Outlet Store
    http://www.yeezy.com.co/ Yeezy
    http://www.kedsshoesforwomen.com/ Keds Shoes For Women
    http://www.nikeoutlet.org.uk/ Nike UK
    http://www.jordan4.us/ Jordan 4
    http://www.nikehuarache.us/ Nike Huarache
    http://www.adidasnmd.us.com/ Adidas NMD Women
    http://www.nikeoutletfactorystore.com/ Nike Factory Outlet
    http://www.mlb-jerseys.us/ MLB Jerseys
    http://www.outletrayban.us/ Ray Ban Outlet
    http://www.jordan12.us/ Jordan 12
    http://www.ray-banoutlets.us/ Ray Bans Outlet
    http://www.yeezyboost350.us.com/ Adidas Yeezy
    http://www.ray-banoutlet.site/ Ray Ban Outlet Online
    http://www.ralphlaurenoutletstoreonline.org/ Ralph Lauren Outlet Online
    http://www.uggboots-outlets.com/ UGG Boots Outlet
    http://www.underarmouroutlet.us.com/ Under Armour Outlet
    http://www.yeezyboost350.us.com/ Yeezy Boost 350
    http://www.nikeoutletsstore.com/ Nike Outlet Store
    http://www.longchampbags.us.com/ Longchamp Bags
    http://www.nikerosherun.us.com/ Roshe Run
    http://www.nikeairmax.us/ Air Max
    http://www.airmax2016.us.com/ Air Max 2016
    http://www.yeezy-shoes.us.com/ Yeezy
    http://www.nfljerseys.us/ NFL Jersey
    http://www.poloralphlaurenoutlets.us.com/ Polo Ralph Lauren Outlet
    http://www.adidas-uk.org.uk/ Adidas UK
    http://www.timberlanduk.org.uk/ Timberland UK
    http://www.ralphlaurens.org.uk/ Ralph Lauren
    http://www.yeezyboost-350.org.uk/ Yeezy Boost 350
    http://www.nikeoutlet.org.uk/ Nike Outlet
    http://www.yeezyboost-350.in.net/ Yeezy Boost 350
    http://www.rayban-sunglasses.ca/ Ray Ban Sunglasses