整體思路: 1.實現頁面佈局,設置css樣式 2.用jQuery獲取需要用到的變數 3.用jQuery為兩個按鈕綁定事件 一.頁面佈局: <style> body{ margin: 0 0 0 0; height: 1000px; width: 100%; } .d1{ position: abso ...
整體思路:
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>全部代碼