幻灯片预览图---标准代码
来源:互联网 发布:免费漫画软件破解版 编辑:程序博客网 时间:2024/04/28 02:24
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{ padding:0px; margin:0px;} body{ padding:50px 0px; background-color: #fff; font-family:"Avenir Next"; font-size:14px; color:#555; -webkit-font-smoothing:antialiased;} .slider .main .main-i,.slider .main,.slider{ width:100%; height:400px; position:relative;} /*幻灯片区域的样式*/.slider .main{ overflow: hidden;} .slider .main .main-i{} .slider .main .main-i img{ width:100%; position:absolute; top:50%; left:0px;} .slider .main .main-i .caption{ position:absolute; right:60%; top:30%;} .slider .main .main-i .caption h2{ font-size: 40px; line-height: 50px; color: #b5b5b5; text-align: right;} .slider .main .main-i .caption h3{ font-size: 55px; line-height: 60px; color: #000000; text-align: right; font-family: 'Andale Mono Regular';} /*控制按钮区域的样式*/.slider .ctrl{ width:100%; height:13px; position:absolute; bottom:-13px; left:0px; text-align:center; line-height: 13px;} .slider .ctrl .ctrl-i{ position:relative; display: inline-block; width:150px; height:13px; background-color: #666; box-shadow:0 1px 1px rgba(0,0,0,0.3); margin-left:1px;} .slider .ctrl .ctrl-i img{ width:100%; position:absolute; bottom:50px; left:0px; opacity: 0; z-index: -1; -webkit-transition:all .2s;} /*hover 控制按钮样式*/.slider .ctrl .ctrl-i:hover{ background-color: #f0f0f0;} .slider .ctrl .ctrl-i:hover img{ bottom:13px; -webkit-box-reflect:below 0px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(50%,transparent), to( rgba(255,255,255,0.3) ) ); opacity: 1; z-index: 0;} /*active 当前展示的状态*/.slider .ctrl .ctrl-i-active:hover,.slider .ctrl .ctrl-i-active{ background-color: #000;} .slider .ctrl .ctrl-i-active:hover img{ z-index:-1; opacity: 0;} /*幻灯片切换*/.slider .main .main-i-right,.slider .main .main-i{ position:absolute; left:-50%; top:0; opacity: 0; -webkit-transition:all .5s;} .slider .main .main-i-right{ left:50%;} .slider .main .main-i h2{ margin-right:45px; } .slider .main .main-i h3{ margin-right:-45px;} .slider .main .main-i h2,.slider .main .main-i h3{ opacity: 0; -webkit-transition:all 1s .5s;} #main_background,.slider .main .main-i-active{ left:0%; opacity: 1;} #main_background{ z-index:-1;} .slider .main .main-i-active .caption{ margin-right: 5%;} .slider .main .main-i-active h2,.slider .main .main-i-active h3{ opacity: 1; margin-right: 0px;}</style></head><body><div class="slider"> <div class="main" id="template_main"> <div class="main-i {{css}}" id="main_{{index}}"> <img src="showPic/{{index}}.jpg"/ class="picture"> <div class="caption"> <h2>{{h2}}</h2> <h3>{{h3}}</h3> </div> </div> </div> <div class="ctrl" id="template_ctrl"> <a class="ctrl-i" href="javascript:switchSlider({{index}});" id="ctrl_{{index}}"> <img src="showPic/{{index}}.jpg"/> </a> </div> </div><script type="text/javascript">var data=[ {img:'1',h2:'Creative',h3:'DUET'}, {img:'2',h2:'Friendly',h3:'DEVIL'}, {img:'3',h2:'Tranqilent',h3:'COMPATRIOT'}, {img:'4',h2:'Insecure',h3:'HUSSLER'}, {img:'5',h2:'Loving',h3:'REBEL'}, {img:'6',h2:'Passionate',h3:'SEEKER'}, {img:'7',h2:'Crazy',h3:'FRIEND'},] var g=function(id){ if(id.substr(0,1)==='.'){ return document.getElementsByClassName(id.substr(1)) } return document.getElementById(id)} function addSliders(){ var tpl_main=g("template_main").innerHTML.replace(/^\s*/,'').replace(/\s*$/,'') var tpl_ctrl=g("template_ctrl").innerHTML.replace(/^\s*/,'').replace(/\s*$/,'') var out_main=[] var out_ctrl=[] for (i in data){ var _html_main=tpl_main.replace(/{{index}}/g,data[i].img).replace(/{{h2}}/g,data[i].h2).replace(/{{h3}}/g,data[i].h3).replace(/{{css}}/g,['','main-i-right'][i%2]) var _html_ctrl=tpl_ctrl.replace(/{{index}}/g,data[i].img) out_main.push(_html_main) out_ctrl.push(_html_ctrl) } g("template_main").innerHTML=out_main.join('') g("template_ctrl").innerHTML=out_ctrl.join('') g("template_main").innerHTML+=tpl_main.replace(/{{h2}}/g,data[i].h2).replace(/{{h3}}/g,data[i].h3) g("main_{{index}}").id='main_background' } function switchSlider(n){ var main=g("main_"+n) var ctrl=g("ctrl_"+n) var clear_main=g(".main-i") var clear_ctrl=g(".ctrl-i") for(var i=0;i<clear_ctrl.length;i++){ clear_main[i].className=clear_main[i].className.replace(' main-i-active','') clear_ctrl[i].className=clear_ctrl[i].className.replace(' ctrl-i-active','') } main.className+=' main-i-active' ctrl.className+=' ctrl-i-active' setTimeout(function(){ background=g('main_background') background.innerHTML=main.innerHTML },1000)} function movePicture(){ var picture=g('.picture') for (var i=0 ;i<picture.length;i++){ picture[i].style.marginTop=(-1* picture[i].clientHeight/2)+'px' }} window.onload=function(){ addSliders() switchSlider(1) setTimeout(movePicture,100)}</script></body></html>
0 0
- 幻灯片预览图---标准代码
- 幻灯片预览图--自己写
- HTML 幻灯片预览效果
- 幻灯片代码
- 幻灯片代码
- 幻灯片代码
- 多图上传预览代码
- javascript超强幻灯片代码
- JavaScript 幻灯片 脚本代码
- 网站常用幻灯片代码
- 网页中幻灯片效果代码
- VBscript超强幻灯片效果代码
- ASP实例:幻灯片新闻代码
- 共享一段JS幻灯片代码
- ASP实例:幻灯片新闻代码
- 图片幻灯片显示效果代码
- 网站首页js幻灯片代码
- KingCMS5.0 幻灯片的代码
- 矩阵快速幂优化递推式 例:斐波那契数列
- windows loadlibrary()
- ubuntu中adb安装与使用,android真机调试进入data/data目录
- 简单的读取excel文件
- 剑指Offer 54题 表示数值的字符串 Java版
- 幻灯片预览图---标准代码
- CSS3新特性(一)
- HDU - 1130 How Many Trees?
- MAC版本下ST3下Emmet插件安装教程图解
- c/c++练习–08
- nyoj 325 zb的生日
- 区间筛法 (埃氏筛变种)
- 第一篇
- poj1338 Ugly Numbers(丑数模拟)