整体思路：

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从入门到实践-9章类

    #!/user/bin/env python# -*- coding:utf-8 -*- # 类名采用的是驼峰命名法,即将类名中每个单词的首字母大写,而不使用下划线.# 对于每个类,都应紧跟在类定义后 ...

  2. Mysql postgresql 行列转换

    一.第一种 原数据表 转换后 DROP TABLE IF EXISTS tempdynamic; CREATE TEMPORARY TABLE tempdynamic ( SELECT p.fsPay ...

  3. 算法与数据结构(七) AOV网的拓扑排序(Swift版)

    今天博客的内容依然与图有关,今天博客的主题是关于拓扑排序的.拓扑排序是基于AOV网的,关于AOV网的概念,我想引用下方这句话来介绍: AOV网:在现代化管理中,人们常用有向图来描述和分析一项工程的计划 ...

  4. Nginx限流配置

    电商平台营销时候,经常会碰到的大流量问题,除了做流量分流处理,可能还要做用户黑白名单.信誉分析,进而根据用户ip信誉权重做相应的流量拦截.限制流量.Nginx自身有的请求限制模块ngx_http_li ...

  5. 深入理解Spring Redis的使用 (九)、通过Redis 实现 分布式锁 的 BUG，以及和数据库加锁的性能测试

    在多节点的项目中,经常要涉及到某些方法加锁的控制.而这个时候,简单易用的synchronized已经不能满足多节点的部署结构. 之前在项目中,用的比较多的是数据库的更新锁:for udpate.但是这 ...

  6. 版本号严格遵守semver语义化标准

    地址:http://semver.org/lang/zh-CN/?spm=a219a.7629140.0.0.GUJMXE 语义化版本 2.0.0 摘要 版本格式:主版本号.次版本号.修订号,版本号递 ...

  7. [SQL]LeetCode181. 超过经理收入的员工 | Employees Earning More Than Their Managers

    SQL架构 Create table If Not Exists Employee (Id ), Salary int, ManagerId int) Truncate table Employee ...

  8. [Swift]LeetCode223. 矩形面积 | Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  9. [Swift]LeetCode330. 按要求补齐数组 | Patching Array

    Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...

  10. [Swift]LeetCode778. 水位上升的泳池中游泳 | Swim in Rising Water

    On an N x N grid, each square grid[i][j]represents the elevation at that point (i,j). Now rain start ...