实现京东轮播图（一）

左手的ㄟ右手 2022-12-15 03:21 122阅读 0赞

jd-js部分JavaScript代码

var li = document.querySelectorAll(".banner .bnav li");  
var haha = document.querySelectorAll(".banner .haha");

for(let i=0;i<li.length;i++)\{  
li\[i\].onmouseover = function()\{  
hahaB(i)

}
    li[i].onmouseout = function(){
        hahaN(i)
    }

\}  
haha.onmouseover = function()\{  
haha.style.display = “block”;  
\}

function hahaB(e)\{  
haha\[e\].style.display = “block”;  
haha\[e\].style.zIndex = “66”;  
haha\[e\].onmouseover = function()\{  
haha\[e\].style.display = “block”;  
\}  
\}  
function hahaN(e)\{  
haha\[e\].style.display = “none”;  
haha\[e\].onmouseout = function()\{  
haha\[e\].style.display = “none”;  
\}  
\}

// 下拉列表

var xiala = document.querySelector(".xiala");  
var in1 = document.querySelector(".in1");

in1.onclick = function(eve)\{  
var e = eve || window.event;  
e.cancelBubble = true;  
xiala.style.display = “block”;  
in1.value = “”;  
\}  
in1.onblur = function(eve)\{  
var e = eve || window.event;  
e.cancelBubble = true;  
xiala.style.display = “none”;  
in1.value = “油”;  
\}  
xiala.onclick = function(eve)\{  
var e = eve || window.event;  
e.cancelBubble = true;  
xiala.style.display = “block”;  
in1.value = “油”;  
\}  
document.onclick = function()\{  
xiala.style.display = “none”;  
\}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzQzOTcxMg_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzQzOTcxMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8b7753320cff4e3396bed160d837a181.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关用jquery简单的实现京东轮播图效果

用jquery简单的实现京东轮播图效果\\ 标题 html部分 <!DOCTYPE html> <html lang="en"> <hea

小灰灰/ 2022年12月15日 14:06/ 0 赞/ 159 阅读

相关实现京东轮播图实现（二）

续上jd-JavaScript全部代码 function Banner()\{ this.img = document.querySelectorAll(".bann

痛定思痛。/ 2022年12月15日 03:21/ 0 赞/ 142 阅读

相关实现京东轮播图（一）

jd-js部分JavaScript代码 var li = document.querySelectorAll(".banner .bnav li"); var haha

左手的ㄟ右手/ 2022年12月15日 03:21/ 0 赞/ 123 阅读

相关 html轮播图京东效果,JavaScript仿京东轮播图效果

本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码，供大家参考，具体内容如下做了一个仿京东的轮播图，当然没有人家官网的精美啦。 ![3f7d657d

比眉伴天荒/ 2022年10月06日 04:56/ 0 赞/ 261 阅读

相关 JS+CSS 实现轮播图（一）

效果图简单思路代码效果图 ![这里写图片描述][20160726083021867] 简单思路： 1 布局框架

分手后的思念是犯贱/ 2022年09月24日 05:16/ 0 赞/ 143 阅读

相关原生js模拟实现京东轮播图

原生js模拟实现京东轮播图一、实现原理 1. 官网发现 2. opacity和z-index 3.定

系统管理员/ 2022年09月04日 06:48/ 0 赞/ 190 阅读

相关京东轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

你的名字/ 2022年06月13日 06:51/ 0 赞/ 189 阅读

相关 jQuery实现轮播图(一)

轮播概念图 ![这里写图片描述][SouthEast] 这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简

爱被打了一巴掌/ 2022年06月12日 13:45/ 0 赞/ 416 阅读

相关轮播图：京东为例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

末蓝、/ 2022年02月26日 02:50/ 0 赞/ 220 阅读

相关轮播图（一）

今天写一下一个比较通用的轮播图写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8

忘是亡心i/ 2021年11月24日 00:02/ 0 赞/ 260 阅读