(Jquery功能篇)jquery的smallsluder控件(图片轮换)

来源：互联网发布：oracle数据库收费吗编辑：程序博客网时间：2024/05/24 05:09

效果截图：

项目实例：

加载资源文件

<!--加载jquery核心文件  --><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript" src="js/jquery.smallslider.js"></script><!--加载css文件  --><link href="css/smallslider.css" rel="stylesheet" type="text/css" />

编写相关js代码

<script type="text/javascript">$(document).ready(function () {   $('#flashbox').smallslider({        //图片切换特效         switchEffect: 'ease',        //图片的切换方式         switchEase: 'easeOutBounce',        //图片的切换方向         switchPath: 'left',        //标题栏 文本位置         textPosition: 'top',        //标题显示位置         textAlign: 'center',        //图片和标题是否 一起滚动         textSwitch: 2,        //是否显示标题        showText:false            });       });</script>

源代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>订单信息分页</title><!--加载jquery核心文件  --><script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript" src="js/jquery.smallslider.js"></script><!--加载css文件  --><link href="css/smallslider.css" rel="stylesheet" type="text/css" /><script type="text/javascript">$(document).ready(function () {   $('#flashbox').smallslider({        //图片切换特效         switchEffect: 'ease',        //图片的切换方式         switchEase: 'easeOutBounce',        //图片的切换方向         switchPath: 'left',        //标题栏 文本位置         textPosition: 'top',        //标题显示位置         textAlign: 'center',        //图片和标题是否 一起滚动         textSwitch: 2,        //是否显示标题        showText:false            });       });</script>  </head>    <body>     <h2>图片的轮换效果：</h2>    <div class="expo">      <div id="flashbox" class="smallslider">        <ul>          <li><a href="css/img/b1.jpg"><img src="css/img/b1.jpg" width="320" height="200" alt="图片标题1" /></a></li>          <li><a href="css/img/2_b.jpg"><img src="css/img/2_b.jpg" width="320" height="200" alt="图片标题2" /></a></li>          <li><a href="css/img/3_b.jpg"><img src="css/img/3_b.jpg" width="320" height="200" alt="图片标题3" /></a></li>          <li><a href="css/img/4_b.jpg"><img src="css/img/4_b.jpg" width="320" height="200" alt="图片标题4" /></a></li>                 </ul>      </div>    </div>           </body></html>