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

来源：cnblogs　　作者：日天达人　　时间：2019/4/10 8:52:56　　对本文有异议

整体思路：

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>

全部代码

原文链接：http://www.cnblogs.com/98WDJ/p/10679228.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章