分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
转自:http://blog.csdn.net/iamke1987/article/details/9886707
图片自动滑动效果很多网站都要用,最近在学html5就拿这个练练手,发现用canvas实现起来其实很简单。代码比较粗糙,有很多改进的地方,不过还是先记录一下。
一. html文件
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title>HTML5 Images Slider</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="test.js"></script>
- <link href="style.css" rel="stylesheet" />
- </head>
- <body>
- <div id="container">
- <canvas id="imgs" width="500" height="300" onclick="canvasClick()"></canvas>
- </div>
- <div class="imgGallery">
- <span class="cover"><img src="1.jpg" id="img1" width="125" height="150" onclick="iconClick(this.id)"></span>
- <img src="2.jpg" id="img2" width="125" height="150" onclick="iconClick(this.id)">
- <img src="3.jpg" id="img3" width="125" height="150" onclick="iconClick(this.id)">
- <img src="4.jpg" id="img4" width="125" height="150" onclick="iconClick(this.id)">
- </div>
- </body>
- <footer>
- </footer>
- </html>
二. js文件,名字test.js