整体思路：
1.实现页面布局，设置css样式
2.用jQuery获取需要用到的变量
3.用jQuery为两个按钮绑定事件
一.页面布局：
<div class="d1">
//随便在网上找一张图片放入img中//
<img src="https://dummyimage.com/900x400/0000ff/ff" 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" 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>
全部代码
原文地址：https://www.cnblogs.com/98WDJ/p/10679228.html
时间： 2024-11-29 03:02:04