- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>javascript images slider</title>
- <!-- 引入 CSS 文件 -->
- <link rel="stylesheet" href="css/style.css" />
- <!-- 引入 jQuery -->
- <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js%22%3E%3C/script%3E ;
- <!-- 引入 JavaScript 文件 -->
- <script src="js/slider.js"></script>
- </head>
- <body>
- <!-- 图片轮播 div -->
- <div class="imageSlider">
- <!-- 图片列表 -->
- <div class="imageBox">
- <a href="http://www.shiyanlou.com" http://www.shiyanlou.com%22/ ; target="_blank"><img src="images/1.jpg" /></a>
- <a href="http://www.shiyanlou.com" http://www.shiyanlou.com%22/ ; target="_blank"><img src="images/2.jpg" /></a>
- <a href="http://www.shiyanlou.com" http://www.shiyanlou.com%22/ ; target="_blank"><img src="images/3.jpg" /></a>
- <a href="http://www.shiyanlou.com" http://www.shiyanlou.com%22/ ; target="_blank"><img src="images/4.jpg" /></a>
- </div>
- <!-- 图片标题 -->
- <div class="titleBox">
- <p class="active"><span>image 1</span></p>
- <p>image 2</p>
- <p>image 3</p>
- <p>image 4</p>
- </div>
- <!-- 图片编号, 显示为右下方小圆点 -->
- <div class="icoBox">
- <span class="active" rel="1">1</span>
- <span rel="2">2</span>
- <span rel="3">3</span>
- <span rel="4">4</span>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16141/35287d81e93c26518516a2b2ad7e9824.html