jQuery实现简单的图片淡入淡出效果
生活随笔
收集整理的這篇文章主要介紹了
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;
100%;
}
.d1{
position: absolute;
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;
100%;
}
.d1{
position: absolute;
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实现简单的图片淡入淡出效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP ERP物料和SAP Cloud
- 下一篇： 消息人士：台积电德国晶圆厂将采用合资模式