整体思路：

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. 一次 HTTP 请求响应过程的完整解析

    因特网无疑是人类有史以来最伟大的设计,它互联了全球数亿台计算机.通讯设备,即便位于地球两端的用户也可在顷刻间完成通讯. 可以说『协议』是支撑这么一个庞大而复杂的系统有条不紊运作的核心,而所谓『协议』就 ...

  2. 连接池c3p0 ,Proxool ,Druid ,Tomcat Jdbc Pool对比测试

    这次所要做的测试是比较几种我们常用的数据库连接池的性能,他们分别是:c3p0 ,Proxool ,Druid ,Tomcat Jdbc Pool这四种,测试将采用统一的参数配置力求比较“公平”的体现统 ...

  3. http请求抓包神器-Fiddler（记录和检查你电脑的所有http通讯）

    Fiddler是做什么的,能帮助我们做什么? 1.能够监听http/httpS的流量,可以截获从浏览器或者客户端软件向服务器发送的http/https请求: 2.对截获之后的请求,我们还能够查看请求中 ...

  4. JDK 和 OpenJDK 的区别

    历史上的原因是,openjdk是jdk的开放原始码版本,以GPL协议的形式放出.在JDK7的时候,openjdk已经成为jdk7的主干开发,sun jdk7是在openjdk7的基础上发布的,其大部分 ...

  5. [Swift]LeetCode542. 01 矩阵 | 01 Matrix

    Given a matrix consists of 0 and 1, find the distance of the nearest 0 for each cell. The distance b ...

  6. [Swift]LeetCode853. 车队 | Car Fleet

    N cars are going to the same destination along a one lane road.  The destination is target miles awa ...

  7. SpringBoot前后端分离Instant时间戳自定义解析

    在SpringBoot项目中,前后端规定传递时间使用时间戳(精度ms). @Data public class Incident { @ApiModelProperty(value = "故 ...

  8. TDD in .NET Core - 简介

    本文很多内容来自选自TDD实例一书. 预备知识 最好有一些预备知识,例如xUnit,Moq,如何编写易于测试的代码,这些内容我都写了文章:https://www.cnblogs.com/cgzl/p/ ...

  9. java线程阻塞唤醒的四种方式

    java在多线程情况下,经常会使用到线程的阻塞与唤醒,这里就为大家简单介绍一下以下几种阻塞/唤醒方式与区别,不做详细的介绍与代码分析 suspend与resume Java废弃 suspend() 去 ...

  10. 微信小程序代码构成

    一.小程序代码 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部tab等. { "pages":[ "pages/ind ...