幻灯片

于 2019-04-01 15:17:46 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44619313/article/details/88948739
版权

幻灯片

开发工具与关键技术：c#、SQL Server、Visual Studio
作者：梁添荣
撰写时间：2019-4-1

选择个人照片，点击幻灯片，则跳出全屏并显示照片，每隔2秒轮播

 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190401151654451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYxOTMxMw==,size_16,color_FFFFFF,t_70)
步骤：
1.点击跳转到轮播页面：content: "huanpiandeng?nameID=" + name, 
Name为拼接参数
function huandengpian() {


            var name = $("#X").val();
            if (name != 0) {
              
                quanping() //调用全屏方法
                layer.open({
                    type: 2,
                    title: false,
                    shadeClose: true,
                    shade: 0.7,
                    area: ['100%', '100%'],
                    content: "huanpiandeng?nameID=" + name, 
                });

                
                $(".layui-layer-ico").click(function () {
                    tuichu()//调用退出全屏方法
                });
                $(".layui-layer-ico").attr("style", "margin-top:20px;margin-right:20px")

            }

            else {
                alert("请选择！")
            }
          
        }
2.轮播页面获取参数并查询照片回填给<body>
$("#Photo").attr("style", "background-image: url('zhaopianhuitian?Photo_ID=" + Photo_ID)

3.因为是每隔2秒轮播4张，所以设置一次性定时器
//一次性播放
        setTimeout(function () {
            
                var Photo_ID2 = Photo_ID + 1;          
                $("#Photo").attr("style", "background-image: url('zhaopianhuitian?Photo_ID=" + Photo_ID2);
            
        },2000)

        setTimeout(function () {
            
               var Photo_ID3 = Photo_ID + 2;
                $("#Photo").attr("style", "background-image: url('zhaopianhuitian?Photo_ID=" + Photo_ID3);
            
        }, 4000)

        setTimeout(function () {
         
               var Photo_ID4 = Photo_ID + 3;
                $("#Photo").attr("style", "background-image: url('zhaopianhuitian?Photo_ID=" + Photo_ID4);
            
        }, 6000)

4.6秒后循环播放
  //循环播放
        var interval = setInterval(function () {      
            $("#Photo").attr("style", "background-image: url('zhaopianhuitian?Photo_ID=" + Photo_ID);        
                var xingzhang = Photo_ID;

                var tiemsout = 0;
                var interval2 = setInterval(function () {
                   
                    tiemsout = tiemsout + 1; 
                    if (tiemsout == 3) {
                        clearInterval(interval2)
                    }
                    xingzhang = xingzhang + 1;
                    $("#Photo").attr("style", "background-image: url('zhaopianhuitian?Photo_ID=" + xingzhang);

                },2000)

        },8000);
