原生js+css实现带预览图片的幻灯片效果实例

先总结一下，里面的用到的关键知识点

CSS中用到的知识点有：

过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和right

transition: property duration timing-function delay;

图片垂直居中：（这个我之前详细写过怎么实现水平垂直居中，原理一样，如果有兴趣的可以点击https://blog.csdn.net/lhjuejiang/article/details/79756844），这里主要用到的是：position:absolute; top:50%; margin-top:-(图片高度的一半)+px’;

盒子倒影效果：(这个目前只有内核前缀是-webkit的浏览器实现了)-webkit-box-reflect+: 方向(必选，可能的值有：above、below、left、right) 距离（可选）渐变（可选）

js中用到的核心技术有：正则表达式、字符串中的replace方法（注意replace方法输出的为字符串，而replace是字符串默认拥有的方法，所以replace可以连续使用）

用到了setTimeout定时器：主要解决的问题是：我们的元素是动态插入的，所以我们需要等到元素插入完成之后再对其进行后续的操作

模板字符串：嗯，这个也是我刚学会的，之前也没用过，我的理解就是把之前做好的一个模板进行改造（主要就是关键字的替换，一般把是如右边的做法：{{关键字}}，输出的时候用我们接受的数据替换掉关键字（用到了正则和字符串中的replace方法）），作用是输出幻灯片和控制按钮

嗯、上面是用到的核心技术，但理论和实践还差十个阮一峰，具体的实现，请看下面的实现过程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding:0; margin:0;}body{padding:50px 0;background-color:#fff;font-size:14px;font-family:"Avenir Next";color:#555;-webkit-font-smoothing:antialiased;}/*幻灯片区域*/.slider,.slider .main ,.slider .main .main-i{width:100%; height:400px; position:relative;}.slider .main{overflow:hidden;}.slider .main .main-i img{width:100%;position:absolute; left:0; top:50%; z-index:1;}.slider .main .main-i_right img{margin-right:-50%;}.slider .main .main-i .caption{position:absolute; right:50%; top:30%; z-index:9;}.slider .main .main-i .caption h2{font-size:26px; line-height:50px;color:#b5b5b5; text-align:right;}.slider .main .main-i .caption h3{font-size:40px; line-height:70px;color:#000; text-align:right; ;}/*控制按钮区域*/.slider .ctrl{width:100%; height:13px; line-height:13px; text-align:center; position:absolute; left:0; bottom:-13px; background-color:#fff;}.slider .ctrl .ctrl-i{display:inline-block; width:12%; height:13px; background-color:#666; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.3); margin-left:1px;}.slider .ctrl .ctrl-i img{width:100%; position:absolute; left:0; bottom:50px; opacity:0; transition:all .2s;z-index:1;}/*hover 的控制按钮的样式*/.slider .ctrl .ctrl-i:hover{background-color:#f0f0f0;}.slider .ctrl .ctrl-i:hover img{opacity:1;bottom:13px;z-index:2;-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)));}/*active当前展现的样式*/.slider .ctrl .ctrl-i_active,.slider .ctrl .ctrl-i_active:hover{background-color:#000;}.slider .ctrl .ctrl-i_active:hover img{opacity:0;z-index:10;}/*幻灯片切换的样式*/.slider .main .main-i{opacity:0;position:absolute;right:50%;top:0;-webkit-transition:all .5s;z-index:2;}#main_background,.slider .main .main-i_active{opacity:1;right:0;}#main_background{z-index:1;}.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{-webkit-transition:all 1s .8s; opacity:0;}.slider .main .main-i_active h2,.slider .main .main-i_active h3{margin-right:0; opacity:1;}.slider .main .main-i .caption{margin-right:13%;}</style>
</head>
<body>
<div class="slider"><div class="main" id="template_main"><div class="main-i {{css}}" id="main_{{index}}"><div class="caption"><h2>{{h2}}</h2><h3>{{h3}}</h3></div><img src="imgs/{{index}}.jpg" class="picture"/></div></div><div class="ctrl" id="template_ctrl"><a class="ctrl-i " id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="imgs/{{index}}.jpg"/></a></div>
</div>
<script>//数据定义，实际生产中应由后台给出
var data = [{img:1,h1:'Beautiful Lacy&Jan',h2:'Cute Girls'},{img:2,h1:'Annnanann',h2:'Dadada'},{img:3,h1:'Beautiful Ann',h2:'Cute Girl'},{img:4,h1:'Beautiful Donna',h2:'Cute Girl'},{img:5,h1:'Beautiful Lucy',h2:'Cute Girl'},{img:6,h1:'Beautiful Joy',h2:'Cute Girl'},{img:7,h1:'Beautiful Ken',h2:'Good boy'}
];
//内容输出//0 修改VIEW，转为Template（关键字替换，增加template id）//通用函数var g = function(id){if(id.substr(0,1)=='.'){return document.getElementsByClassName(id.substr(1));}return document.getElementById(id);}
//3、添加幻灯片的操作（所有幻灯片对应的按钮）function addSliders(){//获取模板//去掉空格var tpl_main = g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');//定义最终输出的HTML变量var out_main = [];var out_ctrl = [];//遍历所有数据，构建最终输出的HTMLfor(i in data){var _html_main = tpl_main.replace(/{{index}}/g,data[i].img).replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2).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);}//把HTML回写到对应的DOM里面g('template_main').innerHTML = out_main.join('');g('template_ctrl').innerHTML = out_ctrl.join('');//添加切换时的背景图片g('template_main').innerHTML +=tpl_main.replace(/{{index}}/g,'{{index}}').replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2);g('main_{{index}}').id = 'main_background';}//幻灯片切换function switchSlider(n){//获得要展示的幻灯片按钮 DOMvar main = g('main_'+n);var ctrl = g('ctrl_'+n);//获得所有幻灯片以及控制按钮var clear_main = g('.main-i');var clear_ctrl = g('.ctrl-i');//清除他们的active样式for(var i=0; i<clear_ctrl.length;i++){//这个地方使用的是clear_ctrl.length,我试过使用clear_main.length,然后后面的clear_ctrl[i].className就一直报错，不知道为什么，反正注意就用celar_ctrl.length,不会报错，等我搞懂了，会进行讨论的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';//切换时复制上一张幻灯片到main_background中setTimeout(()=>{g('main_background').innerHTML = main.innerHTML;},1000)}function movePictures(){var pictures = g('.picture');for(var i=0; i<pictures.length;i++){pictures[i].style.marginTop = (-1*pictures[i].clientHeight)/2+'px';}}
window.onload = function(){addSliders();switchSlider(1);setTimeout(function(){movePictures();},100);
}</script>
</body>
</html>

原生js+css实现带预览图片的幻灯片效果实例相关推荐

纯js实现点击预览图片效果
效果如图所示具体实现如下 //点击放大 function clickImg(){var lis=document.getElementById('imgList').getElementsByTag ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片点击图片查看大图,点击图片右上角"×"删除此图点击 ...
mui 原生jsH5预览图片
mui 原生jsH5预览图片下载mui.min.css,mui.js,mui.zoom.js,mui.imageViewer.js,mui.previewimage.js,app.js <li ...
html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
oracle如何上传图片,js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出 ...
本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用_ ...

原生js+css实现带预览图片的幻灯片效果实例

原生js+css实现带预览图片的幻灯片效果实例相关推荐

最新文章

热门文章