当前位置:编程学习 > JS >>

js实现幻灯片效果二

 使用jquery插件jquery.smallslider.js也能实现幻灯片效果。
 htm代码如下:
   
<div id="flashbox" class="smallslider">  
<ul style="position: absolute; top: 0px; width: 3225px;">  
  <li class="" style="float: left;"><a ><img title="" alt="400hPa" src=" /HT-400hPa-20.png" width="645"></a> </li>  
  <li class="" style="float: left;"><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png" width="645"></a> </li>  
  <li class="current-li" style="float: left;"><a ><img title="" alt="700hPa" src=" /HT-700hPa-20.png" width="645"></a> </li>  
  <li class="" style="float: left;"><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png" width="645"></a> </li>  
  <li class="" style="float: left;"><a ><img title="" alt="1000hPa" src=" /HT-1000hPa-20.png" width="645"></a>   
</li></ul>  
  
</div>  

 

js代码:
 
$(document).ready(function(){     
    $('#flashbox').smallslider({onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2});  
  
});  

 

 
 
使用到的脚本,样式jquery-1.7.2.min.js,jquery.smallslider.js,smallslider.css
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,