html5 用canvas实现图片自动滑动切换

转自：http://blog.csdn.net/iamke1987/article/details/9886707

图片自动滑动效果很多网站都要用，最近在学html5就拿这个练练手，发现用canvas实现起来其实很简单。代码比较粗糙，有很多改进的地方，不过还是先记录一下。

一. html文件

[html] view plain copy

<!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)">
<c*%%%ks>c*Q%%й%й%й%ИйИ%%%й%й%%M%Q%M