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

转自：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</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();

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,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,height);
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)";
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);
}
);
function drawFrame(){
context.clearRect(0,canvas.width,canvas.height);
//调用beginPath()确保不会接着上次绘制的图形绘制
context.beginPath();
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">//遮罩
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">//每一帧的位置变动
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,document.getElementById("img1"));
img2 = new slideImage("img2",document.getElementById("img2"));
img3 = new slideImage("img3",400,document.getElementById("img3"));
img4 = new slideImage("img4",700,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()",153); background-color:inherit; font-weight:bold">function intervalSlide(){
currentimage = currentimage.nextimage;
autoTimeout = setTimeout("drawFrame()", timeoutInterval);
setTimeout("intervalSlide()", 5000)
function iconClick(obj){
if(obj == "img1"){
currentimage = img1;
else if(obj == "img2"){
currentimage = img2;
if(obj == "img3"){
currentimage = img3;
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;
}

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

相关推荐