宽高随着图片尺寸改变的幻灯片_滚动轮播_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

宽高随着图片尺寸改变的幻灯片

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-06-22 17:39:36 去下载去预览

特效介绍

宽高随着图片尺寸改变的幻灯片，当图片尺寸过长或过高，幻灯片会整体延伸以适应图片。本jQuery幻灯片带图片标题和描述，非常适合文章图集使用，而非网站首页使用，否则可能造成布局的变动，而放在文章页，则可以显示图片的整个大小。完美兼容IE6+。

使用方法

1、在head引入下面的代码：

1<link href="css/movingboxes.css" rel="stylesheet">
2<!--[if lt IE 9]>
3<link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
4<![endif]-->
5<link href="css/5imoban.net.css" rel="stylesheet">
6<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
7<script src="js/jquery.movingboxes.js"></script>

2、在body引入下面的代码：

01<div id="wrapper">
02    <!-- MovingBoxes Slider -->
03    <ul id="slider">
04 
05        <li>
06            <img src="images/1.jpg" alt="picture">
07            <h2>幻灯图片标题</h2>
08            <p>在这里添加简单的描述... <a href="http://www.5imoban.net">更多&gt;&gt;</a></p>
09        </li>
10 
11        <li>
12            <img src="images/2.jpg" alt="picture">
13            <h2>幻灯图片标题</h2>
14            <p>在这里添加简单的描述... <a href="http://www.5imoban.net">更多&gt;&gt;</a> and a whole lot more text goes here, so we can see the height adjust.</p>
15        </li>
16 
17        <li>
18            <img src="images/3.jpg" alt="picture">
19            <h2>幻灯图片标题</h2>
20            <p>在这里添加简单的描述... <a href="http://www.5imoban.net">更多&gt;&gt;</a></p>
21        </li>
22 
23        <li>
24            <img src="images/4.jpg" alt="picture">
25            <h2>幻灯图片标题</h2>
26            <p>在这里添加简单的描述... <a href="http://www.5imoban.net">更多&gt;&gt;</a></p>
27        </li>
28 
29        <li>
30            <img src="images/5.jpg" alt="picture">
31            <h2>幻灯图片标题</h2>
32            <p>在这里添加简单的描述... <a href="http://www.5imoban.net">更多&gt;&gt;</a></p>
33        </li>
34 
35        <li>
36            <img src="images/6.jpg" alt="picture">
37            <h2>幻灯图片标题</h2>
38            <p>在这里添加简单的描述... <a href="http://www.5imoban.net">更多&gt;&gt;</a></p>
39        </li>
40 
41    </ul><!-- end Slider #1 -->
42 
43</div><!-- end wrapper -->
44<script>
45$(function(){
46 
47    $('#slider').movingBoxes({
48        startPanel   : 1,      // start with this panel
49        wrap         : false,  // if true, the panel will infinitely loop
50        buildNav     : true,   // if true, navigation links will be added
51        navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
52    });
53 
54});
55</script>