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

Posted 98wdj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery实现简单的图片淡出淡出效果相关的知识,希望对你有一定的参考价值。

整体思路:

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

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

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

一.页面布局:

 

<div class="d1">
   //随便在网上找一张图片放入img中//
    <img src="https://dummyimage.com/900x400/0000ff/ff"  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"  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>
全部代码

 

以上是关于jQuery实现简单的图片淡出淡出效果的主要内容,如果未能解决你的问题,请参考以下文章

jquery实现图片轮播淡入淡出效果

jQuery实现图片伦播效果(淡入淡出+左右切换)

Jquery的demo图片切换效果

使用 jquery 复制 bing 图片主页效果(淡入,然后淡出)

切片好的HTML放入DW中怎样有图片的淡入淡出效果?

html想做个文字淡入淡出的效果