整体思路：

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. linux sqlite3 相关

    数据库sqlite 1 用下载好的安装包安装 linux@ubuntu:~/sqlite3$ sudo dpkg -i libsqlite3-0_3.7.2-1ubuntu0.1_i386_1.deb ...

  2. QEMU KVM Libvirt手册(10): KVM的各种限制

    Overcommits KVM allows for both memory and disk space overcommit. However, hard errors resulting fro ...

  3. 最快效率求出乱序数组中第k小的数

    题目:以尽量高的效率求出一个乱序数组中按数值顺序的第k 的元素值 思路:这里很容易想到直接排序然后顺序查找,可以使用效率较高的快排,但是它的时间复杂度是O(nlgn),我们这里可以用一种简便的方法,不 ...

  4. [Swift]LeetCode5. 最长回文子串 | Longest Palindromic Substring

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  5. [Swift]LeetCode704. 二分查找 | Binary Search

    Given a sorted (in ascending order) integer array nums of nelements and a target value, write a func ...

  6. 分布式事务之如何基于RocketMQ的事务消息特性实现分布式系统的最终一致性？

    导读 在之前的文章中我们介绍了如何基于RocketMQ搭建生产级消息集群,以及2PC.3PC和TCC等与分布式事务相关的基本概念(没有读过的读者详见

  7. Redis Windows下查看版本号

    1.打开redis所在目录启动 redis-server 服务器端. 2.启动 redis-cli 客户端. 3.客户端输入:info 结果如下:

  8. WARNING: 'aclocal-1.14' is missing on your system.

    源码安装zabbix agent时进行到make install时报如下错误: WARNING: 'aclocal-1.14' is missing on your system. You shoul ...

  9. localStorage之本地储存

    一.定义json var employees = [{ "firstName":"Bill" , "lastName":"Gate ...

  10. 手工在Docker for mac上安装Kubernetes

    此文发布时间比较早,当前已经有更好的办法,请参考网页: https://github.com/AliyunContainerService/k8s-for-docker-desktop 以下为原文 通 ...