CSS+jQuery实现滑动幻灯片实例详解

天梯梦

HTML部分代码

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.
 
<div class="main_view">    <div class="window">        <div class="image_reel">            <a href="#"><img src="reel_1.jpg" alt="" /></a>            <a href="#"><img src="reel_2.jpg" alt="" /></a>            <a href="#"><img src="reel_3.jpg" alt="" /></a>            <a href="#"><img src="reel_4.jpg" alt="" /></a>        </div>    </div>    <div class="paging">        <a href="#" rel="1">1</a>        <a href="#" rel="2">2</a>        <a href="#" rel="3">3</a>        <a href="#" rel="4">4</a>    </div></div> <div style="width: 585px;" class="wp-caption aligncenter"> 
css+jQuery实现滑动幻灯片实例教程