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

符号阅读：655 2021-04-01 10:19:31 评论：0

效果截图：

项目实例：

加载资源文件

	<!--加载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>

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。