当前位置: 开发笔记 > 编程语言 > 正文

html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果

作者：bankq | 来源：互联网 | 2023-09-16 19:40

图片轮播有很多种方式，这里采用其中的淡入淡出形式js原生和jQuery都可以实现，jquery因为封装了很多用法，所以用起来就简单许多&#

图片轮播有很多种方式&＃xff0c;这里采用其中的淡入淡出形式

js原生和jQuery都可以实现&＃xff0c;jquery因为封装了很多用法&＃xff0c;所以用起来就简单许多&＃xff0c;转换成js使用&＃xff0c;其实也就是用js原生模拟出这些用法。

但不管怎样&＃xff0c;构造一个最基本的表现层是必须的

简单的图片轮播一般由几个部分构成。

对于淡入淡出式

1.首先是个外围部分(其实也就是最外边的整体wrapper)

2.接着就是你设置图片轮播的地方(也就是一个banner吧)

3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)

4.然后是一个透明背景层&＃xff0c;放在图片底部

5.然后是一个图片描述info层&＃xff0c;放在透明背景层的左下角(div 或 ul-->li)

6.然后是一个按钮层&＃xff0c;用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

7.当然了&＃xff0c;有些时候还在图片两端放两个箭头 ,指示图片轮播方向(这里先不用&＃xff0c;如果要使用也同理)

由此&＃xff0c;可以先构造出html结构

图片部分的alt说明即为infoList部分的信息内容&＃xff0c;有些时候就可以绑定一下下。要注意的是&＃xff0c;imgList中图片的宽度和高度最后马上设定&＃xff0c;如果在css中才统一设定会变慢一些。

我给三个部分的active都添加的对应的on类&＃xff0c;实际使用的时候可能不需要那么多active

接下来给它设置一下css样式

body,div,ul,li,a,img{margin: 0;padding: 0;}

ul,li{list-style: none;}

a{text-decoration: none;}

.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

.banner{width: 400px;height: 200px;overflow: hidden;}

.imgList{width:400px;height:200px;z-index: 10;}

.imgList li{display: none;}

.imgList .imgOn{display: inline;}

.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity&＃61;40);background: black;}

.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

.infoList li{display: none;}

.infoList .infoOn{display: inline;color: white;}

.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

.indexList .indexOn{background: red;font-weight: bold;color: white;}

说明一下&＃xff1a;

1、banner即为图片轮播的范围&＃xff0c;这里设定为宽400高200&＃xff0c;图片的ul外围也如此设置。

2、要显示active项&＃xff0c;所以先统一所有li设置display:none,再添加个on类设置 display:inline

3、因为当使用jquery的fadeIn()时&＃xff0c;是变化为display:list-item,所以要在banner那里加上overflow:hidden ,不然如果快速切换图片的话&＃xff0c;整体图片高度会超出所给的高度。

4、要注意给每个部分添加 z-index值&＃xff0c;防止被覆盖无法展现出来的现象

写到这里&＃xff0c;先检查一下页面是否已经正确显示出第一项。如果已经显示好&＃xff0c;再增添js处理部分。

一、jQuery方式

1.有一个当前图片对应的标号 curIndex &＃61; 0;

2.默认会自动轮播&＃xff0c;所以默认给其添加

