html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码

html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码一、前期准备1.1案例分析适用场景:单例布局1.2方法论V视图HTML+CSS+调试Cjs实现控制流程D数据优化扩展二、代码结构h2captionh3caption样式(CSS略)脚本功能开发>>内容输出Template改造输出幻灯片&控制按钮图片位置调整>>切换控制切换幻灯片.main_i_active切换控制按钮.ctrl…

大家好,又见面了,我是你们的朋友全栈君。

一、前期准备

1.1 案例分析

适用场景:单例布局

1.2 方法论

V视图 HTML+CSS+调试

C js实现控制流程

D数据 优化扩展

二、代码

结构

h2 caption

h3 caption

html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码

html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码

样式(CSS略)

脚本功能开发

>>内容输出

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

>>切换控制

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

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

图片区

{
{h2}}}

{
{h3}}}

%7B%7Bindex%7D%7D.jpg

按钮区

图片预览

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

// 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_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[i].style.marginTop = -(pictures[i].clientHeight/3) + ‘px’;

}

}

// 4、定义何时处理幻灯片输出

window.onload = function(){

addSliders();

switchSliders(1);

setTimeout(function(){

movePictures();

},100)

}

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

9e8a08933376f4106c58dc88fec17230.png

遇到问题:

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158581.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 【DataStructure】Some useful methods about linkedList(三)

    【DataStructure】Some useful methods about linkedList(三)

  • 使用yum安装_linux安装gitlab

    使用yum安装_linux安装gitlab是用yum安装gitlab

  • WINDOWS Platform SDK 下载[通俗易懂]

    WINDOWS Platform SDK 下载[通俗易懂]最近由于需要使用IPV6方面的开发资料,下载了WINDWOS网络编程相关的代码,发现在VC6.0上无法编译,猜想可能是SDK的版本较低,于是网上找来个:http://www.microsoft.com/msdownload/platformsdk/sdkupdate/psdk-full.htm 下载后,安装既可以实现IPV6在VC6.0平台编译调试。

  • NAND FLASH_NAND器件

    NAND FLASH_NAND器件概要:本文介绍了DM368NANDFlash启动的原理,并且以DM368IPNC参考设计软件为例,介绍软件是如何配合硬件实现启动的.芯片上电后是如何启动实现应用功能的?这是许多工程师在看到处理器运行的时候,通常都会问的一个问题.下面我们就以德州仪器的多媒体处理芯片TMS320DM368为例,介绍它的NANDFlash启动原理以及实现.1.NANDFlash启动原理德州…

  • 查看Redis版本信息

    查看Redis版本信息linux环境下查看redis的版本:查看redis的版本有两种方式:redis-server–version和redis-server-v得到的结果是:Redisserverv=3.0.7sha=00000000:0malloc=jemalloc-3.6.0bits=64build=c4d3f2c7214375c6redis-cli–version和redis-cl

  • shell循环做数字递增

    shell循环做数字递增在shell用for循环做数字递增的时候发现问题,特列出shell下for循环的几种方法:1.foriin`seq11000000`;doecho$idone用seq110000000做递增,之前用这种方法的时候没遇到问题,因为之前的i根本就没用到百万(1000000),因为项目需要我这个数字远大于百万,发现用seq…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号