整体思路:
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>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论