梁兄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-简易幻灯片制作
myboke1的博客
12-14 944
先引入move.js这个文件，里面写了完美运动框架 window.onload = function () { var oDiv1 = document.getElementById('div1'); var oBut = oDiv1.getElementsByTagName('ol')[0].getElementsByTagName('li'); var oUl = oDiv
jQuery setTimeout实现幻灯片
kacoro的专栏
04-05 750
”。" class="error doctype"> html xmlns="http://www.w3.org/1999/xhtml"> head> script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript">script> meta http-equiv="X-UA-Compatible" content="IE
幻灯片js
weixin_30756499的博客
04-24 97
1.新建html <div style='position:relative;'><div class="images" id='tw_img_scroll'><div class='silders' id="slides"><div class='imgInt'><a href='#'><img src="....
幻灯片制作四
龙乐的专栏
12-30 747
1.工具栏中Shape图形的更多用途。 在Keynote中可以在工具栏的Shape中选择一些图形：在右边的Style、Text和Arrange中可以修改图形的属性。 这里讲一个画空心圆，首先在幻灯片中拖入一个圆圈： 选中圆圈，然后在右边的fill下面选择No Fill，并对圆圈的一些属性进行调节：        就可以得到圆圈的效果了。
制作简单的幻灯片
Demos的专栏
03-17 509
$(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there
原生JS实现幻灯片
12-10
【原生JS实现幻灯片】是Web开发中常见的动态效果，主要用于展示一系列图片或内容，用户可以通过点击或自动切换来浏览。以下是对这个话题的详细解析： 首先，幻灯片的基本结构通常包括一个容器（如`.box`），用于...
如何制作幻灯片（代码分享）
11-30
话不多数，请看代码： 一 轮播 定时 <style type="text/css"> #dw_JS_huanDeng_2 { margin: 0 auto; width: 1100px; position: relative; z-index: 5;} #JS_HDmenu_2 { position: absolute;...
jQuery横向自适应幻灯片
04-02
【jQuery横向自适应幻灯片】是一种常见的网页动态效果，常用于网站的首页展示或产品介绍，能够以优雅的方式展示多张图片或内容。这款幻灯片的特点在于它能够自动适应浏览器的宽度，同时配备有左右箭头和索引按钮，...
基于flux.js的5种jQuery超酷3d幻灯片效果
最新发布
03-18
flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果：爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
jquery带定位按钮幻灯片
04-02
**jQuery带定位按钮幻灯片**是一种常见的网页交互元素，用于展示一组图片或内容，通过滑动效果在多个页面之间进行切换。这种幻灯片通常包含左右箭头和定位按钮，用户可以通过点击这些按钮来手动切换到指定的幻灯片。...
【JS】幻灯片
Albert
01-30 549
幻灯片 .div1{ height: 520px; width: 950px; border: 1px solid red; } div ul{ float: right; } div ul li{ margin-top:70px; margin-right:10px; list-style: none; border: 1px
幻灯片制作六
龙乐的专栏
01-04 913
1.图片的裁剪 在keynote中你可以对图片进行裁剪如下图所示，有一张图片： 选中图片：在最上面的工具栏中（与时间在同一栏）-->format-->image-->Mask With Shape-->Rounded Rectangle(如下图所示，在Mask With Shape下有很多裁剪形状可选，像：矩形，圆角矩形，圆形，三角形，箭头.......) 选中Rounded R
js实验2.(1)幻灯片切换实现
I feel lost
04-17 2617
1、制作幻灯片显示（参考html实验8的第4题） 功能说明：    (1) 用setTimeout制作幻灯片动画。装载网页后自动播放幻灯片。具体见slider.mp4    (2) 当mouseover图片时，显示左右箭头，并停止动画。当mouseout画面时，隐藏左右箭头，重新启动动画。    (3) 每次点击左箭头将移动一副图像。    (4) 右下角的三个点每个点对应一幅图像，
office 2010 ppt幻灯片自动播放
Sun的专栏
10-13 4091
方法一： 在菜单栏中找到"幻灯片放映"——>"排练计时" 这时幻灯片开始放映，鼠标点击使幻灯片一步一步播放至结束！ 会出来一个窗口选择"是"即可。这样幻灯片放映时就可以自动播放了！ 方法二： 在菜单栏中找到"切换"——>在最右侧有换片方式： 点击鼠标时； 设置自动换片时间； 给"自动换片时间"设置个时间，这样幻灯片也能自动播放。 注意：这种方法要给每张幻灯片都设置时间！
js练习8(幻灯片切换效果)
weixin_33843409的博客
01-23 109
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;幻灯片切换&lt;/title&
幻灯片放映时无法切换到下一张
热门推荐
fushengruoke的专栏
06-30 2万+
<br />一个课件呀，有很多张幻灯片，可是在播放的时候，它死活就不能切换到下一张，总是停在第一张。<br />出现这个问题，主要是因为播放的格式出了点问题。<br />幻灯片的放映方式有三种：演讲者放映、观从自行浏览、在展台浏览。<br />我们一般默认的方式是演讲者放映，如果你把它设置为“在展台浏览”那么就会变成，上面所说的状态。<br />解决这个问题：点击菜单中的“幻灯片放映—》设置放映方式——》将放映类型改为演讲放映”
JS切换图片幻灯切换效果
知行合一
11-30 1556
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果
weixin_33968104的博客
05-03 149
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
PowerPoint2000幻灯片制作全面指南
"本教程详细介绍了如何使用PowerPoint创建幻灯片，涵盖了幻灯片的基础概念、关键功能和操作步骤。" 在Microsoft Office系列中，PowerPoint是一款强大的演示文稿制作软件，它允许用户轻松创建包含文字、图形、图像、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值