var autoChange &＃61; setInterval(function(){

if(curIndex <$(".imgList li").length-1){

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

默认curIndex自增,之后重置为0

3.其中changeTo()函数切换

function changeTo(num){

$(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");

$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

}

看着办吧..

4.然后当鼠标滑入滑出右下角的下标时也要处理

$(".indexList").find("li").each(function(item){

$(this).hover(function(){

clearInterval(autoChange);

changeTo(item);

curIndex &＃61; item;

},function(){

autoChange &＃61; setInterval(function(){

if(curIndex <$(".imgList li").length-1){

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

});

滑入清除定时器&＃xff0c;并进行图片切换处理。然后设置curIndex为当前item(这个要注意别忘了)

滑出重置定时器&＃xff0c;还原默认状态了

这样一来&＃xff0c;淡入淡出就完成了。

完整代码

图片轮播 jq(淡入淡出)

body,div,ul,li,a,img{margin: 0;padding: 0;}

ul,li{list-style: none;}

a{text-decoration: none;}

.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

.banner{width: 400px;height: 200px;overflow: hidden;}

.imgList{width:400px;height:200px;z-index: 10;}

.imgList li{display: none;}

.imgList .imgOn{display: inline;}

.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity&＃61;40);background: black;}

.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

.infoList li{display: none;}

.infoList .infoOn{display: inline;color: white;}

.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

.indexList .indexOn{background: red;font-weight: bold;color: white;}

var curIndex &＃61; 0; //当前index

// alert(imgLen);

// 定时器自动变换2.5秒每次

var autoChange &＃61; setInterval(function(){

if(curIndex <$(".imgList li").length-1){

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

$(".indexList").find("li").each(function(item){

$(this).hover(function(){

clearInterval(autoChange);

changeTo(item);

curIndex &＃61; item;

},function(){

autoChange &＃61; setInterval(function(){

if(curIndex <$(".imgList li").length-1){

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

});

function changeTo(num){

$(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");

$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

}

二、js原生方式

原生方式大致来说就是模拟jquery

因为我用了太多的class,所以要增加一些class的处理函数(可以用id&＃xff0c;应该会更便捷)

通过class名取标签元素(注意了&＃xff0c;因为现在我只针对于标签有一个class的来说&＃xff0c;多个class应该会出错)

//通过class获取节点

function getElementsByClassName(className){

var classArr &＃61; [];

var tags &＃61; document.getElementsByTagName(&＃39;*&＃39;);

for(var item in tags){

if(tags[item].nodeType &＃61;&＃61; 1){

if(tags[item].getAttribute(&＃39;class&＃39;) &＃61;&＃61; className){

classArr.push(tags[item]);

}

return classArr; //返回

}

模拟jq的addClass和removeClass

// 判断obj是否有此class

function hasClass(obj,cls){ //class位于单词边界

return obj.className.match(new RegExp(&＃39;(\\s|^)&＃39; &＃43; cls &＃43; &＃39;(\\s|$)&＃39;));

}

//给 obj添加class

function addClass(obj,cls){

if(!this.hasClass(obj,cls)){

obj.className &＃43;&＃61; cls;

}

//移除obj对应的class

function removeClass(obj,cls){

if(hasClass(obj,cls)){

var reg &＃61; new RegExp(&＃39;(\\s|^)&＃39; &＃43; cls &＃43; &＃39;(\\s|$)&＃39;);

obj.className &＃61; obj.className.replace(reg,&＃39;&＃39;);

}

再模拟jq的fadeIn和fadeOut函数

//淡入处理函数

function fadeIn(elem){

setOpacity(elem,0); //初始全透明

for(var i &＃61; 0;i<&＃61;20;i&＃43;&＃43;){ //透明度改变 20 * 5 &＃61; 100

(function(){

var level &＃61; i * 5; //透明度每次变化值

setTimeout(function(){

setOpacity(elem, level)

},i*25); //i * 25 即为每次改变透明度的时间间隔&＃xff0c;自行设定

})(i); //每次循环变化一次

}

//淡出处理函数

function fadeOut(elem){

for(var i &＃61; 0;i<&＃61;20;i&＃43;&＃43;){ //透明度改变 20 * 5 &＃61; 100

(function(){

var level &＃61; 100 - i * 5; //透明度每次变化值

setTimeout(function(){

setOpacity(elem, level)

},i*25); //i * 25 即为每次改变透明度的时间间隔&＃xff0c;自行设定

})(i); //每次循环变化一次

}

其中设置透明度函数的处理形式

//设置透明度

function setOpacity(elem,level){

if(elem.filters){

elem.style.filter &＃61; "alpha(opacity&＃61;"&＃43;level&＃43;")";

}else{

elem.style.opacity &＃61; level / 100;

}

然后就是基本部分的用法了

先初始化经常用到的变量以及图片的自动切换

var curIndex &＃61; 0, //当前index

imgArr &＃61; getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组

imgLen &＃61; imgArr.length,

infoArr &＃61; getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组

indexArr &＃61; getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

// 定时器自动变换2.5秒每次

var autoChange &＃61; setInterval(function(){

if(curIndex

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

//调用添加事件处理

addEvent();

其中的changeTo就是处理函数&＃xff0c;addEvent就是给右下角的那些按钮设定事件处理

//变换处理函数

function changeTo(num){

//设置image

var curImg &＃61; getElementsByClassName("imgOn")[0];

fadeOut(curImg); //淡出当前 image

removeClass(curImg,"imgOn");

addClass(imgArr[num],"imgOn");

fadeIn(imgArr[num]); //淡入目标 image

//设置image 的 info

var curInfo &＃61; getElementsByClassName("infoOn")[0];

removeClass(curInfo,"infoOn");

addClass(infoArr[num],"infoOn");

//设置image的控制下标 index

var _curIndex &＃61; getElementsByClassName("indexOn")[0];

removeClass(_curIndex,"indexOn");

addClass(indexArr[num],"indexOn");

}

//给右下角的图片index添加事件处理

function addEvent(){

for(var i&＃61;0;i

//闭包防止作用域内活动对象item的影响

(function(_i){

//鼠标滑过则清除定时器&＃xff0c;并作变换处理

indexArr[_i].onmouseover &＃61; function(){

clearTimeout(autoChange);

changeTo(_i);

curIndex &＃61; _i;

};

//鼠标滑出则重置定时器处理

indexArr[_i].onmouseout &＃61; function(){

autoChange &＃61; setInterval(function(){

if(curIndex

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

};

})(i);

}

如此一来&＃xff0c;原生版的也完成了

完整代码

图片轮播 js原生(淡入淡出)

body,div,ul,li,a,img{margin: 0;padding: 0;}

ul,li{list-style: none;}

a{text-decoration: none;}

.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

.banner{width: 400px;height: 200px;overflow: hidden;}

.imgList{width:400px;height:200px;z-index: 10;}

.imgList li{display: none;}

.imgList .imgOn{display: inline;}

.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity&＃61;40);background: black;}

.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

.infoList li{display: none;}

.infoList .infoOn{display: inline;color: white;}

.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

.indexList .indexOn{background: red;font-weight: bold;color: white;}

var curIndex &＃61; 0, //当前index

imgArr &＃61; getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组

imgLen &＃61; imgArr.length,

infoArr &＃61; getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组

indexArr &＃61; getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

// 定时器自动变换2.5秒每次

var autoChange &＃61; setInterval(function(){

if(curIndex

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

//调用添加事件处理

addEvent();

//给右下角的图片index添加事件处理

function addEvent(){

for(var i&＃61;0;i

//闭包防止作用域内活动对象item的影响

(function(_i){

//鼠标滑过则清除定时器&＃xff0c;并作变换处理

indexArr[_i].onmouseover &＃61; function(){

clearTimeout(autoChange);

changeTo(_i);

curIndex &＃61; _i;

};

//鼠标滑出则重置定时器处理

indexArr[_i].onmouseout &＃61; function(){

autoChange &＃61; setInterval(function(){

if(curIndex

curIndex &＃43;&＃43;;

}else{

curIndex &＃61; 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

};

})(i);

}

//变换处理函数

function changeTo(num){

//设置image

var curImg &＃61; getElementsByClassName("imgOn")[0];

fadeOut(curImg); //淡出当前 image

removeClass(curImg,"imgOn");

addClass(imgArr[num],"imgOn");

fadeIn(imgArr[num]); //淡入目标 image

//设置image 的 info

var curInfo &＃61; getElementsByClassName("infoOn")[0];

removeClass(curInfo,"infoOn");

addClass(infoArr[num],"infoOn");

//设置image的控制下标 index

var _curIndex &＃61; getElementsByClassName("indexOn")[0];

removeClass(_curIndex,"indexOn");

addClass(indexArr[num],"indexOn");

}

//设置透明度

function setOpacity(elem,level){

if(elem.filters){

elem.style.filter &＃61; "alpha(opacity&＃61;"&＃43;level&＃43;")";

}else{

elem.style.opacity &＃61; level / 100;

}

//淡入处理函数

function fadeIn(elem){

setOpacity(elem,0); //初始全透明

for(var i &＃61; 0;i<&＃61;20;i&＃43;&＃43;){ //透明度改变 20 * 5 &＃61; 100

(function(){

var level &＃61; i * 5; //透明度每次变化值

setTimeout(function(){

setOpacity(elem, level)

},i*25); //i * 25 即为每次改变透明度的时间间隔&＃xff0c;自行设定

})(i); //每次循环变化一次

}

//淡出处理函数

function fadeOut(elem){

for(var i &＃61; 0;i<&＃61;20;i&＃43;&＃43;){ //透明度改变 20 * 5 &＃61; 100

(function(){

var level &＃61; 100 - i * 5; //透明度每次变化值

setTimeout(function(){

setOpacity(elem, level)

},i*25); //i * 25 即为每次改变透明度的时间间隔&＃xff0c;自行设定

})(i); //每次循环变化一次

}

//通过class获取节点

function getElementsByClassName(className){

var classArr &＃61; [];

var tags &＃61; document.getElementsByTagName(&＃39;*&＃39;);

for(var item in tags){

if(tags[item].nodeType &＃61;&＃61; 1){

if(tags[item].getAttribute(&＃39;class&＃39;) &＃61;&＃61; className){

classArr.push(tags[item]);

}

return classArr; //返回

}

// 判断obj是否有此class

function hasClass(obj,cls){ //class位于单词边界

return obj.className.match(new RegExp(&＃39;(\\s|^)&＃39; &＃43; cls &＃43; &＃39;(\\s|$)&＃39;));

}

//给 obj添加class

function addClass(obj,cls){

if(!this.hasClass(obj,cls)){

obj.className &＃43;&＃61; cls;

}

//移除obj对应的class

function removeClass(obj,cls){

if(hasClass(obj,cls)){

var reg &＃61; new RegExp(&＃39;(\\s|^)&＃39; &＃43; cls &＃43; &＃39;(\\s|$)&＃39;);

obj.className &＃61; obj.className.replace(reg,&＃39;&＃39;);

}

以上所述就是本文的全部内容了&＃xff0c;希望大家能够喜欢。

推荐阅读

function
canvas.toDataURL('image/png')报错处理方法

前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。 ... [详细]

蜡笔小新 2023-12-09 09:43:31
bit
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
include
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
web
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
default
python创建一个窗口_等一个大佬啊要求用python创建一个窗口，窗口按钮功能是创建一个球体或立方体。明天上课之前交给我...

展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]

蜡笔小新 2023-12-13 16:26:09
js
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
default
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
web
to_a和to_ary有什么区别？ - What's the difference between to_a and to_ary?

Whatsthedifferencebetweento_aandto_ary?to_a和to_ary有什么区别？ ... [详细]

蜡笔小新 2023-12-11 19:30:04
web
《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序

JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ... [详细]

蜡笔小新 2023-12-11 11:40:52
function
mysql存储过程 begin_MySQL存储过程的BEGIN和END

无详细内容MySQLmysqlmysqlDELIMITERmysqlCREATEFUNCTIONmyProc(costDECIMAL(10,2))-RETURNSDECIMAL(1 ... [详细]

蜡笔小新 2023-12-11 11:17:42
function
CSS3 animation动画属性详解及用法

本文详细介绍了CSS3 animation动画的各种属性及用法，包括关键帧动画、动画名称、动画时间、动画曲线、动画延迟、动画播放次数、动画状态和动画前后的状态等。通过本文的学习，读者可以深入了解CSS3 animation动画的使用方法。 ... [详细]

蜡笔小新 2023-12-11 08:47:46
web
SpringBoot整合SpringSecurity+JWT实现单点登录

SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]

蜡笔小新 2023-12-11 08:21:41
header
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
default
Jboss的EJB部署描述符standardjaws.xml配置步骤详解

本文详细介绍了Jboss的EJB部署描述符standardjaws.xml的配置步骤，包括映射CMP实体EJB、数据源连接池的获取以及数据库配置等内容。 ... [详细]

蜡笔小新 2023-12-09 18:15:53
default
com.evernote.android.job.JobRequest.getTransientExtras()方法的使用及代码示例

本文整理了Java中com.evernote.android.job.JobRequest.getTransientExtras()方法的一些代码示例，展示了 ... [详细]

蜡笔小新 2023-12-09 10:33:37

bankq

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章