jQuery实现图片渐入渐出切换展示效果

2023年6月21日发(作者：)

jQuery实现图⽚渐⼊渐出切换展⽰效果在这之前我们先看看我们要做的效果是什么样的：我们要图⽚在过“⼀定时间”后⾃动切换，在右下⾓处有⼩⽅块似数字1,2,3,4，这些数字是根据图⽚的个数⾃动出现的，当⿏标经过的时候数字颜⾊有⼀定的变化；下⾯我们来看看具体怎么实现。第⼀步：先写简单的html页⾯

页⾯代码解析：⾸先建⽴,,。⼆话不说先把要的三个基本的⽂件建好；然后把它引⼊到html中在head头部，其中注意 src="../js/"这个代码的意思，“../”表⽰跳出上级⽬录，然后在js⽂件夹下查找⽂件；在html页⾯中，我们在body中添加⼀个class为'pic-slider-io'的div，在div中有⼀个ul，li下⾯有四张图⽚，注意：图⽚事先设置好命名，为,......⽅便在编写；先看看这个时候什么都没做的页⾯样式：可以看到图⽚是⼀原来的⼤⼩平铺在页⾯上的，⼀默认ul li的⽅式展现在页⾯上的；现在我们要把它放在左下⾓；第⼆步：编写css样式来控制它⾸先控制div的展现：.pic-slider-io{ height : 200px; //设置div的⾼为200px； width : 800px;　　//设置div的宽为800px； float : letf; 　　//float 属性定义元素在哪个⽅向浮动。以往这个属性总应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。 position : relative;　　//position 属性规定元素的定位类型.这个属性定义建⽴元素布局所⽤的定位机制。任何元素都可以定位，不过绝对或固定元素会⽣成⼀个块级框，⽽不论该元素本⾝是什么类型。相对定　　　　　　　　　　　　　　　　 overflow : hidden; //overflow 属性规定当内容溢出元素框时发⽣的事情.hidden 内容会被修剪，并且其余内容是不可见的。}看⼀下页⾯样式：看到所有图⽚都在⼀起去了，图⽚的本⾝⼤于div的宽⾼，所以overflow：hidden这个就把其他溢出的就不显⽰了，不过这肯定不是我们想要的，不急继续；然后，我们现在控制ul的样式：.pic-slider-io ul{ margin : 0px; //设置上下左右的外边距都为0； padding : 0px;//设置上下左右的内边距都为0； 注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分别对应的是上，右，下，左； height : auto;　　//⾃适应⾼度，浏览器⾃动计算 width : 100%;　　//宽度为100% list-style-type : none; 　　　　//把li的点去掉 float : left;　　 display : block;　　//此元素将显⽰为块级元素，此元素前后会带有换⾏符 position : absolute;//⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。 top : 0; left : 0; z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更⾼堆叠顺序的元素总是会处于堆叠顺序较低的元素的前⾯。}这个时候图⽚就不显⽰了，页⾯看到的是把左上⾓那个点去掉了；再次，我们控制li的样式：.pic-slider-io ul li { height: auto; width: 100%; float: left; padding: 0px; margin: 0px;

overflow: hidden; z-index:1; //这个li层就⽐ul那个叠层更⾼}这个样式的设置主要是把li的叠层⾼于ul 就相当于浮在ul上⾯；最后，我们来看看img的样式：.pic-slider-io ul li img{

width: 100%; z-index:1;//设置图⽚和li在同⼀层上，这个应该没问题吧}现在我们来看看页⾯成什么样了：看到，经过样式设置，整个图⽚都显⽰出来了；第三步：编写在编写js的时候，我们要添加右下⽅的图⽚数字显⽰，我们事先把要添加的css写好如下：.pic-page-btn {//这是在⽗div中的⼦div样式，⽤于显⽰在右下⾓的数字承载模块 float: left; width: auto; height: 30px;

position: absolute;

bottom: 20px;

right: 20px; z-index: 99; //他的叠层⽐⽗级div还要⾼，把这个按钮样式放在图⽚之上}//位元素会相对于它.pic-page-btn span{ //这个是设置⼦div的数字样式 height: 30px; width: 30px; background-color: #999; display: block; float: left; line-height: 30px; text-align: center; color: #FFF; margin-right: 10px; cursor:pointer;}.pic-page-btn .current {//这是将要设置⿏标滑过改变其背景颜⾊ background-color: #1D5D76;}下⾯，我们来看看js的编写，在这⾥不是视频，就不⼀步⼀步的讲了，我把各个解释都注释在js代码中了js代码：$(function(){ $.scrollPic = function (options){ //定义了⼀个scrollPic函数，有⼀个传参，⽤于调⽤； /************************开始整个默认插件参数讲解*******************************/ //整个defaults以花括号包含的是默认的参数，调⽤此插件的只需要修改ele，Time，autoscroll即可； var defaults={ ele: '.pic-slider-io', //pic-slider-io是⼀个class，css中定义了其样式； Time : '2000', //Time是定义了滑动的时间； autoscroll : true //autoscroll设为true表⽰⾃动切换图⽚； }; /************************结束整个默认插件参数讲解*******************************/

//$.extend({},defaults, option)有{}主要是为了创建⼀个新对象，保留对象的默认值。 var opts = $.extend({}, defaults, options);

//$()可以理解为取这个执⾏，与$('.class1').click();类似表⽰，然后理解为赋值给PicObject； //或者这样理解,$()就是$('.pic-slider-io')，只不过（.pic-slider-io是个class作为参数，所以要()来表⽰）； var PicObject = $();

//('ul')，这个可以理解成$().find('ul'),因为其实就是取得的⼀个class， //相当于$('.pic-slider-io').find('ul');然后赋值给scrollList，所以整个就⽤scrollList来表⽰他； var scrollList = ('ul');

//同理('li')可以表⽰为$('.pic-slider-io').find('ul').find('li');所以这个是⼀层⼀层来查找的如果你看到html就会更加清晰； var listLi = ('li');

//图⽚的命名是,,这样的，index是⽤来表⽰图⽚的名字的初始化赋值为0； var index = 0;

//这是定义⼀个picTimer(⾃动切换函数)的函数； var picTimer;

//⼀个li中包含⼀个图⽚，所以这是查找有多少个图⽚，赋值给len； var len = ('li').length;

/*****************开始⾃动切换函数************************/ function picTimer(){ showPic(index);//调⽤showPic(index)函数(在下⾯) index++; if(index == len){//如果index的值等于len，就表⽰从第⼀张图⽚到最后⼀张图⽚切换完了，然后是index赋值为0重新开始 index=0; } } /*****************结束⾃动切换函数************************/

//setInterval() ⽅法可按照指定的周期（以毫秒计）来调⽤函数或计算表达式。 //setInterval() ⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭 //此判断为如果autoscroll为true，则不停的调⽤picTimer函数，以Time的速度调⽤ if(roll){ var time = setInterval(picTimer,); }

/*****************开始动画函数************************/ function showPic(index){//定义动画函数 //listLi是找到第⼀个li，然后隐藏他，listLi在var listLi = ('li');已经介绍了 (); //fadeIn() ⽅法使⽤淡⼊效果来显⽰被选元素，假如该元素是隐藏的。siblings()⽅法是遍历。 (index).fadeIn(500).siblings().hide(); //找到paging对应的css样式，如果与当前的index⼀致，则添加class为current的css样式，否则就移除。 (paging).eq(index).addClass('current').siblings().removeClass('current'); } /*****************结束动画函数************************/

//这是在class为pic-slider-io的div中添加⼀个class为pic-page-btn的⼦div。 //主要是设置右下⾓数字的承载 ('

');

//在这个class为pic-page-btn的⼦div中添加图⽚张数对应的数字个数，1,2,3，，，，， //从这可以看出来，数字不是⾃⼰⼀个个添得，是根据li的个数，也就是图⽚的个数⾃动⽣成的 for( i=1;i<=len;i++){ ('.pic-page-btn').append(''+i+''); }

//这个就是和上⾯讲listLi⼀样的 var paging = ('.pic-page-btn span');

//为相应的右下⾓的数字改变其背景颜⾊ (index).addClass('current');

}});在这我们差不多完成了图⽚的切换，然后我们在html中先调⽤默认的看⼀看：调⽤⽅式：看⼀下界⾯显⽰：看箭头所⽰，说明可以⾃动切换了图⽚；可是我们还有当⿏标在右下⾓1,2,3,4上滑过的时候，可以切换图⽚，所以我们就在js中加个事件就可以了：

