js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
本文实例介绍了js实现图片轮播相册，具有过渡渐变效果，分享给大家供大家参考，具体内容如下
思路很简单，用2个属性保存当前图片和上一张图片，用2个定时器分别控制透明度和当前过渡的图片。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<style>
#cnt{width:100%;height:80%;}
.ctrl{text-align:center;border:1px solid gray;font-size:12px;cursor:pointer;}
</style>
<script defer='defer'>
<!--
var curOpac = 0;
var filterTimer;
var isIE = /internet explorer/i.test(window.navigator.appName);
function MyScroll(cnt, control){
this.data = []; // 存放图片路径
this.interval = 3000; // 过渡一次的间隔时间(过渡时间+图片显示时间)
this.timer; // 定时器：控制当前显示的图片
this.container = cnt;
this.curFrame = 0;
this.oldFrame = 0;
this.controls = control; // 按钮集合
Global = this; // 获取对象的指针
this.run = function(){
this.timer = window.setInterval("Global.showFrame()", this.interval);
}
// 按钮的处理程序
this.go = function(i){
curOpac = 0; // 透明度归0
this.curFrame = i; // 当前要过渡的图片
this.stop(); // 清空计时器
this.showFrame(); // 当前图片过渡
this.run(); // 循环播放
}
this.stop = function(){
window.clearInterval(this.timer);
window.clearInterval(filterTimer);
}
this.showFrame = function(){
// 设置当前按钮样式
this.controls[this.oldFrame].style.backgroundColor = "white";
this.controls[this.curFrame].style.backgroundColor = "gray";
if(isIE) this.container.style.filter = "alpha(opacity=0)";
else this.container.style.cssText = "-moz-opacity:0";
this.container.innerHTML = this.data[this.curFrame];
filterTimer = window.setInterval("blend()", 100);
this.oldFrame = this.curFrame;
this.curFrame ++;
if(this.curFrame == this.data.length){
this.curFrame = 0;
}
}
}
// 增加透明度
function blend(){
curOpac+=10;
if(isIE) Global.container.style.filter='alpha(opacity=' + curOpac + ')';
else Global.container.style.cssText = "-moz-opacity:" + curOpac/100.0;
if(curOpac == 100){
curOpac = 0;
window.clearInterval(filterTimer);
}
}
//开始
function startIt(){
var imgArr = [];
// 创建4个图片对象保存图片路径
for(var i=0;i<4;i++){
imgArr[i] = new Image();
imgArr[i].src = "images/banner" + (i + 1) + ".jpg";
}
var controlArr = $("mainTb").getElementsByTagName("span");
for(var i=0;i<controlArr.length;i++){
controlArr[i].tag = i;
controlArr[i].onclick = function(){
myScroll.go(this.tag);
}
}
var myScroll = new MyScroll($("cnt"), controlArr);
myScroll.data.push("<img src='" + imgArr[0].src + "'>");
myScroll.data.push("<img src='" + imgArr[1].src + "'>");
myScroll.data.push("<img src='" + imgArr[2].src + "'>");
myScroll.data.push("<img src='" + imgArr[3].src + "'>");
myScroll.go(0);
}
window.onload = startIt;
function $(id){ return document.getElementById(id);}
//-->
</script>
<BODY>
<table width="300" height="100" id="mainTb">
<tr>
<th rowspan="4"><div id="cnt"> </div></td>
<td width="15"><span class="ctrl"> 1 </span></td>
</tr>
<tr>
<td><span class="ctrl"> 2 </span></td>
</tr>
<tr>
<td><span class="ctrl"> 3 </span></td>
</tr>
<tr>
<td><span class="ctrl"> 4 </span></td>
</tr>
</table>
</BODY>
</HTML>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
相关推荐
-
神奇！js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
JS实现颜色梯度与渐变效果完整实例
本文实例讲述了JS实现颜色梯度与渐变效果的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
js实现颜色阶梯渐变效果（Gradient算法）
html中颜色可以使用rgb和hex方式来表示. 在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的梯级渐变算法. 其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0). 其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600).因此我们可以将16进制转换为rgb单个进行梯级
-
JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
javascript计算渐变颜色的实例
javascript计算渐变颜色的实例 有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示: 如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图: 这时,就用到了同色系渐变颜色的计算,算法如下: function getItemColors (colorLevel) { var colors= []; //默认的最深颜色 var red = 134,green = 108, blue = 184; //最浅颜色是239,239,239 比如:最浅颜色的re
-
漂亮! js实现颜色渐变效果
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src
-
使用three.js 画渐变的直线
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>
-
jQuery与js实现颜色渐变的方法
本文实例讲述了jQuery与js实现颜色渐变的方法.分享给大家供大家参考,具体如下: 1.目的 本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白. 在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变.还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了. 2.原理 先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜
-
js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s
-
基于cssSlidy.js插件实现响应式手机图片轮播效果
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap
-
js实现图片轮播效果
本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati
-
JS组件Bootstrap实现图片轮播效果
本文主要来学习一下JavaScript插件--轮播.废话不多说,直接进入学习.完整教程可查看:Bootstrap3.0教程 轮播 下面先来展示的就是此插件和相关组件制作的轮播案例. <body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" da
-
用JS实现图片轮播效果代码（一）
一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父
-
基于vue.js实现图片轮播效果
轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
-
js制作网站首页图片轮播特效代码
本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;
-
JS仿hao123导航页面图片轮播效果
hao123网站大家都很熟悉吧,具体的效果不用我多说吧,感兴趣的朋友可以去参考效果图,下面小编给大家分享下实现代码思路,当然大家可以根据需求适当的添加修改删除代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ wi
-
Ionic + Angular.js实现图片轮播的方法示例
本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu