整体思路：

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>

全部代码

jQuery实现简单的图片淡入淡出效果的更多相关文章

  1. 3-5 编程练习：jQuery实现简单的图片对应展示效果

    3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...

  2. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  3. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  4. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  5. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  6. React-Native ListView加载图片淡入淡出效果的组件

    今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...

  7. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  8. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

随机推荐

  1. Python练手例子（11）

    61.打印出杨辉三角形. #python3.7 from sys import stdout if __name__ == '__main__': a = [] for i in range(10): ...

  2. vue-router路径计算问题

    简书原文 昨天刚刚发表了一个前端跨域新方案尝试,今天在开发中就遇到的了问题. 起因 前端使用的是vue-router组件的history模式,但是由于我们的整个页面都是从static(静态资源站)lo ...

  3. .net core2.1 使用 dynamic 类型报错

    在net core2.0项目中使用 dynamic 无法编译通过 异常信息:缺少编译器要求的成员"Microsoft.CSharp.RuntimeBinder.CSharpArgumentI ...

  4. Spring的核心接口

    ContextLoaderListener接口 Create a new ContextLoaderListenerthat will create a web application context ...

  5. PHP算法之二分查找

    二分查找: 数组必须有序,且不重复. 一般实际工作中,很少有这样的数组,所以应用的很少,但是思想很好. 1 // 二分查找 2 $array = [10,14,23,33,45,56,65,77,89 ...

  6. Gin框架源码解析

    Gin框架源码解析 Gin框架是golang的一个常用的web框架,最近一个项目中需要使用到它,所以对这个框架进行了学习.gin包非常短小精悍,不过主要包含的路由,中间件,日志都有了.我们可以追着代码 ...

  7. directshow、 Emgucv入门

    本示例主要测试了directshow.Emgucv的视频流采集功能,其中Emgucv还实现了人脸的识别.示例源码下载 一.directshow的介绍 实现原理:directshow可以将摄像头的数据流 ...

  8. ES 02 - 部署Elasticsearch单机服务 + 部署中的常见问题

    目录 1 准备工作 1.1 安装JDK 1.2 下载安装包 1.3 创建elastic用户 2 启动ES服务 2.1 修改配置文件 2.2 启动服务 3 验证ES服务是否可用 4 关闭与重启服务 4. ...

  9. ASP.NET Core DI 手动获取注入对象

    ASP.NET Core DI 一般使用构造函数注入获取对象,比如在ConfigureServices配置注入后,通过下面方式获取: private IValueService _valueServi ...

  10. Linux~Sh脚本一点自己的总结

    从.netCore开源项目来看,eShopOnContainers来说,它的部署是跨平台的,可以部署在linux,docker上,在linux上运行它也可以写一些集成的小脚本,这是微信工程师为我们提供 ...