//⿏标经过1、2、3、4的效果 (paging).mouseover(function(){ index = (paging).index($(this)); showPic(index); //调⽤showPic(index)函数。 }); //⿏标经过1、2、3、4的效果

//清除计时器 //当⿏标悬浮在1,2,3,4上⾯的时候，就相当于要切换图⽚了 //所以我们就要清除计时器，重新来过了 (function(){ clearInterval(time);//这个是相对于setInterva()的； },function(){ if(roll){ time = setInterval(picTimer,); }else{ clearInterval(time); } });把这段代码加如到js中，加到什么位置就不要说了吧！加到 (index).addClass('current');后⾯就可以了；这样整个这个图⽚切换的⼀个插件就算完成了；如果需要调⽤函数，可以修改ele,Timer,autoscroll.看⼀下带参数使⽤插件：好了，整个插件的讲述就算是完成了，希望⼤家可以从中学到知识，如有不⾜，还望谅解！（最后说⼀句，在整个js的编写时，最好在$(function(){});的最前⾯加个分号，防⽌与其他js冲突）

2023年6月21日发(作者：)

jQuery实现图⽚渐⼊渐出切换展⽰效果在这之前我们先看看我们要做的效果是什么样的：我们要图⽚在过“⼀定时间”后⾃动切换，在右下⾓处有⼩⽅块似数字1,2,3,4，这些数字是根据图⽚的个数⾃动出现的，当⿏标经过的时候数字颜⾊有⼀定的变化；下⾯我们来看看具体怎么实现。第⼀步：先写简单的html页⾯

