奇奇锋

小白项目-JavaScript实现轮播特效


小白项目-JavaScript实现轮播特效
加油吧

  1 doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Documenttitle>
  6     <link rel="stylesheet" href="css/style.css">
  7 head>
  8 <body>
  9     <div class="main" id="main">
 10         <div class="menu-box">
 11         div>
 12         
 13         <div class="sub-menu hide" id="sub-menu">
 14             <div class="inner-box">
 15                 <div class="sub-inner-box">
 16                     <div class="title">手机、配件div>
 17                     <div class="sub-row">
 18                         <span class="bold mr10">手机通讯：span>
 19                         <a href="">手机a>
 20                         <span class="ml10 mr10">/span>
 21                         <a href="">手机维修a>
 22                         <span class="ml10 mr10">/span>
 23                         <a href="">以旧换新a>
 24                     div>
 25                     <div class="sub-row">
 26                         <span class="bold mr10">手机配件：span>
 27                         <a href="">手机壳a>
 28                         <span class="ml10 mr10">/span>
 29                         <a href="">手机存储卡a>
 30                         <span class="ml10 mr10">/span>
 31                         <a href="">数据线a>
 32                         <span class="ml10 mr10">/span>
 33                         <a href="">充电器a>
 34                         <span class="ml10 mr10">/span>
 35                         <a href="">电池a>
 36                     div>
 37                     <div class="sub-row">
 38                         <span class="bold mr10">运营商：span>
 39                         <a href="">中国联通a>
 40                         <span class="ml10 mr10">/span>
 41                         <a href="">中国移动a>
 42                         <span class="ml10 mr10">/span>
 43                         <a href="">中国电信a>
 44                     div>
 45                     <div class="sub-row">
 46                         <span class="bold mr10">智能设备：span>
 47                         <a href="">智能手环a>
 48                         <span class="ml10 mr10">/span>
 49                         <a href="">智能家居a>
 50                         <span class="ml10 mr10">/span>
 51                         <a href="">智能手表a>
 52                         <span class="ml10 mr10">/span>
 53                         <a href="">其他配件a>
 54                     div>
 55                     <div class="sub-row">
 56                         <span class="bold mr10">娱乐：span>
 57                         <a href="">耳机a>
 58                         <span class="ml10 mr10">/span>
 59                         <a href="">音响a>
 60                         <span class="ml10 mr10">/span>
 61                         <a href="">收音机a>
 62                         <span class="ml10 mr10">/span>
 63                         <a href="">麦克风a>
 64                     div>
 65                 div>
 66             div>
 67             <div class="inner-box">
 68                 <div class="sub-inner-box">
 69                     <div class="title">电脑div>
 70                     <div class="sub-row">
 71                        <span class="bold mr10">电脑：span>
 72                        <a href="">笔记本a>
 73                        <span class="ml10 mr10">/span>
 74                        <a href="">平板a>
 75                        <span class="ml10 mr10">/span>
 76                        <a href="">一体机a>
 77                     div>
 78                     <div class="sub-row">
 79                        <span class="bold mr10">电脑配件：span>
 80                        <a href="">显示器a>
 81                        <span class="ml10 mr10">/span>
 82                        <a href="">CPUa>
 83                        <span class="ml10 mr10">/span>
 84                        <a href="">主板a>
 85                        <span class="ml10 mr10">/span>
 86                        <a href="">硬盘a>
 87                        <span class="ml10 mr10">/span>
 88                        <a href="">电源a>
 89                        <span class="ml10 mr10">/span>
 90                        <a href="">显卡a>
 91                        <span class="ml10 mr10">/span>
 92                        <a href="">其他配件a>
 93                     div>
 94                     <div class="sub-row">
 95                        <span class="bold mr10">游戏设备：span>
 96                        <a href="">游戏机a>
 97                        <span class="ml10 mr10">/span>
 98                        <a href="">耳机a>
 99                        <span class="ml10 mr10">/span>
