jQuery实现简单的图片淡入淡出效果
整体思路：
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实现简单的图片淡入淡出效果的更多相关文章
- 3-5 编程练习：jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
- [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
- JQuery显示，隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- React-Native ListView加载图片淡入淡出效果的组件
今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
随机推荐
- tomcat +jenkios
来源:https://www.cnblogs.com/edward2013/p/5269465.html 1. 安装JDK JDK下载地址: http://www.oracle.com/techne ...
- XLua----热更新
一.xLua 环境配置 1).Xlua中 Plugin Xlua复制到 需要热更新的工程中---->Assets子目录 2).开启宏HOTFIX_ENABLE File---->bui ...
- Tensorboard可视化
# -*- coding: utf-8 -*-"""Created on Sun Nov 5 09:29:36 2017 @author: Admin"&quo ...
- [Swift]LeetCode794. 有效的井字游戏 | Valid Tic-Tac-Toe State
A Tic-Tac-Toe board is given as a string array board. Return True if and only if it is possible to r ...
- JavaDBF：保存行情实时数据到DBF文件
JavaDBF.jar其实很早都不再更新了,在日新月异的科技圈算得上远古上神的jar包,早该身归混沌了. 但我们的项目要用到,因为之前做的大宗期货交易行情的分析文件依然是dbf文件,没有办法,还得用 ...
- 【Docker】(4）搭建私有镜像仓库
[Docker](4)搭建私有镜像仓库 说明 1. 这里是通过阿里云,搭建Docker私有镜像仓库. 2. 这里打包的镜像是从官网拉下来的,并不是自己项目创建的新镜像,主要测试功能 一.搭建过程 首先 ...
- Solaris 11 配置IP地址
查看ipipadm show-addr 删除IP地址ipadm delete-addr net0/v4 配置IP地址ipadm create-addr –T static –a local=10.90 ...
- 使用ML.NET实现德州扑克牌型分类器
导读:ML.NET系列文章 本文将基于ML.NET v0.2预览版,重点介绍提取特征的思路和方法,实现德州扑克牌型分类器. 先介绍一下德州扑克的基本牌型,一手完整的牌共有五张扑克,10种牌型分别是: ...
- PHP中的反射
PHP中的反射 PHP5 具有完整的反射 API,添加了对类.接口.函数.方法和扩展进行反向工程的能力. 此外,反射 API 提供了方法来取出函数.类和方法中的文档注释. 请注意部分内部 API 丢失 ...
- Eclipse导入别人的项目报错：Unable to load annotation processor factory 'xxxxx.jar' for project
使用eclipse导入别人的项目时候,报错Unable to load annotation processor factory 'xxxxx.jar' for project. 解决方案 1.项目右 ...