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

最新推荐文章于 2024-07-29 11:15:00 发布

这个云彩好看

最新推荐文章于 2024-07-29 11:15:00 发布

阅读量7.9k

点赞数 1

本文链接：https://blog.csdn.net/gfuugff/article/details/83887674

版权

本文介绍如何使用HTML5的canvas元素实现图片自动滑动切换的效果。通过示例代码展示了从html文件到js文件的实现过程，包括图片初始化、绘制、位置更新等关键步骤，提供了一个简单的图片轮播组件。

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

转自：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)">
<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>