100                        <a href="">游戏软件a>
101                     div>
102                     <div class="sub-row">
103                        <span class="bold mr10">网络产品：span>
104                        <a href="">路由器a>
105                        <span class="ml10 mr10">/span>
106                        <a href="">网络机顶盒a>
107                        <span class="ml10 mr10">/span>
108                        <a href="">交换机a>
109                        <span class="ml10 mr10">/span>
110                        <a href="">存储卡a>
111                        <span class="ml10 mr10">/span>
112                        <a href="">网卡a>
113                     div>
114                     <div class="sub-row">
115                        <span class="bold mr10">外部产品：span>
116                        <a href="">鼠标a>
117                        <span class="ml10 mr10">/span>
118                        <a href="">键盘a>
119                        <span class="ml10 mr10">/span>
120                        <a href="">U盘a>
121                        <span class="ml10 mr10">/span>
122                        <a href="">移动硬盘a>
123                        <span class="ml10 mr10">/span>
124                        <a href="">鼠标垫a>
125                        <span class="ml10 mr10">/span>
126                        <a href="">电脑清洁a>
127                     div>
128                 div>
129             div>
130             <div class="inner-box">
131                 <div class="sub-inner-box">
132                     <div class="title">家用电器div>
133                     <div class="sub-row">
134                        <span class="bold mr10">电视：span>
135                        <a href="">国产品牌a>
136                        <span class="ml10 mr10">/span>
137                        <a href="">韩国品牌a>
138                        <span class="ml10 mr10">/span>
139                        <a href="">欧美品牌a>
140                     div>
141                     <div class="sub-row">
142                        <span class="bold mr10">空调：span>
143                        <a href="">显示器a>
144                        <span class="ml10 mr10">/span>
145                        <a href="">柜式a>
146                        <span class="ml10 mr10">/span>
147                        <a href="">中央a>
148                        <span class="ml10 mr10">/span>
149                        <a href="">壁挂式a>
150                     div>
151                     <div class="sub-row">
152                        <span class="bold mr10">冰箱：span>
153                        <a href="">多门a>
154                        <span class="ml10 mr10">/span>
155                        <a href="">对开门a>
156                        <span class="ml10 mr10">/span>
157                        <a href="">三门a>
158                        <span class="ml10 mr10">/span>
159                        <a href="">双门a>
160                     div>
161                     <div class="sub-row">
162                        <span class="bold mr10">洗衣机：span>
163                        <a href="">滚筒式洗衣机a>
164                        <span class="ml10 mr10">/span>
165                        <a href="">迷你洗衣机a>
166                        <span class="ml10 mr10">/span>
167                        <a href="">洗烘一体机a>
168                     div>
169                     <div class="sub-row">
170                        <span class="bold mr10">厨房电器：span>
171                        <a href="">油烟机a>
172                        <span class="ml10 mr10">/span>
173                        <a href="">洗碗机a>
174                        <span class="ml10 mr10">/span>
175                        <a href="">燃气灶a>
176                     div>
177                 div>
178             div>
179             <div class="inner-box">
180                 <div class="sub-inner-box">
181                     <div class="title">家具div>
182                     <div class="sub-row">
183                        <span class="bold mr10">家纺：span>
184                        <a href="">被子a>
185                        <span class="ml10 mr10">/span>
186                        <a href="">枕头a>
187                        <span class="ml10 mr10">/span>
188                        <a href="">四件套a>
189                        <span class="ml10 mr10">/span>
190                        <a href="">床垫a>
191                     div>
192                     <div class="sub-row">
193                        <span class="bold mr10">灯具：span>
194                        <a href="">台灯a>
195                        <span class="ml10 mr10">/span>
196                        <a href="">顶灯a>
197                        <span class="ml10 mr10">/span>
198                        <a href="">节能灯a>
199                        <span class="ml10 mr10">/span>
200                        <a href="">应急灯a>
201                     div>
202                     <div class="sub-row">
203                        <span class="bold mr10">厨具：span>
204                        <a href="">烹饪锅具a>
205                        <span class="ml10 mr10">/span>
206                        <a href="">餐具a>
207                        <span class="ml10 mr10">/span>
208                        <a href="">菜板刀具a>
209                     div>
210                     <div class="sub-row">
211                        <span class="bold mr10">家装：span>
212                        <a href="">地毯a>
213                        <span class="ml10 mr10">/span>
214                        <a href="">沙发垫套a>
215                        <span class="ml10 mr10">/span>
216                        <a href="">装饰字画a>
217                        <span class="ml10 mr10">/span>
218                        <a href="">照片墙a>
219                        <span class="ml10 mr10">/span>
220                        <a href="">窗帘a>
221                     div>
222                     <div class="sub-row">
223                        <span class="bold mr10">生活日用：span>
224                        <a href="">收纳用品a>
225                        <span class="ml10 mr10">/span>
226                        <a href="">浴室用品a>
227                        <span class="ml10 mr10">/span>
228                        <a href="">雨伞雨衣a>
229                     div>
230                 div>
231             div>
232         div>
233         
234         <div class="menu-content" id="menu-content">
235             <div class="menu-item">
236                 <a href="">
237                     <span>手机、配件span>
238                     <i class="icon">i>
239                 a>
240             div>
241             <div class="menu-item">
242                 <a href="">
243                     <span>电脑span>
244                     <i class="icon">i>
245                 a>
246             div>
247             <div class="menu-item">
248                 <a href="">
249                     <span>家用电器span>
250                     <i class="icon">i>
251                 a>
252             div>
253             <div class="menu-item">
254                 <a href="">
255                     <span>家具span>
256                     <i class="icon">i>
257                 a>
258             div>
259         div>
260         <div class="banner" id="banner">
261             <a href="">
262                 <div class="banner-slide slide1 slide-active">div>
263             a>
264             <a href="">
265                 <div class="banner-slide slide2">div>
266             a>
267             <a href="">
268                 <div class="banner-slide slide3">div>
269             a>
270         div>
271         <a href="javascript:void(0)" class="button prev" id="prev">a>
272         <a href="javascript:void(0)" class="button next" id="next">a>
273         <div class="dots" id="dots">
274             <span class="active">span>
275             <span>span>
276             <span>span>
277         div>
278     div>
279     <script src="js/script.js">script>
280 body>
281 html>

