{{h2}}}
{{h3}}}
Schaltflächenbereich
Das Folgende ist der Schlüsselpunkt beim Schreiben von JS-Skripten~~
<script type="text/javascript">
// 1、数据定义（实际生产环境，应由后台给出）
var data = [
{img:1,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
{img:2,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
{img:3,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
{img:4,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
{img:5,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
{img:6,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
{img:7,h2:"我是标题二,小标题",h3:"我是标题三,大标题"},
];
// 2、通用函数
var g = function(id){
if( id.substr(0,1) =="." ){
return document.getElementsByClassName( id.substr(1) );
}
return document.getElementById(id);
}
// 3、添加幻灯片的操作（所有幻灯片&对应的按钮）
function addSliders(){
// 3.1 获取模版
var tpl_main = g("template_main").innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
var tpl_ctrl = g("template_ctrl").innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
// 3.2 定义最终输出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<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','');
}
// 5.4为当前控制按钮和幻灯片附加样式
g("main_"+n).className += ' main_i_active';
g("ctrl_"+n).className += ' ctrl_i_active';
// 7.2切换时 复制上一张幻灯片到main_background中
setTimeout(function(){
g('main_background').innerHTML = main.innerHTML;
},1000);
}
// 6、动态调整图片的margin-top 使其垂直居中
function movePictures(){
var pictures = g('.picture');
for(i=0;i<pictures.length;i++){
pictures[i].style.marginTop = -(pictures[i].clientHeight/3) + 'px';
}
}
// 4、定义何时处理幻灯片输出
window.onload = function(){
addSliders();
switchSliders(1);
setTimeout(function(){
movePictures();
},100)
}
</script>Nach dem Login kopieren
Renderings… = =Beschweren Sie sich nicht noch einmal über diese Bilder~~~
Es ist ein Problem aufgetreten:
1. Fügen Sie top:50% direkt zum Bild hinzu; es wird ein Fehler auftreten und es wird nicht funktionieren. Der Grund dafür kann sein, dass die Höhe nicht festgelegt ist. Geben Sie einfach eine feste Höhe an
Aber das Problem tritt erneut auf. 2. Nachdem die Höhe festgelegt wurde, kann sich die Tastengruppe nicht an die Breite anpassen... und wird in die zweite Reihe gequetscht...Der obige [JS+CSS3]-Beispielcode zum Implementieren des Diashow-Effekts mit Vorschau ist der gesamte vom Editor geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.
