jquery 仿Yahoo 切换式两格图片广告

每一个都会有 2-N 张图片内容，除了可透过左右钮来切换内容之外；右上角也会有小圆点来表示共有几对内容，点击小圆点也能立即的切换到该对图片上。这样的效果用来当商品展示或是广告展示都蛮有效果的。所以笔者这次又要教各位如果做一个"山寨版"的啰。

首先就是要准备一下 HTML 的框架：

<body>
 <div class="showBox">
 <h2 class="title">最新產品推薦</h2>
 <div class="roll"><a class="" href="#">0</a>
 <a class="" href="#">1</a>
 <a class="" href="#">2</a>
 <a class="on" href="#">3</a>
 </div>
 <div class="btn">
 <a href="#" class="prev">Prev</a>
 <a href="#" class="next">Next</a>
 </div>
 <ul class="itemList">
 <li>
 <a href="#" class="adContent">
 <img src="s.gif" <h3>Script - S</h3>
 </a>
 <a href="#" class="adContent">
 <img src="c.gif" <h3>Script - C</h3>
 </a>
 </li>
 <li>
 <a href="#" class="adContent">
 <img src="r.gif" <h3>Script - R</h3>
 </a>
 <a href="#" class="adContent">
 <img src="i.gif" <h3>Script - I</h3>
 </a>
 </li>
 <li>
 <a href="#" class="adContent">
 <img src="p.gif" <h3>Script - P</h3>
 </a>
 <a href="#" class="adContent">
 <img src="t.gif" <h3>Script - T</h3>
 </a>
 </li>
 <li>
 <a href="#" class="adContent">
 <img src="js.gif" <h3>JavaScript</h3>
 </a>
 <a href="#" class="adContent">
 <img src="jq.gif" <h3>jQuery</h3>
 </a>
 </li>
 </ul>
 <a href="#" class="more">More</a>
 </div>
 </body>

其中 div.roll 是用来放置小圆点的；而 ul.itemList 中的每一个 li 都是用来显示内容使用的，其中会再用 a 来切成左右各一块。接着用 CSS 来排版装饰一下：