jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换
![jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换 jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换](https://i-blog.csdnimg.cn/blog_migrate/69ec76ed4c166e970cd63ba7b9231c42.jpeg)
XML/HTML Code
- <div id="content">
- <div class="border_box">
- <div class="box_skitter box_skitter_large">
- <ul>
- <li><a href="#cube"><img src="images/example/001.jpg" class="cube" /></a>
- <div class="label_text">
- <p>cube</p>
- </div>
- </li>
- <li><a href="#cubeRandom"><img src="images/example/002.jpg" class="cubeRandom" /></a>
- <div class="label_text">
- <p>cubeRandom</p>
- </div>
- </li>
- <li><a href="#block"><img src="images/example/003.jpg" class="block" /></a>
- <div class="label_text">
- <p>block</p>
- </div>
- </li>
- <li><a href="#cubeStop"><img src="images/example/004.jpg" class="cubeStop" /></a>
- <div class="label_text">
- <p>cubeStop</p>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
JavaScript Code
- <script type="text/javascript" language="javascript">
- $(document).ready(function() {
- $('.box_skitter_large').skitter({
- theme: 'clean',
- numbers_align: 'center',
- progressbar: true,
- dots: true,
- preview: true
- });
- });
- </script>