整體思路：
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布局僅僅做了居中，各位可以做的更加美觀性
二.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>