全部栏目

首页 旅游资讯 线路攻略 景点大全 国内游 境外游 美食特产
您的当前位置：首页正文

【JS+CSS3】实现带预览图幻灯片效果的示例代码_javascript技巧

2020-11-27 来源：好走旅游网
一、前期准备

1.1 案例分析

适用场景：单例布局
1.2 方法论

V视图 HTML+CSS+调试
C js实现控制流程
D数据 优化扩展

二、代码

结构


 
 
 
 
h2 caption

 
h3 caption

样式（CSS略）

脚本功能开发

>>内容输出
Template改造 输出幻灯片&控制按钮 图片位置调整

>>切换控制
切换幻灯片 .main_i_active 切换控制按钮 .ctrl_i_active


0、修改VIEW ->Template(关键字替换),增加Template id
图片区

{{h2}}}


{{h3}}}



按钮区

图片预览


下面是重点 JS脚本的编写~~

输出HTML的变量
 var out_main = [];
 var out_ctrl = [];

 // 3.3 遍历所有数据，构建最终输出的HTML
 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);
 }

 // 3.4 把HTML回写到对应的DOM里面
 g("template_main").innerHTML = out_main.join('');
 g("template_ctrl").innerHTML = out_ctrl.join('');
 
 // 7、增加#main_background
 g('template_main').innerHTML += tpl_main
 .replace(/{{index}}/g,'{{index}}')
 .replace(/{{h2}}/g,data[i].h2)
 .replace(/{{h3}}/g,data[i].h3);

 g('main_{{index}}').id = 'main_background';
 }

 // 5、幻灯片切换
 function switchSliders(n){
 // 5.1 获得要展现的幻灯片&控制按钮 DOM
 var main = g("main_"+n);
 var ctrl = g("ctrl_"+n);

 // 5.2 获得所有的幻灯片&控制按钮
 var clear_main = g('.main_i');
 var clear_ctrl = g('.ctrl_i');

 // 5.3 清除他们的active样式
 for(var i=0;i输出
 window.onload = function(){
 addSliders();
 switchSliders(1);
 setTimeout(function(){
 movePictures();
 },100)
 }



效果图 … = =莫吐槽又是这几张图~~~ 


 


遇到问题：


1、 给图片直接加top:50%;会有BUG，没作用，原因可能是没给height固定高度~~给了固定高度就好了


但问题又来了，2、给固定高度后，按钮组不能自适应宽度 … 会被挤到第二排去 ……


以上这篇【JS+CSS3】实现带预览图幻灯片效果的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。 




        
        
            
            
            
    
显示全文