html

  1 *{
  2     margin:0;
  3     padding:0;
  4 }
  5 
  6 @font-face {font-family: 'iconfont';
  7     src: url('../img/font/iconfont.eot'); 
  8     src: url('../img/font/iconfont.eot') format('embedded-opentype'),
  9     url('../img/font/iconfont.woff') format('woff'),
 10     url('../img/font/iconfont.ttf') format('truetype'),
 11     url('../img/font/iconfont.svg#iconfont') format('svg');
 12 }
 13 
 14 a{
 15     text-decoration: none;
 16 }
 17 
 18 a:link,a:visited{
 19     color:#5e5e5e;
 20 }
 21 
 22 body{
 23     font-family:"微软雅黑";
 24     color: #14191e;
 25 }
 26 
 27 .main{
 28     width:1200px;
 29     height:460px;
 30     margin:30px auto;
 31     position:relative;
 32     overflow:hidden;
 33 }
 34 
 35 .banner{
 36     width:1200px;
 37     height:460px;
 38     overflow:hidden;
 39     position:relative;
 40 }
 41 
 42 .banner-slide{
 43     width:1200px;
 44     height:460px;
 45     background-repeat:no-repeat;
 46     float:left;
 47     display:none;
 48 }
 49 
 50 .slide-active{
 51     display:block;
 52 }
 53 
 54 .slide1{
 55     background-image:url(../img/bg1.jpg);
 56 }
 57 
 58 .slide2{
 59     background-image:url(../img/bg2.jpg);
 60 }
 61 
 62 .slide3{
 63     background-image:url(../img/bg3.jpg);
 64 }
 65 
 66 .button{
 67     position: absolute;
 68     transform:rotate(180deg);
 69     top: 50%;
 70     left: 244px;
 71     height: 80px;
 72     width: 40px;
 73     margin-top:-40px;
 74     background:url(../img/arrow.png) center center no-repeat;
 75 }
 76 
 77 .next{
 78     transform:rotate(0deg);
 79     left:auto;
 80     right:0;
 81 }
 82 
 83 .button:hover{
 84     background-color:#333;
 85     opacity: 0.8;
 86     filter:alpha(opacity=80);
 87 }
 88 
 89 .dots {
 90     position: absolute;
 91     bottom: 24px;
 92     right: 0;
 93     text-align: right;
 94     padding-right: 24px;
 95     line-height: 12px;
 96 }
 97 
 98 .dots span {
 99     display: inline-block;
100     width: 12px;
101     height: 12px;
102     border-radius: 50%;
103     margin-left: 8px;
104     background-color: rgba(7, 17, 27, 0.4);
105     cursor: pointer;
106     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
107 }
108 
109 .dots span.active{
110     box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
111     background-color: #ffffff;
112 }
113 
114 /* menu-box */
115 .menu-box {
116     background:rgba(7, 17, 27, 0.5);
117     opacity: 0.5;
118     position: absolute;
119     left: 0px;
120     top: 0px;
121     width: 244px;
122     height: 460px;
123     z-index: 1;
124 }
125 
126 .menu-content{
127     position: absolute;
128     left: 0px;
129     top: 0px;
130     width: 244px;
131     height: 460px;
132     z-index: 2;
133     padding-top: 6px;
134 }
135 
136 .menu-item{
137     height: 64px;
138     line-height: 66px;
139     font-size: 12px;
140     cursor: pointer;
141     padding: 0 24px;
142     position: relative;
143 }
144 
145 .menu-item a{
146     display: block;
147     color: #fff;
148     padding: 0 8px;
149     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
150     height: 63px;
151     font-size:16px;
152 }
153 
154 .menu-item:last-child a{
155     border-bottom:none;
156 }
157 
158 .menu-item i{
159     position: absolute;
160     right: 32px;
161     top: 24px;
162     color: rgba(255,255,255,0.5);
163     font-size: 24px;
164     top: 2px;
165     font-style:normal;
166     font-weight:normal;
167     font-family:"iconfont";
168 }
169 
170 .sub-menu {
171     border:1px solid #d9dde1;
172     background:#fff;
173     position: absolute;
174     left: 244px;
175     top: 0px;
176     width: 730px;
177     height: 458px;
178     z-index: 581;
179     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
180 }
181 
182 .hide{
183     display:none;
184 }
185 
186 .inner-box{
187     width:100%;
188     height:100%;
189     background:url(../img/fe.png) no-repeat;
190     display:none;
191 }
192 
193 .sub-inner-box{
194     width: 652px;
195     margin-left: 40px;
196     overflow: hidden;
197 }
198 
199 .title{
200     color: #f01414;
201     font-size: 16px;
202     line-height: 16px;
203     margin-top: 28px;
204     font-weight: bold;
205     margin-bottom: 30px;
206 }
207 
208 .sub-row{
209     margin-bottom:25px;
210 }
211 
212 .bold{
213     font-weight:700;
214 }
215 
216 .mr10{
217     margin-right:10px;
218 }
219 
220 .ml10{
221     margin-left:10px;
222 }

