图片动态播放

来源：互联网发布：牧之逸知乎编辑：程序博客网时间：2024/05/29 04:48

图片动态切换展示

-涉及知识：
- css
- javascript
- jQuery
- html

这是对之前一个文章项目的改进，使用了jQuery（一个js类库），其实不用jquery也是行的，就如同前一篇文章纯粹的js和css写的。
主要的改进是实现了图片的轮播。这里用到了DOM中window下的一个方法：setInterval();
举个栗子，window.setInterval(“function(){alert(“hello”)}”,3000);
该区别与setTimeout方法，会循环着执行下去，而setTimeout()执行了一次就不执行了。
两种方法各自有各自的用处，视情况而定。

学习心得：
jquery的动画animate和css的动画animation是有区别的，jq的动了就不会回来了，css的做完了动画会立即恢复原状。（观察得到的，实际机理不清楚）
jq的.click()方法触发对象点击事件，貌似是触发了（极短时间内的）很多下点击，而不是一下点击？？？

下面是代码（有很多新手和调试的痕迹，勿喷）：
注意：需要引入jquery库的js文件

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            #imgleft,#imgmiddle,#imgright{                position: absolute;            }            #imgleft{                width: 486px;height: 218px;                top: 10px;left: 0px;                z-index: 1;                opacity: 0.5;            }            #imgmiddle{                width: 486px;height: 228px;                top: 0px;left: 110px;                z-index: 5;                opacity: 1;            }            #imgright{                width: 486px;height: 218px;                top: 10px;left: 220px;                z-index: 3;                opacity: 0.5;            }        </style>        <script src="js/jquery-3.2.1.js"></script>        <script>            $(document).ready(function(){//              setTimeout(function(){//                  alert("你好");//              },2000); //执行一次就不执行了//              setInterval(function(){//                  alert("你好");//              },2000); //循环执行                setInterval(function(){                    imgMove();                },4000);                function imgMove(){//                  alert("232")                    $("#imgleft").animate({                    top:'10px',                    left:'220px',                    height:'218px',                    zIndex:'1',                    opacity:'0.5'                    },"1000",function(){$("#imgleft").attr('id','imgright');});                    $("#imgmiddle").animate({                    top:'10px',                    left:'0px',                    height:'218px',                    zIndex:'1',                    opacity:'0.5'                    },"1000",function(){$("#imgmiddle").attr('id','imgleft');});                    $("#imgright").animate({                    top:'0px',                    left:'110px',                    height:'228px',                    zIndex:'3',                    opacity:'1'                    },"1000",function(){                        $(".img_right").attr('id','imgmiddle');$("#imgright").attr('class','img_right');                        $("#imgleft").attr('class','img_left');                        $("#imgmiddle").attr('class','img_middle');//                      $(".div_left").delay(3000);//没有//                      var t = setTimeout($(".div_left").click(),5000);//不行//                      $(".div_left").click();                    });//此时不用id选择是因为前面过程导致出现了同名id//                  $("#temp").attr('id','ok');//取自己id再改自己id。。。。                }                $(".div_left").click(function a(){//                  alert("clicked");                    imgMove();                });            });        </script>    </head>    <body>        <div style="position: relative;margin: 0 auto;width: 706px;height: 228px;">            <img id="imgleft" class="img_left" src="img/11.jpg" />            <img id="imgmiddle" class="img_middle" src="img/1.jpg"/>            <img id="imgright" class="img_right" src="img/6.jpg"/>            <div class="div_left" style="width: 30%;height:100%;position: absolute;z-index: 100;"></div>            <div ondblclick="" onmouseover="" style="width: 40%;height:100%;position: absolute;left: 30%; z-index: 98"></div>            <div class="div_right" style="width: 30%;height:100%;position: absolute;left: 70%; z-index: 99;"></div>        </div>    </body></html>

chrome上运行效果，很糟糕的gif制作

阅读全文

0 0