<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>手机端自适应图片切换js特效源码下载 </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">
</div>
</body>
</html>
488_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip
169 浏览量
2023-08-04
09:15:40
上传
评论
收藏 240KB ZIP 举报
488_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip （13个子文件） 
488 js 
jquery.movingboxes.js 18KB jquery-1.8.0.min.js 90KB
1.jpg 51KB css movingboxes.css 2KB demo.css 1KB
arrows.png 5KB
index.html 2KB images 2.jpg 37KB 6.jpg 5KB 1.jpg 32KB 5.jpg 31KB 3.jpg 28KB 4.jpg 29KB资源评论