css

  1 var timer = null,
  2     index = 0,
  3     pics = byId("banner").getElementsByTagName("div"),
  4     dots = byId("dots").getElementsByTagName("span"),
  5     size = pics.length,
  6     prev = byId("prev"),
  7     next = byId("next"),
  8     menuItems = byId("menu-content").getElementsByTagName("div"),
  9     subMenu = byId("sub-menu"),
 10     subItems = subMenu.getElementsByClassName("inner-box");
 11 
 12 function byId(id){
 13     return typeof(id)==="string"?document.getElementById(id):id;
 14 }
 15 
 16 // 清除定时器,停止自动播放
 17 function stopAutoPlay(){
 18     if(timer){
 19        clearInterval(timer);
 20     }
 21 }
 22 
 23 // 图片自动轮播
 24 function startAutoPlay(){
 25    timer = setInterval(function(){
 26        index++;
 27        if(index >= size){
 28           index = 0;
 29        }
 30        changeImg();
 31    },3000)
 32 }
 33 
 34 function changeImg(){
 35    for(var i=0,len=dots.length;i){
 36        dots[i].className = "";
 37        pics[i].style.display = "none";
 38    }
 39    dots[index].className = "active";
 40    pics[index].style.display = "block";
 41 }
 42 
 43 function slideImg(){
 44     var main = byId("main");
 45     var banner = byId("banner");
 46     var menuContent = byId("menu-content");
 47     main.onmouseover = function(){
 48         stopAutoPlay();
 49     }
 50     main.onmouseout = function(){
 51         startAutoPlay();
 52     }
 53     main.onmouseout();
 54 
 55     // 点击导航切换
 56     for(var i=0,len=dots.length;i){
 57        dots[i].id = i;
 58        dots[i].onclick = function(){
 59            index = this.id;
 60            changeImg();
 61        }
 62     }
 63 
 64     // 下一张
 65     next.onclick = function(){
 66        index++;
 67        if(index>=size) index=0;
 68        changeImg();
 69     }
 70 
 71     // 上一张
 72     prev.onclick = function(){
 73        index--;
 74        if(index<0) index=size-1;
 75        changeImg();
 76     }
 77 
 78     // 菜单
 79     for(var m=0,mlen=menuItems.length;m){
 80         menuItems[m].setAttribute("data-index",m);
 81         menuItems[m].onmouseover = function(){
 82             subMenu.className = "sub-menu";
 83             var idx = this.getAttribute("data-index");
 84             for(var j=0,jlen=subItems.length;j){
 85                subItems[j].style.display = 'none';
 86                menuItems[j].style.background = "none";
 87             }
 88             subItems[idx].style.display = "block";
 89             menuItems[idx].style.background = "rgba(0,0,0,0.1)";
 90         }
 91     }
 92 
 93     subMenu.onmouseover = function(){
 94         this.className = "sub-menu";
 95     }
 96 
 97     subMenu.onmouseout = function(){
 98         this.className = "sub-menu hide";
 99     }
100 
101     menuContent.onmouseout = function(){
102         subMenu.className = "sub-menu hide";
103     }
104 }
105 
106 slideImg();

