jQuery实现简单的图片淡出淡出效果

jQuery实现简单的图片淡出淡出效果

整体思路:

1.实现页面布局,设置css样式

2.用jQuery获取需要用到的变量

3.用jQuery为两个按钮绑定事件

一.页面布局:

 

<div class="d1">     //随便在网上找一张图片放入img中//      <img src="https://dummyimage.com/900x400/0000ff/ff" alt="" class="c1 c2">      <div class="d2">      <input type="button" value="<-" id="b1">      <input type="button" value="->" id="b2">      </div>  </div>
 <style>          body{              margin: 0 0 0 0;              height: 1000px;              width: 100%;            }          .d1{              position: absolute;              width: 100%;              height: 500px;              top: 50%;              margin-top: -250px;          }          .d2{               margin-left: 950px;          }          .d1 img{              margin-left: 50px;              position: relative;          }          .c1{                display: block;              padding-left: 500px;          }      </style>
css布局

我的css布局仅仅做了居中,各位可以做的更加美观性

 

二.jQuery获取需要用到的变量

 

 //imgList中放入你要加入的图片,记得要加入在div中定义的起始图片//  var imgList=['https://dummyimage.com/900x400/0000ff/ff','https://dummyimage.com/900x400/00/ff','https://dummyimage.com/900x400/ff0000/ff'];      var $imgEle=$('img');//获取div中的img      var nowSrc=imgList.indexOf($imgEle[0].src);//获取起始图片的索引值,后面函数要用到  //获取两个按钮      var $b1Ele=$('#b1');      var $b2Ele=$('#b2');

三.用jQuery为两个按钮绑定事件

首先写$b1El1的函数:

 

function f1(){         //先让当前图片淡出,时间为0.5毫秒         $imgEle.fadeOut(500);         //进行判断,如果索引值为0,让索引变成列表的最大值         if(nowSrc===0){             nowSrc=imgList.length-1;         }         //索引值不为0,进行--         else {             nowSrc--;         }        //因为我淡出的时间设置为0.5毫秒,所以我设置计时器,让下面的代码0.5毫秒后启动         t=setTimeout(function () {          //更换图片的src             $imgEle.attr('src',imgList[nowSrc]);          //图片淡入,时间为0.5毫秒             $imgEle.fadeIn(500);         },500);      }

 

为$b1El1绑定函数:

$b1Ele.on('click',f1);

同理可以写出按钮2的函数,并进行绑定

 function f2(){         $imgEle.fadeOut(500);         console.log(nowSrc);         if(nowSrc===imgList.length-1){             nowSrc=0;         }         else {             nowSrc++;         }         t2=setTimeout(function () {             $imgEle.attr('src',imgList[nowSrc]);         $imgEle.fadeIn(500);         },500);          t2=null      }      $b2Ele.on('click',f2);

下面是整体代码:

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Title</title>      <!--设置css样式-->      <style>          body{              margin: 0 0 0 0;              height: 1000px;              width: 100%;            }          .d1{              position: absolute;              width: 100%;              height: 500px;              top: 50%;              margin-top: -250px;          }          .d2{               margin-left: 950px;          }          .d1 img{              margin-left: 50px;              position: relative;          }          .c1{                display: block;              padding-left: 500px;          }      </style>        <script src="jQuery.js"></script>  </head>  <body>  <div class="d1">      <img src="https://dummyimage.com/900x400/0000ff/ff" alt="" class="c1 c2">      <div class="d2">      <input type="button" value="<-" id="b1">      <input type="button" value="->" id="b2">      </div>  </div>  <script>      var imgList=['https://dummyimage.com/900x400/0000ff/ff','https://dummyimage.com/900x400/00/ff','https://dummyimage.com/900x400/ff0000/ff'];      var $imgEle=$('img');      var nowSrc=imgList.indexOf($imgEle[0].src);      var $b1Ele=$('#b1');      var $b2Ele=$('#b2');        function f1(){         $imgEle.fadeOut(500);         console.log(nowSrc);         if(nowSrc===0){             nowSrc=imgList.length-1;         }         else {             nowSrc--;         }         t=setTimeout(function () {             $imgEle.attr('src',imgList[nowSrc]);         $imgEle.fadeIn(500);         },500);        }      function f2(){         $imgEle.fadeOut(500);         console.log(nowSrc);         if(nowSrc===imgList.length-1){             nowSrc=0;         }         else {             nowSrc++;         }         t2=setTimeout(function () {             $imgEle.attr('src',imgList[nowSrc]);         $imgEle.fadeIn(500);         },500);          t2=null      }      $b1Ele.on('click',f1);      $b2Ele.on('click',f2);  </script>  </body>  </html>
全部代码

 


转载自:https://www.cnblogs.com/98WDJ/p/10679228.html


回复列表



回复操作






   

发布时间:2019-04-10 09:37:39

修改时间:2019-04-10 09:37:39

查看次数:129

评论次数:0

TA的文章总数

95