<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery自适应图片切换 - 网页模板</title>
<link href="css/movingboxes.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.movingboxes.js"></script>
<style>
/* Dimensions set via css in MovingBoxes version 2.2.2+ */
#slider { width: 500px; }
#slider li { width: 250px; }
</style>
<script>
$(function(){
$('#slider').movingBoxes({
/* width and panelWidth options deprecated, but still work to keep the plugin backwards compatible
width: 500,
panelWidth: 0.5,
*/
startPanel : 1, // start with this panel
wrap : false, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
buildNav : true, // if true, navigation links will be added
navFormatter : function(){ return "●"; } // function which returns the navigation text for each panel
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1 class="demo-title"></h1>
<!-- MovingBoxes Slider -->
<ul id="slider">
<li>
<img src="images//1.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... more</p>
</li>
<li>
<img src="images//2.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... more and a whole lot more text
goes here, so we can see the height adjust.</p>
</li>
<li>
<img src="images//3.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... more</p>
</li>
<li>
<img src="images//4.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... more</p>
</li>
<li>
<img src="images//5.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... more</p>
</li>
<li>
<img src="images//6.jpg" alt="picture">
<h2>News Heading</h2>
<p>Add a short exerpt here... more</p>
</li>
</ul><!-- end Slider #1 -->
</div><!-- end wrapper -->
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQ自适应框架图片切换.zip
版权申诉
153 浏览量
2022-11-24
12:31:02
上传
评论
收藏 252KB ZIP 举报
jQ自适应框架图片切换.zip （13个子文件） 
jQ自适应框架图片切换 
jQ自适应框架图片切换.jpg 50KB jiaoben1052 css 
movingboxes.css 2KB
arrows.png 5KB demo.css 1KB images 2.jpg 37KB 1.jpg 32KB 6.jpg 5KB 3.jpg 28KB 5.jpg 31KB 4.jpg 29KB
index.html 2KB js jquery.movingboxes.js 18KB jquery-1.8.0.min.js 90KB资源评论