关于沟通这件事，项目经理不需要每次都面对面进行流程大师兄
很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
2021年12月19日，春蕾教育集团团建活动感受——黄晓丹黄错错加油
感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序
摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
消息中间件有哪些常见类型 xmh-sxh-1314 java
消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
抖音乐买买怎么加入赚钱?赚钱方法是什么测评君高省
你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
腾讯云技术深度探索：构建高效云原生微服务架构我的运维人生云原生架构腾讯云运维开发技术共享
腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
拥有断舍离的心态，过精简生活--《断舍离》读书笔记爱吃丸子的小樱桃
不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
从0到500+，我是如何利用自媒体赚钱？一列脚印
运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子
使用LLaVa和Ollama实现多模态RAG示例 llzwxh888 python 人工智能开发语言
本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG（检索增强生成），通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先，您需要安装以下依赖包：!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p
利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
git - Webhook让部署自动化大猪大猪
我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
每日算法&面试题，大厂特训二十八天——第二十天（树）肥学 ⚡算法题⚡面试题每日精进 java 算法数据结构
目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
MongoDB Oplog 窗口喝醉酒的小白 MongoDB 运维
在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
Faiss Tips：高效向量搜索与聚类的利器焦习娜Samantha
FaissTips：高效向量搜索与聚类的利器faiss_tipsSomeusefultipsforfaiss项目地址:https://gitcode.com/gh_mirrors/fa/faiss_tips项目介绍Faiss是由FacebookAIResearch开发的一个用于高效相似性搜索和密集向量聚类的库。它支持多种硬件平台，包括CPU和GPU，能够在海量数据集上实现快速的近似最近邻搜索（AN
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
冬天短期的暴利小生意有哪些？那些小生意适合新手做？一起高省
短期生意不失为创业的一个商机，不过短期生意的商机是转瞬即逝的，而且这类生意也很难作为长期的生意去做，那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧，真很不错的项目，全程零投资，当做副业来做真的很稳定，不管你什么阶层的人，或多或少都网购吧？你们知道网购是可以拿提成，拿返利，拿分佣的吗？你们知道很多优惠券群里面，天天群主和管理发一些商品吗？他们其实在
Python 实现图片裁剪（附代码） | Python工具剑客阿良_ALiang
前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码
数据仓库——维度表一致性墨染丶eye 背诵数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
01-Git初识 Meereen Git git
01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
java的(PO,VO,TO,BO,DAO,POJO) Cb123456 VO TO BO POJO DAO
转: http://www.cnblogs.com/yxnchinahlj/archive/2012/02/24/2366110.html ------------------------------------------------------------------- O/R Mapping 是 Object Relational Mapping（对象关系映
spring ioc原理（看完后大家可以自己写一个spring） aijuans spring
最近，买了本Spring入门书：spring In Action 。大致浏览了下感觉还不错。就是入门了点。Manning的书还是不错的，我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬的心情和激情通览了一遍。又一次接受了IOC 、DI、AOP等Spring核心概念。先就IOC和DI谈一点我的看法。IO
MyEclipse 2014中Customize Persperctive设置无效的解决方法 Kai_Ge MyEclipse2014
高高兴兴下载个MyEclipse2014，发现工具条上多了个手机开发的按钮，心生不爽就想弄掉他！结果发现Customize Persperctive失效！！有说更新下就好了，可是国内Myeclipse访问不了，何谈更新... so~这里提供了更新后的一下jar包，给大家使用！ 1、将9个jar复制到myeclipse安装目录\plugins中 2、删除和这9个jar同包名但是版本号较
SpringMvc上传 120153216 springMVC
@RequestMapping(value = WebUrlConstant.UPLOADFILE) @ResponseBody public Map<String, Object> uploadFile(HttpServletRequest request,HttpServletResponse httpresponse) { try { //
Javascript----HTML DOM 事件何必如此 JavaScript html Web
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！注：DOM：指明使用的 DOM 属性级别。 1.鼠标事件属性
动态绑定和删除onclick事件 357029540 JavaScript jquery
因为对JQUERY和JS的动态绑定事件的不熟悉，今天花了好久的时间才把动态绑定和删除onclick事件搞定!现在分享下我的过程。在我的查询页面，我将我的onclick事件绑定到了tr标签上同时传入当前行(this值)参数，这样可以在点击行上的任意地方时可以选中checkbox，但是在我的某一列上也有一个onclick事件是用于下载附件的，当
HttpClient|HttpClient请求详解 7454103 apache 应用服务器网络协议网络应用 Security
HttpClient 是 Apache Jakarta Common 下的子项目，可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。本文首先介绍 HTTPClient，然后根据作者实际工作经验给出了一些常见问题的解决方法。HTTP 协议可能是现在 Internet 上使用得最多、最重要的协议了，越来越多的 Java 应用程序需
递归逐层统计树形结构数据 darkranger 数据结构
将集合递归获取树形结构: /** * * 递归获取数据 * @param alist:所有分类 * @param subjname:对应统计的项目名称 * @param pk:对应项目主键 * @param reportList: 最后统计的结果集 * @param count:项目级别 */ public void getReportVO(Arr
访问WEB-INF下使用frameset标签页面出错的原因 aijuans struts2
<frameset rows="61,*,24" cols="*" framespacing="0" frameborder="no" border="0">
MAVEN常用命令 avords
Maven库： http://repo2.maven.org/maven2/ Maven依赖查询： http://mvnrepository.com/ Maven常用命令： 1. 创建Maven的普通java项目： mvn archetype:create -DgroupId=packageName
PHP如果自带一个小型的web服务器就好了 houxinyou apache 应用服务器 Web PHP 脚本
最近单位用PHP做网站，感觉PHP挺好的，不过有一些地方不太习惯，比如，环境搭建。PHP本身就是一个网站后台脚本，但用PHP做程序时还要下载apache，配置起来也不太很方便，虽然有好多配置好的apache+php+mysq的环境，但用起来总是心里不太舒服，因为我要的只是一个开发环境，如果是真实的运行环境，下个apahe也无所谓，但只是一个开发环境，总有一种杀鸡用牛刀的感觉。如果php自己的程序中
NoSQL数据库之Redis数据库管理(list类型) bijian1013 redis 数据库 NoSQL
3.list类型及操作 List是一个链表结构，主要功能是push、pop、获取一个范围的所有值等等，操作key理解为链表的名字。Redis的list类型其实就是一个每个子元素都是string类型的双向链表。我们可以通过push、pop操作从链表的头部或者尾部添加删除元素，这样list既可以作为栈，又可以作为队列。 &nbs
谁在用Hadoop？ bingyingao hadoop 数据挖掘公司应用场景
Hadoop技术的应用已经十分广泛了，而我是最近才开始对它有所了解，它在大数据领域的出色表现也让我产生了兴趣。浏览了他的官网，其中有一个页面专门介绍目前世界上有哪些公司在用Hadoop，这些公司涵盖各行各业，不乏一些大公司如alibaba,ebay,amazon,google,facebook,adobe等，主要用于日志分析、数据挖掘、机器学习、构建索引、业务报表等场景,这更加激发了学习它的热情。
【Spark七十六】Spark计算结果存到MySQL bit1129 mysql
package spark.examples.db import java.sql.{PreparedStatement, Connection, DriverManager} import com.mysql.jdbc.Driver import org.apache.spark.{SparkContext, SparkConf} object SparkMySQLInteg
Scala: JVM上的函数编程 bookjovi scala erlang haskell
说Scala是JVM上的函数编程一点也不为过，Scala把面向对象和函数型编程这两种主流编程范式结合了起来，对于熟悉各种编程范式的人而言Scala并没有带来太多革新的编程思想，scala主要的有点在于Java庞大的package优势，这样也就弥补了JVM平台上函数型编程的缺失，MS家.net上已经有了F#，JVM怎么能不跟上呢？对本人而言
jar打成exe bro_feng java jar exe
今天要把jar包打成exe，jsmooth和exe4j都用了。遇见几个问题。记录一下。两个软件都很好使，网上都有图片教程，都挺不错。首先肯定是要用自己的jre的，不然不能通用，其次别忘了把需要的lib放到classPath中。困扰我很久的一个问题是，我自己打包成功后，在一个同事的没有装jdk的电脑上运行，就是不行，报错jvm.dll为无效的windows映像，如截图最后发现
读《研磨设计模式》-代码笔记-策略模式-Strategy bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* 策略模式定义了一系列的算法，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化简单理解： 1、将不同的策略提炼出一个共同接口。这是容易的，因为不同的策略，只是算法不同，需要传递的参数
cmd命令值cvfM命令 chenyu19891124 cmd
cmd命令还真是强大啊。今天发现jar -cvfM aa.rar @aaalist 就这行命令可以根据aaalist取出相应的文件例如：在d：\workspace\prpall\test.java 有这样一个文件，现在想要将这个文件打成一个包。运行如下命令即可比如在d：\wor
OpenJWeb(1.8) Java Web应用快速开发平台 comsci java 框架 Web 项目管理企业应用
OpenJWeb(1.8) Java Web应用快速开发平台的作者是我们技术联盟的成员，他最近推出了新版本的快速应用开发平台 OpenJWeb(1.8)，我帮他做做宣传 OpenJWeb快速开发平台以快速开发为核心，整合先进的java 开源框架，本着自主开发+应用集成相结合的原则，旨在为政府、企事业单位、软件公司等平台用户提供一个架构透
Python 报错：IndentationError: unexpected indent daizj python tab 空格缩进
IndentationError: unexpected indent 是缩进的问题，也有可能是tab和空格混用啦 Python开发者有意让违反了缩进规则的程序不能通过编译，以此来强制程序员养成良好的编程习惯。并且在Python语言里，缩进而非花括号或者某种关键字，被用于表示语句块的开始和退出。增加缩进表示语句块的开
HttpClient 超时设置 dongwei_6688 httpclient
HttpClient中的超时设置包含两个部分： 1. 建立连接超时，是指在httpclient客户端和服务器端建立连接过程中允许的最大等待时间 2. 读取数据超时，是指在建立连接后，等待读取服务器端的响应数据时允许的最大等待时间在HttpClient 4.x中如下设置： HttpClient httpclient = new DefaultHttpC
小鱼与波浪 dcj3sjt126com
一条小鱼游出水面看蓝天，偶然间遇到了波浪。　　小鱼便与波浪在海面上游戏，随着波浪上下起伏、汹涌前进。　　小鱼在波浪里兴奋得大叫：“你每天都过着这么刺激的生活吗？简直太棒了。”　　波浪说：“岂只每天过这样的生活，几乎每一刻都这么刺激！还有更刺激的，要有潮汐变化，或者狂风暴雨，那才是兴奋得心脏都会跳出来。”　　小鱼说：“真希望我也能变成一个波浪，每天随着风雨、潮汐流动，不知道有多么好！”　　很快，小鱼
Error Code: 1175 You are using safe update mode and you tried to update a table dcj3sjt126com mysql
快速高效用：SET SQL_SAFE_UPDATES = 0；下面的就不要看了！今日用MySQL Workbench进行数据库的管理更新时，执行一个更新的语句碰到以下错误提示： Error Code: 1175 You are using safe update mode and you tried to update a table without a WHERE that
枚举类型详细介绍及方法定义 gaomysion enum javaee
转发 http://developer.51cto.com/art/201107/275031.htm 枚举其实就是一种类型，跟int, char 这种差不多，就是定义变量时限制输入的，你只能够赋enum里面规定的值。建议大家可以看看，这两篇文章，《java枚举类型入门》和《C++的中的结构体和枚举》，供大家参考。枚举类型是JDK5.0的新特征。Sun引进了一个全新的关键字enum
Merge Sorted Array hcx2013 array
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:You may assume that nums1 has enough space (size that is
Expression Language 3.0新特性 jinnianshilongnian el 3.0
Expression Language 3.0表达式语言规范最终版从2013-4-29发布到现在已经非常久的时间了；目前如Tomcat 8、Jetty 9、GlasshFish 4已经支持EL 3.0。新特性包括：如字符串拼接操作符、赋值、分号操作符、对象方法调用、Lambda表达式、静态字段/方法调用、构造器调用、Java8集合操作。目前Glassfish 4/Jetty实现最好，对大多数新特性
超越算法来看待个性化推荐 liyonghui160com 超越算法来看待个性化推荐
一提到个性化推荐，大家一般会想到协同过滤、文本相似等推荐算法，或是更高阶的模型推荐算法，百度的张栋说过，推荐40%取决于UI、30%取决于数据、20%取决于背景知识，虽然本人不是很认同这种比例，但推荐系统中，推荐算法起的作用起的作用是非常有限的。就像任何
写给Javascript初学者的小小建议 pda158 JavaScript
　　一般初学JavaScript的时候最头痛的就是浏览器兼容问题。在Firefox下面好好的代码放到IE就不能显示了，又或者是在IE能正常显示的代码在firefox又报错了。　　如果你正初学JavaScript并有着一样的处境的话建议你：初学JavaScript的时候无视DOM和BOM的兼容性，将更多的时间花在了解语言本身（ECMAScript）。只在特定浏览器编写代码（Chrome/Fi
Java 枚举 ShihLei java enum 枚举
注：文章内容大量借鉴使用网上的资料，可惜没有记录参考地址，只能再传对作者说声抱歉并表示感谢！一基础 1）语法枚举类型只能有私有构造器（这样做可以保证客户代码没有办法新建一个enum的实例）枚举实例必须最先定义 2）特性 &nb
Java SE 6 HotSpot虚拟机的垃圾回收机制 uuhorse java HotSpot GC 垃圾回收 VM
官方资料，关于Java SE 6 HotSpot虚拟机的garbage Collection，非常全，英文。 http://www.oracle.com/technetwork/java/javase/gc-tuning-6-140523.html Java SE 6 HotSpot[tm] Virtual Machine Garbage Collection Tuning &

小白项目-JavaScript实现轮播特效

你可能感兴趣的:(小白项目-JavaScript实现轮播特效)