文档章节

jQuery实现简单的图片淡入淡出效果

o
 osc_gu9d45li
发布于 2019/04/09 19:45
字数 649
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

整体思路:

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>
全部代码

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

CAN-DO
2014/02/11
308
0
【jQuery Demo】图片切换效果整理

图片的切换效果有很多,比较常见的有水平滚动、垂直滚动、淡入淡出等。我们接下来一一实现这些效果。 1.水平滚动 1) 我们先来实现HTML页面,代码很简单: 2)然后我们设置下CSS: / CSS Re...

叶超Luka
2017/11/20
0
0
10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换。 1. InnerFade 这是一个基于jQuery的小插件,可以实现页面内的元素淡入...

红薯
2011/12/15
2K
2
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
4K
4
jQuery 效果 - 淡入淡出

jQuery 效果 - 淡入淡出 通过 jQuery,您可以实现元素的淡入淡出效果。 点击展示 淡入/淡出 面板 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法。 jQuery fadeOut() 演示 jQuery fadeOut...

村长大神
2014/09/03
38
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
42分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
45分钟前
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
45分钟前
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
45分钟前
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
46分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部