<!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" />
<script>
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;
}
</script>
<style>
canvas {
border:1px dashed black;
}

.imgGallery{
width:550px;
position:absolute;
height:170px
}

img{
opacity:0.5;
}
</style>
</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>

canvas图片滚动的更多相关文章

  1. Android高级图片滚动控件，编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  2. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  3. HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器

    项目做到一个裁切图片的功能,就是让用户上传头像的时候可以裁切一下图片,选择一个合适大小位置来作为头像.之中用到了crop.js这个插件,用canvas直接绘制了用户裁切缩放后的图片.裁切的过程这边就不 ...

  4. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  5. javascript实现图片滚动

    闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...

  6. 实例源码--Android图片滚动切换效果

    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...

  7. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  8. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  9. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

随机推荐

  1. GFM(GitHub Flavored Markdown)与标准Markdown的语法区别

    没有就自己造 其实这篇文16年底的时候就写好的,只不过当时是记在自己的笔记上(没错,我笔记大多记在本地,比发表的这寥寥几篇那是多的多的多了

  2. 照片放大软件PhotoZoom怎么用？

    做设计时,难免常常要上网找一些图片素材,但是有时候我们找到图片效果不尽人意,图片风格符合设计要求的的却图片太小,用photoshop放大后,图片的色块像素就出来了,效果极为不理想,这就要我们将图片进行 ...

  3. jsp基本内置标签

    <jsp:foward page="url"> <jsp:param value=" " name=" "/> &l ...

  4. zabbix、agent端服务器图形化展示

    [root@agent ~]# cat /etc/hostname agent.zabbix.com [root@agent ~]# cat /etc/hosts 127.0.0.1   localh ...

  5. PHP的soap 之 nusoap 的使用

    今天不知道为什么想起了soap 这个东西,然后就弄了下,在php上使用的是nusoap. 一些基本的使用,高深的麻烦您自己看手册去 这个软件的下载在http://sourceforge.net/pro ...

  6. codevs 3945 完美拓印 (KMP)

    题目大意:给你一个神奇的印章,他左右下三个面都是直的,上面是凸凹不平的面(凸凹都平行于别的面).然后给你一个轮廓线,如果一个面能与轮廓线完全重合,可以把印章的这个沿着轮廓线拓印,求所有的拓印方案. 把 ...

  7. html全屏显示

    JavaScript代码: function toggleFullScreen() { if (!document.fullscreenElement && // alternativ ...

  8. datalist标签 输入框候选

    H5的datalist标签,可以给input输入框提供下拉选择列表,或输入提示功能. 写如下的datalist标签 <datalist id="car"> <op ...

  9. 百度地图 key申请以及基础地图的演示

    之前做过一个拼车的项目,用到了百度地图,如今做电商项目,也遇到了要使用地图,可是刚来这公司不久项目不是自己做的,今天一个同事说定位那边有点问题,所以如今不忙,好好搞下地图,为了以后业务扩展或者出现故障 ...

  10. POJ 2041 Unreliable Message

    简单模拟.依照题意处理一下字符串就可以. 应该是写题号写错了,本来我在VirtualJudge是加入的POJ 并查集与生成树的题. #include<cstdio> #include< ...