pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

用html5實現(xiàn)的簡單幻燈片實例

 用html5、css3實現(xiàn)的超簡單幻燈片,用鼠標滾輪滾動進行換頁。

 

<!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>
 
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實現(xiàn)柱狀圖的示例,本文使用canvas來實現(xiàn)一個圖表,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了手機端用rem+scss做適配的詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了canvas 實現(xiàn) github404動態(tài)效果的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 上海防爆真空干燥箱-上海防爆冷库-上海防爆冷柜?-上海浦下防爆设备厂家? | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 食品无尘净化车间,食品罐装净化车间,净化车间配套风淋室-青岛旭恒洁净技术有限公司 | 隧道窑炉,隧道窑炉厂家-山东艾瑶国际贸易 | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 石英砂矿石色选机_履带辣椒色选机_X光异物检测机-合肥幼狮光电科技 | 菏泽知彼网络科技有限公司| 混合生育酚_醋酸生育酚粉_琥珀酸生育酚-山东新元素生物科技 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 高光谱相机-近红外高光谱相机厂家-高光谱成像仪-SINESPEC 赛斯拜克 | 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 | 过跨车_过跨电瓶车_过跨转运车_横移电动平车_厂区转运车_无轨转运车 | 高清视频编码器,4K音视频编解码器,直播编码器,流媒体服务器,深圳海威视讯技术有限公司 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 一体化隔油提升设备-餐饮油水分离器-餐厨垃圾处理设备-隔油池-盐城金球环保产业发展有限公司 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 上海网站建设-上海网站制作-上海网站设计-上海做网站公司-咏熠软件 | 智能案卷柜_卷宗柜_钥匙柜_文件流转柜_装备柜_浙江福源智能科技有限公司 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 超声波清洗机_超声波清洗机设备_超声波清洗机厂家_鼎泰恒胜 | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 写方案网_方案策划方案模板下载 事迹材料_个人事迹名人励志故事 | 球形钽粉_球形钨粉_纳米粉末_难熔金属粉末-广东银纳官网 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 武汉高低温试验箱_恒温恒湿试验箱厂家-武汉蓝锐环境科技有限公司 | 新中天检测有限公司青岛分公司-山东|菏泽|济南|潍坊|泰安防雷检测验收 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 【官网】博莱特空压机,永磁变频空压机,螺杆空压机-欧能优 | 太阳能发电系统-太阳能逆变器,控制器-河北沐天太阳能科技首页 | 浙江皓格药业有限公司| 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 好杂志网-首页| 爱德华真空泵油/罗茨泵维修,爱发科-比其尔产品供应东莞/杭州/上海等全国各地 | 连栋温室大棚建造厂家-智能玻璃温室-薄膜温室_青州市亿诚农业科技 | 通辽信息港 - 免费发布房产、招聘、求职、二手、商铺等信息 www.tlxxg.net |