整体思路：

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. 根据excel表格字段生成sql语句

    根据excel表格字段生成sql语句 1.1 前言 根据excel表格字段生成sql语句主要是利用了excel的拼接函数 CONCATENATE .该实例主要以mysql脚本支持.实例需求如下:exc ...

  2. 浅析Diffie–Hellman

    一.作者 这个密钥交换方法,由惠特菲尔德·迪菲(Bailey Whitfield Diffie).马丁·赫尔曼(Martin Edward Hellman)于1976年发表. 二.说明 它是一种安全协 ...

  3. 快速理解Token，Cookie，Session

    在Web应用中,HTTP请求是无状态的.即:用户第一次发起请求,与服务器建立连接并登录成功后,为了避免每次打开一个页面都需要登录一下,就出现了cookie,Session. Cookie Cookie ...

  4. 北大开源全新中文分词工具包：准确率远超THULAC、结巴分词

    最近,北大开源了一个中文分词工具包,它在多个分词数据集上都有非常高的分词准确率.其中广泛使用的结巴分词误差率高达 18.55% 和 20.42,而北大的 pkuseg 只有 3.25% 与 4.32% ...

  5. [Swift]LeetCode296. 最佳开会地点 $ Best Meeting Point

    A group of two or more people wants to meet and minimize the total travel distance. You are given a ...

  6. [Swift]LeetCode347. 前K个高频元素 | Top K Frequent Elements

    Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums = [ ...

  7. [Swift]LeetCode667. 优美的排列 II | Beautiful Arrangement II

    Given two integers n and k, you need to construct a list which contains n different positive integer ...

  8. [Swift]LeetCode672. 灯泡开关 Ⅱ | Bulb Switcher II

    There is a room with n lights which are turned on initially and 4 buttons on the wall. After perform ...

  9. 使用javamelody进行web监控

    引入maven依赖 <dependency> <groupId>net.bull.javamelody</groupId> <artifactId>ja ...

  10. 代码覆盖率 (Code Coverage)从简到繁 (一)

    代码覆盖率(Code Coverage)是反映测试用例对被测软件覆盖程度的重要指标,也是衡量测试工作进展情况的重要指标.它也是对测试工作进行量化的重要指标之一,测试工作往往不如开发那样激动人心,一个重 ...