网页制作用JavaScript实现不同风格的图片切换效果

1.资源下载

    首先需要下载一个myFocus库（资源包），里面包含数种不同风格的实现效果。

   下载地址：http://download.csdn.net/detail/antaomen/9704831

2.引入myFocus库，找到存放的位置

myfocus-2.0.1.min.js存放在js文件夹中

    
    

     
     

      
          <script type="text/javascript" src="文件路径/myfocus-2.0.1.min.js"></script>
     
     
    
    

3.设置效果

在my-pattern中有各种效果的css，可以直接修改pattern属性值来更换效果

   
   

    
    

     
     <script type="text/javascript">
    
    
    
    

     
     myFocus.set({
    
    
    
    

     
         id:'banner',//焦点图div的id
    
    
    
    

     
         pattern:'mF_name',//风格应用的名称 
    
    
    
    

     
         time:3,//切换时间间隔(秒)
    
    
    
    

     
         trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    
    
    
    

     
         width:450,//设置图片区域宽度(像素)
    
    
    
    

     
         height:296,//设置图片区域高度(像素)
    
    
    
    

     
         txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
    
    
    
    

     
     });
    
    
    
    

     
     </script>
    
    
   
   

set方法中前两行即可修改效果，后面的可以省去。

4.设置div

注意要使用列表形式存放图片

    
    

     
     

      
      <div id="banner" style="visibility:hidden"><!--焦点图div-->
     
     
     
     

      
        <div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
     
     
     
     

      
        <ul class="pic"><!--内容列表-->
     
     
     
     

      
              <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
     
     
     
     

      
              <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
     
     
     
     

      
              <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
     
     
     
     

      
              <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
     
     
     
     

      
              <li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
     
     
     
     

      
        </ul>
     
     
     
     

      
      </div>
     
     
    
    

• thumb=图片的略缩图地址(需要风格支持，可以省略，如果省略即把大图地址作为它的地址)；
  
• alt=图片的描述文字；
  
• text=图片更详细的描述文字(需要风格支持，可以省略)
  

  myFocus属性的API文档

• id

  焦点图盒子ID[string(字符串)]，无默认值，必填项

• pattern

  风格应用名称[string(字符串)]，默认值：'mF_fscreen_tb'

• time

  切换时间间隔[num(数字，单位秒)]，默认值：4

• width

  图片区域宽度[num(数字，单位像素)]，无默认值，留空则从CSS样式获取大小

• height

  图片区域高度[num(数字，单位像素)]，无默认值，留空则从CSS样式获取大小

• txtHeight

  文字层高度['default'(默认高度)|0(隐藏)|num(数字，单位像素)]，默认值：'default'

• trigger

  触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)]，默认值：'click'

• wrap

  是否保留边框(有的话)[true|false]，默认值：true

• auto

  是否自动播放[true|false]，默认值：true

• index

  开始显示的图片序号(从0算起)[num(数字)]，默认值：0

• delay

  触发切换模式中'mouseover'模式下的切换延迟[num(数字,单位毫秒)]，默认值：100

• css

  是否需要程序定义CSS[true|false]，默认值：true

• waiting(1.2.0新增)

  Loading画面的最长等待时间(即从开始载入--图片加载完--开始播放之间的等待时限，如果超过这个时限，即使图片没加载完都一律播放)[true(一直等待，直到所有焦点图片全部加载完)|false(完全不等待，直接播放)|num(时限,单位秒)]，默认值：20

• path(1.2.0新增)

  风格应用文件的目录路径[string(字符串)]，默认值：'http://www.chhua.com/myfocus/js/pattern/'。注意此路径是指向风格文件父目录而不是某个风格文件，例如mF_slide3D这款风格文件在pattern文件夹目录下，那么path应该为'pattern/'。

• autoZoom(1.2.1新增)

  是否允许图片按比例缩小并居中以适应图片区域大小(注意：某些风格可能不支持)[true|false]，默认值：false。

  
  
  来源： http://www.chhua.com/myfocus/api.html