html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码
一、前期准备
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脚本的编写~~
// 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)
}
效果图 … = =莫吐槽又是这几张图~~~
遇到问题:
1、 给图片直接加top:50%;会有BUG,没作用,原因可能是没给height固定高度~~给了固定高度就好了
但问题又来了,2、给固定高度后,按钮组不能自适应宽度 … 会被挤到第二排去 ……
以上这篇【JS+CSS3】实现带预览图幻灯片效果的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码相关推荐
- linux qt 打印预览控件,Qt实现保存、浏览、预览、打印功能的示例代码
Qt提供了以文本.图片.HTML等方式来实现对文档的操作,主要用到了QPrinter类和QPainter类,用到了QFileDialog文件窗口.QPrintPreviewDialog预览窗口类和QP ...
- 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
- 使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
- 原生js+css实现带预览图片的幻灯片效果实例
先总结一下,里面的用到的关键知识点 CSS中用到的知识点有: 过渡效果:transition,下面是语法,用到时候一般要加上浏览器内核前缀.本实例中主要用到过渡的地方是opacity和right tr ...
- 带预览图的js切换效果!
效果图: js代码: var isIE = (document.all) ? true : false;var $ = function (id) {return "string" ...
- php 文件预览 水印,PHP图片上传,预览图上传,水印设置
//设置图片的存放目录 设置水印的存放地址如果愿意,可以给预览图.上传图片分设不同的存储地址 $img_path = $_SERVER['DOCUMENT_ROOT']."/data/img ...
- 图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...
先上效果演示: 功能说明 选择图片区域并剪裁为头像 Html部分 页面分左右两部分:左边显示遮罩图片的缩放与拖动,右边显示剪裁后图片的预览 <div class="content&qu ...
- 使用jquery打造一个动态的预览产品颜色效果
在浏览一些电子商务网站的时候,选择一件产品的时候,我们经常会看到点击衣服的颜色,同一件衣服的颜色就会切换,让我们觉得真是比较有意思,这样做的效果给用户的体验比较好,今天就给大家分享一下这种效果的实现原 ...
- 微信小程序-图片预览图
有时候图片列表图片过小看不清图片内容,这时我们一般就希望点击图片可以放大显示进行预览,那么,接下来我们就调用微信原生API的的浏览图片程序进行对图片预览的实现. 单张图片预览 通过微信原生API实现单 ...
- 小程序 图片上传php后台,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
最新文章
- taro 重新加载小程序_taro-music一款开源网易云音乐小程序
- WINCE蓝牙应用开发方式
- java数组长度最大值_java 数组排序、最大值、最小值 | 学步园
- JS遍历对象或者数组
- 爬虫职业道德----查看Robots.txt
- 栈和排序---牛客练习赛10--B题
- Java学习心得——整数太大的错误
- Windows系统electron集成flash播放器(.swf文件在electron中Vue页面中播放)
- idea 红色文件处理方法
- GIT、小乌龟、语言包下载
- YAML格式与Three dashes(hyphen) ---
- [转载]程序员去面试的梗!面试官:“哦了,明天来上班吧”
- 密码学实验4 欧拉数求解和DES的初始置换
- Caffe-SCIR
- NMOS管与PMOS管的区别与总结
- Dashgo D1使用手册
- 如何快速看懂一个大型程序
- 从0 到1开发一款App(三):设计
- 解密犯罪时间JAVA
- matlab分析应力应变图,应变分析 (strain analysis).ppt