特效描述:利用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>
与本文相关的文章