建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

用html5实现的简单幻灯片实例

更新时间:2017-04-13整理编辑:建站学习网阅读:0

 用html5、css3实现的超简单幻灯片,用鼠标滚轮滚动进行换页。

 

<!doctype html><html> <head>     <title></title>    <style>        #slides{            position:absolute;            left:0px;            top:0px;            height:100%;            width:100%;            overflow:hidden;            }        .slide{            position:absolute;            height:600px;            width:800px;            opacity:0.7;            background-color:rgba(0, 128, 196, 0.5) !important;            background-color:#ccc;                        border-radius:10px;            left:50%;            top:50%;            margin-top:-300px;            box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);             transition:all 0.25s ease-in-out 0s;        }        .current{            opacity:1;                        margin-left:-400px;                            }        .future{            margin-left:450px;            transform: skew(-3deg) scale(0.8);            -webkit-transform: skew(-3deg) scale(0.8);            }        .post{            margin-left:-1250px;            transform: skew(3deg) scale(0.8);            -webkit-transform: skew(3deg) scale(0.8);        }        .far-future{            margin-left:1200px;            transition:none;    
}
</style>
</head>
<body>
<div id="slides">
<div class="slide current">1</div>
<div class="slide future">2</div>
<div class="slide far-future">3</div>
<div class="slide far-future">4</div>
<div class="slide far-future">5</div>
<div class="slide far-future">6</div>
<div class="slide far-future">7</div>
</div>
<script> !function(){ var slides = document.getElementById("slides").childNodes;
var l = slides.length; function fslide(e){ var event = e || window.event;
//console.log(event.wheelDelta +" "+ event.detail); for(var i=0;i<l;i++)
{ if(slides[i].className=="slide current")
{ var current_slide = slides[i]; break;
}
}
//var current_slide = document.getElementsByClassName("current")[0];
// getElementsByClassName只有火狐,谷歌等浏览器的较新版本支持
if
((event.wheelDelta < 0 /*ie,谷歌等浏览器*/ || event.detail > 0 /*firefox*/) && nextel(current_slide)){
if(prevel(current_slide)){ prevel(current_slide).className="slide far-future"; }
current_slide.className="slide post"; nextel(current_slide).className="slide current";
 
if(nextel(nextel(current_slide))){ nextel(nextel(current_slide)).className="slide future"; } }else if((event.wheelDelta > 0 || event.detail < 0) && prevel(current_slide)){ if(nextel(current_slide)){ nextel(current_slide).className="slide far-future"; } current_slide.className="slide future"; prevel(current_slide).className="slide current"; if(prevel(prevel(current_slide))){ prevel(prevel(current_slide)).className="slide post" } } } document.onmousewheel = fslide; // ie,谷歌等浏览器 if(document.addEventListener){ document.addEventListener("DOMMouseScroll",fslide,false); // firefox } }(); function prevel(el){ if(el.previousSibling == null) return null; return el.previousSibling.nodeType == 1 ? el.previousSibling : prevel(el.previousSibling); } function nextel(el){ if(el.nextSibling == null) return null; return el.nextSibling.nodeType == 1 ? el.nextSibling : nextel(el.nextSibling); } </script> </body> </html>
 

本文网址:https://www.dedexuexi.com/wysj/html5/2892.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
用正则表达式过滤html代码
« 上一篇2017年04月13日
实例:html5.js 让HTML5+CSS3制作的网站兼容ie6,7,8浏览
2017年04月13日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询