html幻灯片效果需要js吗,js 幻灯片的实现
摒弃其他的效果,最简单的轮播也就只有一条语句:
parent.appendChild(parent.firstChild),不断的把列表的一个元素添加到最后一个,appendChild会将节点从原来的位置移除,所以借此可以产生切换效果。
一点,IE对文本的文本节点与其他的浏览器不同,在获取子节点的时候需要注意,另外在不同版本的FF中,children这个属性也需要注意。
下面的demo没有设置#view的overflow:hidden。
demo_1:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; }
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;}
#img_list{ position: absolute; width: 960px;}
#img_list li{ float: left; width: 320px; height: 120px; }
#a{ background: #87ceeb;}
#b{ background: #ff69b4;}
#c{ background: #98fb98;}
var img_list = document.getElementById('img_list');
setInterval(function(){
img_list.appendChild(img_list.firstChild);
},500)
(上面的demo其实可以不用浮动,仅为了后面的演示)
另一种方式就是不改变节点顺序,把整个列表向某个方向移动(不断改变列表的left属性),
demo_2:
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; }
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;}
#img_list{ position: absolute; width: 960px;}
#img_list li{ float: left; width: 320px; height: 120px; }
#a{ background: #87ceeb;}
#b{ background: #ff69b4;}
#c{ background: #98fb98;}
var img_list = document.getElementById('img_list');
img_list.style.left = 0;
setInterval(function(){
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: (parseInt(img_list.style.left) - 320 + 'px');
},500)
上面的demo突兀,感觉不好,于是可以加上平滑的移动效果。
所谓平滑的移动效果其实就是把上面第二个demo的每一大步分解为若干个小的部分,把一次移动320px分成50次来执行;
demo_3:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; }
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;}
#img_list{ position: absolute; width: 960px;}
#img_list li{ float: left; width: 320px; height: 120px; }
#a{ background: #87ceeb;}
#b{ background: #ff69b4;}
#c{ background: #98fb98;}
var img_list = document.getElementById('img_list');
img_list.style.left = 0;
setInterval(function(){
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: -pos/100 * 640+'px';
},(pos + 1)*10)
})(i)
}
},1500)
对于demo_1的情况,我们可以不断缩减firstChild的宽度,以此达到类似demo_3的效果。
demo_4
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; }
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;}
#img_list{ position: absolute; width: 960px;}
#img_list li{ float: left; width: 320px; height: 120px; }
#a{ background: #87ceeb;}
#b{ background: #ff69b4;}
#c{ background: #98fb98;}
var img_list = document.getElementById('img_list');
setInterval(function(){
var current = img_list.children[0];
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
current.style.width = 320 - (pos/100)*320 + 'px';
},(pos + 1)*10)
})(i)
}
setTimeout(function(){
img_list.appendChild(current);
current.style.width = '320px';
},1010);
},1500)
上面几种,方式原理都差不多,另外还可以设置透明渐变,让一张图片透明度从1国度到0 ,于是也可以产生切换效果,代码改动也很小。
demo_5:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ margin: 0; padding: 0;}
ul{ list-style: none;}
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; }
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;}
#img_list{ position: absolute; width: 960px;}
#img_list li{position: absolute; top:0; left: 0; width: 320px; height: 120px; }
#a{ background: #87ceeb;}
#b{ background: #ff69b4;}
#c{ background: #98fb98;}
var img_list = document.getElementById('img_list');
setInterval(function(){
var current = img_list.children[0];
for(var i = 0 ; i < 100 ; i++){
(function(pos){
setTimeout(function(){
current.style.opacity = 1 - (pos/100)*1;
},(pos + 1)*10)
})(i)
}
setTimeout(function(){
img_list.appendChild(current);
current.style.opacity = 1;
},1010);
},1500)
至于其他各种绚丽的效果,经过一些其他的组合处理就可以了。
一种处理方法就是把图片分割成n个区域,将背景都设置为需要显示的图片,然后在不同的区域显示对应的背景。这样一来,一张100*100的图片,可以被分割成100个10*10的小方块,再对这些方块来进行处理,得到的效果就会更多。理论上还可以分成10000个1*1的小点,但是浏览器会爆掉··
demo_6:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ margin: 0; padding: 0; border: 0;}
body{ padding: 50px;}
.sep{ float: left; margin:1px 1px 0 0;}
var img = document.getElementById('img');
var wrap = document.getElementById('wrap');
img.onload = function(){
console.dir(img);
var h = img.naturalHeight;
var w = img.naturalWidth;
newPanel(w,h);
}
function newPanel(w,h){
var cols = 10;
var rows = 10;
var colWidth = Math.floor(w/cols);
var rowHeight = Math.floor(w/rows);
for(var row = 0; row < rows; row++){
for(var col =0; col < cols; col++){
var div = document.createElement('div');
div.style.width = colWidth + 'px';
div.style.height= rowHeight + 'px';
div.className= 'sep';
div.style.backgroundImage = 'url(' + img.src + ')';
div.style.backgroundPosition = -colWidth*col +'px ' + -rowHeight*row +'px' ;
wrap.appendChild(div);
}
}
}
setTimeout(function(){
setInterval(function(){
wrap.lastChild && wrap.removeChild(wrap.lastChild);
},50)
},1000)
演示而已,具体的宽度和排列需要自己再组织下。或者消除,或者遮罩,对应不同的排列组合,其他的方式也比较好实现。
最后,大家都懂的,CSS3也可以实现一些幻灯片效果,
demo_7:
/p>
"http://www.w3.org/TR/html4/loose.dtd">
*{
margin: 0;
padding: 0;
}
#test{
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid #d4d4d4;
}
#test ul{
position: absolute;
top:0;
left: 0;
height:200px;
}
#test ul li{
float: left;
width: 300px;
height:200px;
}
@-webkit-keyframes myAnimation{
0%{
top:0;
}
40%{
top:-200px;
}
70%{
top:-400px;
}
100%{
top:-600px;
}
}
#test ul{
-webkit-animation-name:myAnimation;
-webkit-animation-duration:4s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
网上的例子很多,以后慢慢补充。
html幻灯片效果需要js吗,js 幻灯片的实现相关推荐
- html普通幻灯片效果,超酷的CSS3幻灯片效果-前端开发博客_html/css_WEB-ITnose
对于 css3 的喜爱可谓日渐增加,无奈自己很忙,没有多少时间来研究,这段时间也做了很多这方面的项目,比如类似于QQ 的IM沟通工具界面,比如新的博客界面,比如这个css 幻灯片演示(拿来的). 如果 ...
- java幻灯片效果_java中怎么实现幻灯片切换特效?详细实例展示
在java的使用过程中,我们会发现它的功能真的很强大,完成内容也极其丰富.今天就给大家介绍一下如何在java中实现幻灯片切换特效,以及通过实际的代码来为大家展示. 在最开始,需要说明的是,这个代码是实 ...
- js实现幻灯片效果二
使用jquery插件jquery.smallslider.js也能实现幻灯片效果. htm代码如下: <div id="flashbox" class="small ...
- JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
- 简单的JS幻灯片效果(播放图片) and Tab卡显示、展开、隐藏效果
自己练习JS写了2个简单的效果,如题. 直接上代码,在代码里添加注释,希望能对新学习JavaScript的有帮助,也帮自己强化练习. 1 function getElemByClass(cl ...
- js计时器实现页面刷新和幻灯片效果
在网页的特效制作中,经常要用到定时器,比如:间隔一定时间后页面自动跳转,或者间隔一定时间出现某种效果,像网页上的飞雪连天,或者背景颜色的定时改变等等. 若要页面定时跳转,简单的可以在he ...
- js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播
我也不知道叫什么功能通通叫出来得了,js滚动,滑动,幻灯片,轮播图 下载插件swipe.js,swipe.css ( http://download.csdn.net/download/u014596 ...
- 一款基于TweenMax.js的网页幻灯片
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 一款基于TweenMax.js的网页幻灯片(转)
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- reveal.js + markdown 制作幻灯片
reveal.js + markdown 制作幻灯片--0 reveal.js是一款通过利用HTML快速创建演示文稿,并且具有很多功能:垂直,水平幻灯片:支持Markdown,LaTex:演讲者注释: ...
最新文章
- Exchange2003-2010迁移系列之六,配置及配置第二台Exchange CAS/HUB服务器
- html百度地图app,uniapp H5 百度地图(示例代码)
- [z]IE6各种不兼容问题
- 【C#】获取网页内容及HTML解析器HtmlAgilityPack的使用
- .NetCoreLinuxDockerPortainer踩坑历险记
- java炫舞_Java 炫舞按键功能 DancingPlay (整理)
- 工欲善其事必先利其器之搜索引擎
- java servlet ajax_javaweb中ajax请求后台servlet(实例)
- 发力多人在线游戏!PS5有望2020年E3展会亮相!
- RTC 技术的试金石:火山引擎视频会议场景技术实践
- ORL数据集百度网盘
- gridview的sort_Gridview自动排序功能的实现
- My Sixtieth Page - N皇后 - By Nicolas
- contrastive CAM
- 股票交易接口与各种路由器接口与连接方法
- SQLServer之创建唯一非聚集索引
- 根据先序和中序(中序和后序)确定二叉树
- 摄影测量转角系统转换——OPK转换至POK下
- 3d计算机原理,3d的技术原理有哪些
- c语言压力变送器程序设计,基于单片机的压力变送器设计
热门文章
- WP7 : FrameworkDispatcher.Update has not been called when recording audio(wp7 录音)
- C# 连接 SQL Server 数据库,出现异常:provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接...
- libevhtp介绍与demo构建
- form resetFields并没有清空表单
- [剑指offer] 46. 孩子们的游戏(圆圈中最后剩下的数)
- SVG-Android开源库——SVG生成Vector资源文件的编辑预览工具
- Jmeter自动化测试-----接口测试基本使用实例
- [deviceone开发]-土地销售App开源
- android的adb命令总结
- jsp+aJax 登陆成功