焦点图轮播图代码 jQuery过渡滑动幻灯片代码

特效描述：利用jQuery实现 过渡滑动 幻灯片，利用jQuery实现过渡滑动幻灯片

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery.min.js"></script>

<script src="js/slider.jquery.pack.js"></script>

3. HTML代码

<div id="wrapper">
<h1>jQuery过渡滑动幻灯片</h1>
<div id="slider">
<img src="images/1.jpg" alt="Eggs" title="Lorem Ipsum Dolor" />
<img src="images/2.jpg" alt="Calendar" title="Sit Amet Consecutar" />
<img src="images/3.jpg" alt="Shaking Hands" title="Adipiscing Elit" />
</div>
<!-- jQuery -->
<!-- Lateral Slider -->
<!-- Lateral Slider -->
<script>
/* <![CDATA[ */
// lateral slider
$( '#slider' ).lateralSlider( {
captionPadding: '0',
captionHeight: 45
} );
/* ]]> */
</script>
<div style="text-align:center;clear:both">
</div>

演示地址下载地址