图片动态播放

最新推荐文章于 2021-05-30 21:28:24 发布

想想你说过的话

最新推荐文章于 2021-05-30 21:28:24 发布

阅读量1.1k

点赞数

分类专栏： web开发文章标签： jquery html css javascript

本文链接：https://blog.csdn.net/qq_35598978/article/details/78347522

版权

web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片动态切换展示

-涉及知识：
- 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>