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

HTML5 2020-08-15

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

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

一. html文件

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. head     Meta charset="utf-8"/>  
  4.     title>HTML5 Images Slider</script src="http://code.jquery.com/jquery-1.10.1.min.js">scriptscript src="test.js"link href="style.css" rel="stylesheet" bodydiv id="container"canvas id="imgs" width="500" height="300" onclick="canvasClick()"canvasdivdiv class="imggallery"span class="cover"img src="1.jpg" id="img1" width="125" height="150" onclick="iconClick(this.id)"spanimg 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)"footerhtml>  

二. js文件，名字test.js

[javascript]  copy
    var images = new Array();  
  1. var cIndex = 0;  
  2. var speed = 5;  
  3. var context;  
  4. var canvas;  
  5. var currentimage;  
  6. var width=300;  
  7. var height=300;  
  8. var stopX = 95;  
  9. var stopY = 0;  
  10. var autoTimeout;  
  11. var manuTimeout;  
  12. var interval;  
  13. var img1;  
  14. var img2;  
  15. var img3;  
  16. var img4;  
  17. var timeoutInterval = 5;  
  18.   
  19. function slideImage(id,x,y,imgObj){  
  20.     this.speed = speed;  
  21.     this.preImage = null;  
  22. this.nextimage = null;  
  23. this.imgObj=imgObj;  
  24. this.x=x;  
  25. this.y=y;  
  26. this.direction="right";  
  27. this.id = id;  
  28. }  
  29.   
  30. function buttonNext(x,bwidth,bheight){  
  31. this.x = x;  
  32. this.y = y;  
  33. this.width = bwidth;  
  34. this.height = bheight;  
  35. }  
  36. $(document).ready(  
  37. function(){  
  38.         Initimages();  
  39.         canvas = document.getElementById("imgs");  
  40.         context = canvas.getContext("2d");  
  41.         //移动图片  
  42.         context.drawImage(currentimage.imgObj,currentimage.x,currentimage.y,width,height);  
  43.         context.drawImage(currentimage.preImage.imgObj,currentimage.preImage.x,currentimage.preImage.y,height);  
  44.         context.drawImage(currentimage.nextimage.imgObj,currentimage.nextimage.x,currentimage.nextimage.y,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">         context.fillStyle="rgba(100,150,185,0.5)";  
  45.         context.fillRect(0,100,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">         context.fillRect(400,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">         interval = setTimeout("intervalSlide()", 20);  
  46.     }  
  47. );  
  48. function drawFrame(){  
  49.     context.clearRect(0,canvas.width,canvas.height);  
  50.     //调用beginPath()确保不会接着上次绘制的图形绘制  
  51.     context.beginPath();  
  52.     context.drawImage(currentimage.imgObj,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">     context.drawImage(currentimage.preImage.imgObj,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">     context.drawImage(currentimage.nextimage.imgObj,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">     context.drawImage(currentimage.preImage.preImage.imgObj,currentimage.preImage.preImage.x,currentimage.preImage.preImage.y,0); background-color:inherit">//遮罩  
  53.     context.fillStyle="rgba(100,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">     context.fillRect(0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important">     context.fillRect(400,0); background-color:inherit">//每一帧的位置变动  
  54.     currentimage.x -= speed;  
  55.     currentimage.preImage.x -= speed;  
  56.     currentimage.nextimage.x -= speed;  
  57.     currentimage.preImage.preImage.x -= speed;  
  58.       
  59. if(currentimage.x == 200){  
  60.         currentimage.nextimage.x = 500;  
  61.     }  
  62.     //到达指定位置停止变动  
  63. if(currentimage.x != stopX){  
  64.         autoTimeout = setTimeout("drawFrame()",timeoutInterval);  
  65. else{  
  66.           
  67. function Initimages(){  
  68.     img1 = new slideImage("img1",-200,document.getElementById("img1"));  
  69.     img2 = new slideImage("img2",document.getElementById("img2"));  
  70.     img3 = new slideImage("img3",400,document.getElementById("img3"));  
  71.     img4 = new slideImage("img4",700,document.getElementById("img4"));  
  72.     img1.preImage = img4;  
  73.     img1.nextimage = img2;  
  74.     img2.preImage= img1;  
  75.     img2.nextimage= img3;  
  76.     img3.preImage=img2;  
  77.     img3.nextimage=img4;  
  78.     img4.preImage = img3;  
  79.     img4.nextimage = img1;  
  80.     currentimage=img2;  
  81.     hilightSelectedImg();  
  82. function canvasClick(){  
  83.     currentimage = currentimage.nextimage;  
  84.     manuTimeout = setTimeout("drawFrame()",153); background-color:inherit; font-weight:bold">function intervalSlide(){  
  85.     currentimage = currentimage.nextimage;  
  86.     autoTimeout = setTimeout("drawFrame()", timeoutInterval);  
  87.     setTimeout("intervalSlide()", 5000)  
  88. function iconClick(obj){  
  89. if(obj == "img1"){  
  90.         currentimage = img1;  
  91. else if(obj == "img2"){  
  92.         currentimage = img2;  
  93. if(obj == "img3"){  
  94.         currentimage = img3;  
  95. if(obj == "img4"){  
  96.         currentimage = img4;  
  97.     currentimage.preImage.x = 100;  
  98.     currentimage.preImage.preImage.x = -200;  
  99.     currentimage.x = 400;  
  100.     hilightSelectedImg();  
  101.     manuTimeout = setTimeout("drawFrame()",timeoutInterval);  
  102. function hilightSelectedImg(){  
  103.     img1.imgObj.width = 125;  
  104.     img1.imgObj.height = 150;  
  105.     img1.imgObj.style.opacity = 0.5;  
  106.     img2.imgObj.width = 125;  
  107.     img2.imgObj.height = 150;  
  108.     img2.imgObj.style.opacity = 0.5;  
  109.     img3.imgObj.width = 125;  
  110.     img3.imgObj.height = 150;  
  111.     img3.imgObj.style.opacity = 0.5;  
  112.     img4.imgObj.width = 125;  
  113.     img4.imgObj.height = 150;  
  114.     img4.imgObj.style.opacity = 0.5  
  115.     currentimage.imgObj.width = 150;  
  116.     currentimage.imgObj.height = 175;  
  117.     currentimage.imgObj.style.opacity = 1;  
  118. }  

三. css文件。style.css

[css]  copy
    canvas {  
  1. border:1px dashed black;  
  2. .imggallery{  
  3. width:550px;  
  4. position:absolute;  
  5. height:170px  
  6. img{  
  7.     opacity:0.5;  
  8. }  

相关文章

HTML5和CSS3实现3D展示商品信息的代码
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
关于HTML5和CSS3实现机器猫的代码