页⾯代码解析：⾸先建⽴,,。⼆话不说先把要的三个基本的⽂件建好；然后把它引⼊到html中在head头部，其中注意 src="../js/"这个代码的意思，“../”表⽰跳出上级⽬录，然后在js⽂件夹下查找⽂件；在html页⾯中，我们在body中添加⼀个class为'pic-slider-io'的div，在div中有⼀个ul，li下⾯有四张图⽚，注意：图⽚事先设置好命名，为,......⽅便在编写；先看看这个时候什么都没做的页⾯样式：可以看到图⽚是⼀原来的⼤⼩平铺在页⾯上的，⼀默认ul li的⽅式展现在页⾯上的；现在我们要把它放在左下⾓；第⼆步：编写css样式来控制它⾸先控制div的展现：.pic-slider-io{ height : 200px; //设置div的⾼为200px； width : 800px;　　//设置div的宽为800px； float : letf; 　　//float 属性定义元素在哪个⽅向浮动。以往这个属性总应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本⾝是何种元素。 position : relative;　　//position 属性规定元素的定位类型.这个属性定义建⽴元素布局所⽤的定位机制。任何元素都可以定位，不过绝对或固定元素会⽣成⼀个块级框，⽽不论该元素本⾝是什么类型。相对定　　　　　　　　　　　　　　　　 overflow : hidden; //overflow 属性规定当内容溢出元素框时发⽣的事情.hidden 内容会被修剪，并且其余内容是不可见的。}看⼀下页⾯样式：看到所有图⽚都在⼀起去了，图⽚的本⾝⼤于div的宽⾼，所以overflow：hidden这个就把其他溢出的就不显⽰了，不过这肯定不是我们想要的，不急继续；然后，我们现在控制ul的样式：.pic-slider-io ul{ margin : 0px; //设置上下左右的外边距都为0； padding : 0px;//设置上下左右的内边距都为0； 注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分别对应的是上，右，下，左； height : auto;　　//⾃适应⾼度，浏览器⾃动计算 width : 100%;　　//宽度为100% list-style-type : none; 　　　　//把li的点去掉 float : left;　　 display : block;　　//此元素将显⽰为块级元素，此元素前后会带有换⾏符 position : absolute;//⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。 top : 0; left : 0; z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更⾼堆叠顺序的元素总是会处于堆叠顺序较低的元素的前⾯。}这个时候图⽚就不显⽰了，页⾯看到的是把左上⾓那个点去掉了；再次，我们控制li的样式：.pic-slider-io ul li { height: auto; width: 100%; float: left; padding: 0px; margin: 0px;

overflow: hidden; z-index:1; //这个li层就⽐ul那个叠层更⾼}这个样式的设置主要是把li的叠层⾼于ul 就相当于浮在ul上⾯；最后，我们来看看img的样式：.pic-slider-io ul li img{

width: 100%; z-index:1;//设置图⽚和li在同⼀层上，这个应该没问题吧}现在我们来看看页⾯成什么样了：看到，经过样式设置，整个图⽚都显⽰出来了；第三步：编写在编写js的时候，我们要添加右下⽅的图⽚数字显⽰，我们事先把要添加的css写好如下：.pic-page-btn {//这是在⽗div中的⼦div样式，⽤于显⽰在右下⾓的数字承载模块 float: left; width: auto; height: 30px;

position: absolute;

bottom: 20px;

right: 20px; z-index: 99; //他的叠层⽐⽗级div还要⾼，把这个按钮样式放在图⽚之上}//位元素会相对于它.pic-page-btn span{ //这个是设置⼦div的数字样式 height: 30px; width: 30px; background-color: #999; display: block; float: left; line-height: 30px; text-align: center; color: #FFF; margin-right: 10px; cursor:pointer;}.pic-page-btn .current {//这是将要设置⿏标滑过改变其背景颜⾊ background-color: #1D5D76;}下⾯，我们来看看js的编写，在这⾥不是视频，就不⼀步⼀步的讲了，我把各个解释都注释在js代码中了js代码：$(function(){ $.scrollPic = function (options){ //定义了⼀个scrollPic函数，有⼀个传参，⽤于调⽤； /************************开始整个默认插件参数讲解*******************************/ //整个defaults以花括号包含的是默认的参数，调⽤此插件的只需要修改ele，Time，autoscroll即可； var defaults={ ele: '.pic-slider-io', //pic-slider-io是⼀个class，css中定义了其样式； Time : '2000', //Time是定义了滑动的时间； autoscroll : true //autoscroll设为true表⽰⾃动切换图⽚； }; /************************结束整个默认插件参数讲解*******************************/

//$.extend({},defaults, option)有{}主要是为了创建⼀个新对象，保留对象的默认值。 var opts = $.extend({}, defaults, options);

//$()可以理解为取这个执⾏，与$('.class1').click();类似表⽰，然后理解为赋值给PicObject； //或者这样理解,$()就是$('.pic-slider-io')，只不过（.pic-slider-io是个class作为参数，所以要()来表⽰）； var PicObject = $();

//('ul')，这个可以理解成$().find('ul'),因为其实就是取得的⼀个class， //相当于$('.pic-slider-io').find('ul');然后赋值给scrollList，所以整个就⽤scrollList来表⽰他； var scrollList = ('ul');

//同理('li')可以表⽰为$('.pic-slider-io').find('ul').find('li');所以这个是⼀层⼀层来查找的如果你看到html就会更加清晰； var listLi = ('li');

//图⽚的命名是,,这样的，index是⽤来表⽰图⽚的名字的初始化赋值为0； var index = 0;

//这是定义⼀个picTimer(⾃动切换函数)的函数； var picTimer;

//⼀个li中包含⼀个图⽚，所以这是查找有多少个图⽚，赋值给len； var len = ('li').length;

/*****************开始⾃动切换函数************************/ function picTimer(){ showPic(index);//调⽤showPic(index)函数(在下⾯) index++; if(index == len){//如果index的值等于len，就表⽰从第⼀张图⽚到最后⼀张图⽚切换完了，然后是index赋值为0重新开始 index=0; } } /*****************结束⾃动切换函数************************/

//setInterval() ⽅法可按照指定的周期（以毫秒计）来调⽤函数或计算表达式。 //setInterval() ⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭 //此判断为如果autoscroll为true，则不停的调⽤picTimer函数，以Time的速度调⽤ if(roll){ var time = setInterval(picTimer,); }

/*****************开始动画函数************************/ function showPic(index){//定义动画函数 //listLi是找到第⼀个li，然后隐藏他，listLi在var listLi = ('li');已经介绍了 (); //fadeIn() ⽅法使⽤淡⼊效果来显⽰被选元素，假如该元素是隐藏的。siblings()⽅法是遍历。 (index).fadeIn(500).siblings().hide(); //找到paging对应的css样式，如果与当前的index⼀致，则添加class为current的css样式，否则就移除。 (paging).eq(index).addClass('current').siblings().removeClass('current'); } /*****************结束动画函数************************/

//这是在class为pic-slider-io的div中添加⼀个class为pic-page-btn的⼦div。 //主要是设置右下⾓数字的承载 ('

');

//在这个class为pic-page-btn的⼦div中添加图⽚张数对应的数字个数，1,2,3，，，，， //从这可以看出来，数字不是⾃⼰⼀个个添得，是根据li的个数，也就是图⽚的个数⾃动⽣成的 for( i=1;i<=len;i++){ ('.pic-page-btn').append(''+i+''); }

//这个就是和上⾯讲listLi⼀样的 var paging = ('.pic-page-btn span');

//为相应的右下⾓的数字改变其背景颜⾊ (index).addClass('current');

}});在这我们差不多完成了图⽚的切换，然后我们在html中先调⽤默认的看⼀看：调⽤⽅式：看⼀下界⾯显⽰：看箭头所⽰，说明可以⾃动切换了图⽚；可是我们还有当⿏标在右下⾓1,2,3,4上滑过的时候，可以切换图⽚，所以我们就在js中加个事件就可以了：

//⿏标经过1、2、3、4的效果 (paging).mouseover(function(){ index = (paging).index($(this)); showPic(index); //调⽤showPic(index)函数。 }); //⿏标经过1、2、3、4的效果

//清除计时器 //当⿏标悬浮在1,2,3,4上⾯的时候，就相当于要切换图⽚了 //所以我们就要清除计时器，重新来过了 (function(){ clearInterval(time);//这个是相对于setInterva()的； },function(){ if(roll){ time = setInterval(picTimer,); }else{ clearInterval(time); } });把这段代码加如到js中，加到什么位置就不要说了吧！加到 (index).addClass('current');后⾯就可以了；这样整个这个图⽚切换的⼀个插件就算完成了；如果需要调⽤函数，可以修改ele,Timer,autoscroll.看⼀下带参数使⽤插件：好了，整个插件的讲述就算是完成了，希望⼤家可以从中学到知识，如有不⾜，还望谅解！（最后说⼀句，在整个js的编写时，最好在$(function(){});的最前⾯加个分号，防⽌与其他js冲突）