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

最新推荐文章于 2024-04-12 10:30:40 发布

gf771115

最新推荐文章于 2024-04-12 10:30:40 发布

阅读量2.9w

点赞数 3

分类专栏： HTML5

HTML5 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

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

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

一. html文件

[html]view plaincopy 
   
 <!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

[javascript]view plaincopy 
   
 var images = new Array();  
 var cIndex = 0;  
 var speed = 5;  
 var context;  
 var canvas;  
 var currentImage;  
 var width=300;  
 var height=300;  
 var stopX = 95;  
 var stopY = 0;  
 var autoTimeout;  
 var manuTimeout;  
 var interval;  
 var img1;  
 var img2;  
 var img3;  
 var img4;  
 var timeoutInterval = 5;  
   
 function slideImage(id,x,y,imgObj){  
     this.speed = speed;  
     this.preImage = null;  
     this.nextImage = null;  
     this.imgObj=imgObj;  
     this.x=x;  
     this.y=y;  
     this.direction="right";  
     this.id = id;  
 }  
   
 function buttonNext(x,y,bwidth,bheight){  
     this.x = x;  
     this.y = y;  
     this.width = bwidth;  
     this.height = bheight;  
 }  
   
 $(document).ready(  
     function(){  
         InitImages();  
         canvas = document.getElementById("imgs");  
         context = canvas.getContext("2d");  
         //移动图片  
         context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);  
         context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);  
         context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);  
         context.fillStyle="rgba(100,150,185,0.5)";  
         context.fillRect(0,0,100,height);  
         context.fillRect(400,0,100,height);  
         interval = setTimeout("intervalSlide()", 20);  
     }  
 );  
   
 function drawFrame(){  
     context.clearRect(0,0,canvas.width,canvas.height);  
     //调用beginPath()确保不会接着上次绘制的图形绘制  
     context.beginPath();  
     context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);  
     context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);  
     context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);  
     context.drawImage(currentImage.preImage.preImage.imgObj,currentImage.preImage.preImage.x,currentImage.preImage.preImage.y,width,height);  
     //遮罩  
     context.fillStyle="rgba(100,150,185,0.5)";  
     context.fillRect(0,0,100,height);  
     context.fillRect(400,0,100,height);  
     //每一帧的位置变动  
     currentImage.x -= speed;  
     currentImage.preImage.x -= speed;  
     currentImage.nextImage.x -= speed;  
     currentImage.preImage.preImage.x -= speed;  
       
     if(currentImage.x == 200){  
         currentImage.nextImage.x = 500;  
     }  
     //到达指定位置停止变动  
     if(currentImage.x != stopX){  
         autoTimeout = setTimeout("drawFrame()",timeoutInterval);  
     }  
     else{  
           
     }  
 }  
   
 function InitImages(){  
     img1 = new slideImage("img1",-200,0,document.getElementById("img1"));  
     img2 = new slideImage("img2",100,0,document.getElementById("img2"));  
     img3 = new slideImage("img3",400,0,document.getElementById("img3"));  
     img4 = new slideImage("img4",700,0,document.getElementById("img4"));  
     img1.preImage = img4;  
     img1.nextImage = img2;  
     img2.preImage= img1;  
     img2.nextImage= img3;  
     img3.preImage=img2;  
     img3.nextImage=img4;  
     img4.preImage = img3;  
     img4.nextImage = img1;  
     currentImage=img2;  
     hilightSelectedImg();  
 }  
   
 function canvasClick(){  
     currentImage = currentImage.nextImage;  
     manuTimeout = setTimeout("drawFrame()",timeoutInterval);  
 }  
   
 function intervalSlide(){  
     currentImage = currentImage.nextImage;  
     hilightSelectedImg();  
     autoTimeout = setTimeout("drawFrame()", timeoutInterval);  
     setTimeout("intervalSlide()", 5000)  
 }  
   
 function iconClick(obj){  
     if(obj == "img1"){  
         currentImage = img1;  
     }  
     else if(obj == "img2"){  
         currentImage = img2;  
     }  
     else if(obj == "img3"){  
         currentImage = img3;  
     }  
     else if(obj == "img4"){  
         currentImage = img4;  
     }  
     currentImage.preImage.x = 100;  
     currentImage.preImage.preImage.x = -200;  
     currentImage.x = 400;  
     hilightSelectedImg();  
     manuTimeout = setTimeout("drawFrame()",timeoutInterval);  
 }  
   
 function hilightSelectedImg(){  
     img1.imgObj.width = 125;  
     img1.imgObj.height = 150;  
     img1.imgObj.style.opacity = 0.5;  
     img2.imgObj.width = 125;  
     img2.imgObj.height = 150;  
     img2.imgObj.style.opacity = 0.5;  
     img3.imgObj.width = 125;  
     img3.imgObj.height = 150;  
     img3.imgObj.style.opacity = 0.5;  
     img4.imgObj.width = 125;  
     img4.imgObj.height = 150;  
     img4.imgObj.style.opacity = 0.5  
     currentImage.imgObj.width = 150;  
     currentImage.imgObj.height = 175;  
     currentImage.imgObj.style.opacity = 1;  
 }  

三. css文件。style.css

[css]view plaincopy 
   
 canvas {  
     border:1px dashed black;  
 }  
   
 .imgGallery{  
     width:550px;  
     position:absolute;  
     height:170px  
 }  
   
 img{  
     opacity:0.5;  
 }  

gf771115

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html5 用canvas实现图片自动滑动切换

转自：http://blog.csdn.net/iamke1987/article/details/9886707图片自动滑动效果很多网站都要用，最近在学html5就拿这个练练手，发现用canvas实现起来其实很简单。代码比较粗糙，有很多改进的地方，不过还是先记录一下。一. html文件[html] view plaincopy
复制链接

扫一扫