css怎么实现自动轮播图片?

如下代码已实现手动轮播,求教怎么实现自动轮播?刚进入代码圈的小白,求大神赐教。非常感谢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                background-size: cover;
            }
            img{
                width: 900px;
                height: 330px;
            }
            .photo{
                width: 900px;
                height: 330px;
                /* border: 1px solid #555555;*/
                margin: auto auto;
                position: relative;
                background: #B0C4DE;
                box-shadow: 0 10px 80px rgba(0,0,0,0.6);
                animation: ma 5s ease-out infinite alternate;
            }
            #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
                position: absolute;z-index:9px;
                width: calc(300px * 6);/*---修改图片数量的话需要修改下面的动画参数*/
            }
            .photo input{
                display: none;
            }
            .image{
                position: absolute;
                top: -25px;
                left: -25px;
                width: 500px;
                height: 330px;
                margin: 25px 25px;
                opacity: 0;
                transition: all 0.7s;
            }

            .nav label{
                width: 150px;
                height: 330px;
                /*margin: 0px 0px;*/
                position: absolute;
                z-index: 10;
                opacity: 0;
                display: none;
                cursor: pointer;
                transition: opacity 0.2s;
                color: #ffffff;
                font-size: 50px;
                line-height: 320px;
                text-align: center;
                text-shadow: 0 0 15px #555555);
            }
            .leftjianbian{
                background: linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -o-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -ms-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -moz-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
            }
            .rightjianbian{
                background: linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -o-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -ms-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -moz-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -webkit-linear-gradient(left , rgba(250, 242, 239,0) 10% , rgba(158, 148, 166,0.5) 100%);
            }
            .image:hover + .nav label{
                opacity: 0.5;
            }
            .nav label:hover{
                opacity: 1;
            }
            .nav .down{
                right: 0;
            }
            input:checked + .control .image{
                opacity: 1;
                transform: scale(1);
                transition: all 1s;
            }
            input:checked + .control .nav label{
                display: block;
            }
            .dots{
                width:100%;
                height: 20px;
                position: absolute;
                bottom: 30px;
                text-align: center;
            }
            .dot{
                width: 15px;
                height: 15px;
                margin: 0px 5px;
                border-radius: 50%;
                position: relative;
                display: inline-block;
                background: rgba(0, 0, 0,0.4);
            }
            input#img1:checked ~ .dots label#dot1,
            input#img2:checked ~ .dots label#dot2,
            input#img3:checked ~ .dots label#dot3,
            input#img4:checked ~ .dots label#dot4,
            input#img5:checked ~ .dots label#dot5,
            input#img6:checked ~ .dots label#dot6{
                background: rgba(0,0,0,0.7);
            }
        </style>
    </head>

<body>
    <div class="photo" id="photo">
        <!--//1-->
        <input type="radio" name="btn" id="img1" checked/>
        <div class="control">
            <div class="image"><a href="#"><img src="../img/3.png"></a></div>
            <div class="nav">
                <label for="img6" class="up leftjianbian"><</label>
                <label for="img2" class="down rightjianbian">></label>
            </div>
        </div>
        <!--//2-->
        <input type="radio" name="btn" id="img2"/>
        <div class="control">
            <div class="image"><a href="#"><img src="../img/2.png"></a></div>
            <div class="nav">
                <label for="img1" class="up leftjianbian"><</label>
                <label for="img3" class="down rightjianbian">></label>
            </div>
        </div>
        <!--//3-->
        <input type="radio" name="btn" id="img3"/>
        <div class="control">
            <div class="image"><a href="#"><img src="../img/5.png"></a></div>
            <div class="nav">
                <label for="img2" class="up leftjianbian"><</label>
                <label for="img4" class="down rightjianbian">></label>
            </div>
        </div>
        <!--//4-->
        <input type="radio" name="btn" id="img4"/>
        <div class="control">
            <div class="image"><a href="#"><img src="../img/4.png"></a></div>
            <div class="nav">
                <label for="img3" class="up leftjianbian"><</label>
                <label for="img5" class="down rightjianbian">></label>
            </div>
        </div>
        <!--//5-->
        <input type="radio" name="btn" id="img5"/>
        <div class="control">
            <div class="image"><a href="#"><img src="../img/1.png"></a></div>
            <div class="nav">
                <label for="img4" class="up leftjianbian"><</label>
                <label for="img6" class="down rightjianbian">></label>
            </div>
        </div>
        <!--//6-->
        <input type="radio" name="btn" id="img6"/>
        <div class="control">
            <div class="image"><a href="#"><img src="../img/6.png"></a></div>
            <div class="nav">
                <label for="img5" class="up leftjianbian"><</label>
                <label for="img1" class="down rightjianbian">></label>
            </div>
        </div>
        <div class="dots">
            <label for="img1" class="dot" id="dot1"></label>
            <label for="img2" class="dot" id="dot2"></label>
            <label for="img3" class="dot" id="dot3"></label>
            <label for="img4" class="dot" id="dot4"></label>
            <label for="img5" class="dot" id="dot5"></label>
            <label for="img6" class="dot" id="dot6"></label>
        </div>
    </div>

</body>
</html>

4个回答

轮播有swiper,你可以看看swiper的源码,很详细

你贴出来的代码里 并没有申明 ma 动画的执行步骤. 你需要定义一下

@keyframes ma {

}
monoplasty
monoplasty 回复pxr_0321: 你这个代码没有js很难实现自动轮播, 所以只能看 动画 能不能实现. 我具体没有去实现, 只看了看你代码的问题
8 个月之前 回复
pxr_0321
pxr_0321 我试过,但是动画效果怎么试都不好,您可以详细的发一下代码借我看一下吗
8 个月之前 回复

加一段JS,给你手动切换轮播图的按钮添加一个定时器,每隔一段时间自动执行。

用css的话 用动画 动画的from和to里写一个transform的属性 让轮播图的图片向左你想让它滑动的方向滑动 每次移动的距离自己调整一下 如果用js的话就直可以用定时器

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css +js 实现轮播效果?、
利用计时器 css 等实现 简单的照片轮播效果,求大神 指点指点 再讲讲 如何实现 加点注释 谢谢 我是 菜鸟
前端jquery 图片自动轮播
我想要实现图片的自动轮播,并且可以点击图片在新页面查看图片,刚开始的一次循环点击图片可以跳转新页面,可是之后的点击却无效 ``` ``` <!doctype ``` html> <html> <head> <meta charset="UTF-8"> <title>Demo13-2</title> <style> .container{width:300px;height:150px;margin:200px auto;} .left,.right{width:10%;height:100%;line-height:150px;text-align: center;float:left} .picbox{width:80%;height:100%;float:left;overflow: hidden;} .pic{position:relative;width:720px;overflow:visible} img{width:100%;height:100%} .img{width:240px;height:150px;float:left} </style> <script src="js/jquery-3.3.1.js"></script> <script> $(function(){ var stop =false; var index = -1; var pics = ["1","2","3"]; $.each(pics,function(index,value){ $(".pic").append($("<div class='img'><a href='img/"+value+".jpg'><image src='img/"+value+".jpg' /></a></div>")); }) $(".pic").hover(function(){stop=true;},function(){stop=false;}); setInterval(function(){ if(stop) return; var left = parseInt($(".pic").css("left"))-1; //alert(left); $(".pic").css({left:left}); if(left % 240 ==0) { index++; var w = parseInt($(".pic").css("width")) +240 ; $(".pic").css({"width":w}) $(".pic").append($("<div class='img'><image src='img/"+pics[index%pics.length]+".jpg' /></div>")); } },10); }) </script> </head> <body> <div class="container"> <div class="left"></div> <div class="picbox"> <div class="pic"></div> </div> <div class="right"></div> </div> </body> </html> ```
图片轮播触发CSS3动画 求解答
就是 有三个图片轮播,每轮播一次触发当前div里面的css3动画 求解答
CSS实现图片无缝拼接?
如果用CSS把6张图片无缝拼接成一幅完整的图片?要求用CSS实现。![图片说明](https://img-ask.csdn.net/upload/201512/05/1449286978_617712.jpg) 效果图是这样的,上部分被分割成三部分,中部被分割成两部分,下部只有一部分。
怎么在轮播图的图片中加上链接?
怎么在轮播图的图片中加上链接?我看网上有写的用a标签,能否具体说下怎么用,本人小白
怎么用css实现图片中的布局
![图片说明](https://img-ask.csdn.net/upload/201512/04/1449228884_873833.png) 请教, 怎么用css实现图片中的布局, 可以帮忙写一段吗
css3实现背景图片渐变后闪烁一下
为什么我用css3实现背景图片渐变时,当一张图片渐变到下一张图片完成的一瞬间会闪烁一下,而且这种情况只在第一次循环出现,当所有图片都渐变完成后,再渐变就不闪烁了,我想是图片加载的问题,但是我把animation写在window.onload里还是有这个问题
css怎么设置背景图片自适应,背景不虚
css怎么设置背景图片自适应,背景不虚,css怎么设置背景图片自适应,背景不虚css怎么设置背景图片自适应,背景不虚
css+js实现点击图片左右切换图片
如图,两边的小图片都是图片,请问怎么点击左边或者右边的星球图片就切换成点击的那个,切换过来要改成大的图片,然后被换走的变成小的图片,就是更改src,麻烦提供一下代码,辛苦了!![图片说明](https://img-ask.csdn.net/upload/201904/29/1556527735_533484.png)
js新手跪求这个轮播图怎么自动轮播
<script type="text/javascript"> var li_num; var total_li; var current = 0; var dots; $(document).ready(function () { $('.buttonfix').hover( function () { $('.buttonfix').css('background-position', 'top left'); }, function () { $('.buttonfix').css('background-position', 'bottom left'); } ); total_li = $('.mediawindow div.item').size() - 1; dots = draw_dots($('.media'), $('.mediawindow div.item')); update_dots(dots, current); ArrowHide(current); $('a.media_left, a.media_right').click(function () { if ($(this).html() == 'right') { //alert('left'); current++; if (current >= total_li) { current = total_li; } } else { //alert('right'); current--; if (current < 0) { current = 0; } } //alert(current); item_goto = $('.mediawindow div.item:eq(' + current + ')'); window_slide($('.mediawindow')); update_dots(dots, current); ArrowHide(current); return false; }); $('ul.dots li').click(function () { current = $(this).html() - 1; item_goto = $('.mediawindow div.item:eq(' + current + ')'); window_slide($('.mediawindow')); update_dots(dots, current); ArrowHide(current); return false; }); }); function ArrowHide(current) { $('.mediapanel a.media_right').css('display', 'block'); $('.mediapanel a.media_left').css('display', 'block'); if (current == total_li) { $('.mediapanel a.media_right').css('display', 'none'); } if (current == 0) { $('.mediapanel a.media_left').css('display', 'none'); } } function window_slide(window) { window.stop().scrollTo(item_goto, 600, { easing: 'easeInOutQuad' }); } function draw_dots(container, items) { var out = ""; var i = 1; out += '<ul class="dots">'; items.each(function () { out += "<li>" + i + "</li>"; i++; }); out += '</ul>'; container.append(out); return container.find('ul.dots'); } function update_dots(dots, currentposition) { dots.find('li').css({ backgroundPosition: 'left bottom' }); dots.find('li:eq(' + currentposition + ')').css({ backgroundPosition: 'left top' }); } </script>
js怎么实现多个位置的微信号和微信二维码图片相对应的轮播
我在html中想实现微信号和二维码图片相对应的轮播,就是展示的微信号和展示的二维码图片相对应,而且二维码图片有三个位置 其中两个使用的是相同图片.这种效果怎么实现,我目前能实现4个位置的微信号展示同一个 但是3个位置的位置的二维码图片不行,就是其中两个位置使用相同二维码图片的也没办法对应起来. 只能实现它们刷新展示新的图片,但是不能把展示的二维码图片与微信号进行对应起来, 在网上搜的是把微信号和图片放到一个对象里![图片说明](https://img-ask.csdn.net/upload/201904/12/1555034052_429421.png) 这种不算太懂,麻烦各位的帮助,请附加清晰的代码
css 如何设置几个图片在同一行显示 并且按页面百分比排列 中间间隔一定间隙 美观
css 如何设置几个图片在同义行显示 并且按页面百分比排列 中间间隔一定间隙 美观
android,webview加载外部css要怎么实现?
android,webview加载外部css要怎么实现? android,webview加载外部css要怎么实现? android,webview加载外部css要怎么实现?
html css如何实现如图能力值网状图
![html css如何实现如图能力值网状图](https://img-ask.csdn.net/upload/201605/19/1463636206_776671.png)
css如何将一张图片固定在一个div底部,图片height变化时图片高度变化,底部位置不变
css如何将一张图片固定在一个div底部,图片height变化时图片高度变化,图片底部位置不变
用JS实现图片轮播的问题,谢谢了
我又来问问题了,(自学JS没人请教也是尴尬,好像找个师傅啊),下面是问题 谢谢了 这是图片轮播代码,麻烦大家,在浏览器打开看下,这样能说清楚问题 ``` <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0; padding:0;} li{list-style:none; background:#f60; float:left; margin-right:10px; border-radius:8px; padding:2px 6px; cursor:pointer; text-align:center;} ul{width:140px; position:absolute; bottom:20px; right:20px;} .main{width:720px; height:450px; margin:0 auto; position:relative; left:0; top:100px; border:5px green solid;} .abc{width:720px; height:106px; margin:auto; margin-top:120px; background:#ccc; text-align:center;} .abc img{margin-right:10px; width:144px; height:90px; margin-top:8px;} </style> </head> <body> <div class="main"> <img src="1.jpg" id="tp"/> <ul> <li id="dianji1" onmousemove="showA(1)">1</li> <li id="dianji2" onmousemove="showA(2)">2</li> <li id="dianji3" onmousemove="showA(3)">3</li> <li id="dianji4" onmousemove="showA(4)">4</li> </ul> </div> <div class="abc"> <img src="1.jpg" id="pic1" onmousemove="showB(1)"/> <img src="2.jpg" id="pic2" onmousemove="showB(2)"/> <img src="3.jpg" id="pic3" onmousemove="showB(3)"/> <img src="4.jpg" id="pic4" onmousemove="showB(4)"/> </div> <script type="text/javascript"> var gh=1; var mc=1; var tup=['http://a1.qpic.cn/psb?/V11aE2wE1DtywZ/I93pSorEWp54MpVhMNDEuPoY6sWU2y4sel7zcxygX0U!/b/dAMAAAAAAAAA&bo=0ALCAdACwgEBCS4!&rf=viewer_4', 'http://a2.qpic.cn/psb?/V11aE2wE1DtywZ/gYhbpYS80HxerKihb7FP8Xz6oBPopJd4Dv.Or6VNIJM!/b/dFgAAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4', 'http://a2.qpic.cn/psb?/V11aE2wE1DtywZ/kC2U6ySDDMDiJi7Dmk5TtdH7S609Ny4mhTFEO96rNjg!/b/dGQAAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4', 'http://a1.qpic.cn/psb?/V11aE2wE1DtywZ/vC9QsPEduvx6GCOIpq80bXh0t3oUAIzT2smAfm*lrwY!/b/dB4AAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4']; document.getElementById('dianji1').style.backgroundColor='black'; document.getElementById('dianji1').style.color='white'; document.getElementById('pic1').style.border='3px #f60 solid'; function showA(a){ var dianjigh=document.getElementById('dianji'+gh); var dianjia=document.getElementById('dianji'+a); dianjigh.style.backgroundColor='#f60'; dianjigh.style.color='black'; document.getElementById('pic'+gh).style.border='none'; dianjia.style.backgroundColor='black'; dianjia.style.color='white'; document.getElementById('tp').src=tup[a-1]; document.getElementById('pic'+a).style.border='3px #f60 solid'; gh=a; } function showB(c){ var dianjimc=document.getElementById('dianji'+mc); var dianjic=document.getElementById('dianji'+c); dianjimc.style.backgroundColor='#f60'; dianjimc.style.color='black'; document.getElementById('pic'+mc).style.border='none'; dianjic.style.backgroundColor='black'; dianjic.style.color='white'; document.getElementById('tp').src=tup[c-1]; document.getElementById('pic'+c).style.border='3px #f60 solid'; mc=c; } </script> </body> </html> ``` 鼠标放在 1,2,3,4上后,上面对应的图片切图,下面的小图片带边框 鼠标放在下面的小图片上,上面的大图也会切图 (只设置了onmousemove并没onmouseout) 那么问题来了 假如你鼠标放在2那,下面对应的第二个图会出现边框,然后你把鼠标移到下面第三个图上,结果下面第三个图也出现边框了,一下两个边框 同理鼠标一开始放在下面第二个图上,然后上面对应的数字2背景变黑,这个时候,鼠标移到上面数字3上面.同时3的背景色也变黑了 , 怎么解决这个问题呢,加上onmouseout可以吗 怎样才能让第一个函数工作的时候清除第二个函数带来的效果,第二个函数工作的时候清除第一个函数带来的效果? 真心求教////
怎么用html/css实现图片跟文字跑马灯一一样的效果?
怎么用html/css实现图片跟文字跑马灯一一样的效果?大神解答。。。。
css 圆形图片实现submit按钮
请问怎么用css+div制作出圆形图片实现submit按钮啊?我做了如图所示,就是白色的部分怎么变透明呢?如果直接用<img>标签的话,又不能实现登录功能,请各位朋友指教!!!
C33如何实现凹半圆效果?
## 使用CSS如何实现如下图的效果? ![图片说明](https://img-ask.csdn.net/upload/201912/29/1577628563_171958.png)
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
字节跳动视频编解码面经
三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时想着能进去就不错了,管他哪个岗呢,就同意了面试...
开源一个功能完整的SpringBoot项目框架
福利来了,给大家带来一个福利。 最近想了解一下有关Spring Boot的开源项目,看了很多开源的框架,大多是一些demo或者是一个未成形的项目,基本功能都不完整,尤其是用户权限和菜单方面几乎没有完整的。 想到我之前做的框架,里面通用模块有:用户模块,权限模块,菜单模块,功能模块也齐全了,每一个功能都是完整的。 打算把这个框架分享出来,供大家使用和学习。 为什么用框架? 框架可以学习整体...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
Spring Boot2 系列教程(十七)SpringBoot 整合 Swagger2
前后端分离后,维护接口文档基本上是必不可少的工作。 一个理想的状态是设计好后,接口文档发给前端和后端,大伙按照既定的规则各自开发,开发好了对接上了就可以上线了。当然这是一种非常理想的状态,实际开发中却很少遇到这样的情况,接口总是在不断的变化之中,有变化就要去维护,做过的小伙伴都知道这件事有多么头大!还好,有一些工具可以减轻我们的工作量,Swagger2 就是其中之一,至于其他类似功能但是却收费的软...
Python 基础(一):入门必备知识
目录1 标识符2 关键字3 引号4 编码5 输入输出6 缩进7 多行8 注释9 数据类型10 运算符10.1 常用运算符10.2 运算符优先级 1 标识符 标识符是编程时使用的名字,用于给变量、函数、语句块等命名,Python 中标识符由字母、数字、下划线组成,不能以数字开头,区分大小写。 以下划线开头的标识符有特殊含义,单下划线开头的标识符,如:_xxx ,表示不能直接访问的类属性,需通过类提供
天天学JAVA-JAVA基础(6)
如果觉得我写的还行,请关注我的博客并且点个赞哟。本文主要介绍JAVA 中最常使用字符串常量String相关知识。 1.String简介 2.创建字符串对象两种方式的区别 3.String常用的方法 4.String的不可变性 5.一道阿里面试题,你会做吗? 1.String简介 1.1String源码 首先看一段String源码,String主要实现了Serializable、Compar...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
2020 网络课 智慧树自动刷课代码,自动跳转,自动答题并关闭弹窗,自动1.5倍速静音
刷课一时爽,一直刷课一直爽! 终于让我找到了这个黑客代码了,教程开始: 只限谷歌浏览器和火狐浏览器使用,如果第一次失败,请重新试一下次 将下面代码复制后,进入浏览器按F12键,先点击console 然后Ctrl+v复制代码 最后按回车键即可 var ti = $("body"); var video = $(".catalogue_ul1 li[id*=video-]"); var i = 1;...
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
致 Python 初学者
文章目录1. 前言2. 明确学习目标,不急于求成,不好高骛远3. 在开始学习 Python 之前,你需要做一些准备2.1 Python 的各种发行版2.2 安装 Python2.3 选择一款趁手的开发工具3. 习惯使用IDLE,这是学习python最好的方式4. 严格遵从编码规范5. 代码的运行、调试5. 模块管理5.1 同时安装了py2/py35.2 使用Anaconda,或者通过IDE来安装模
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
羞,Java 字符串拼接竟然有这么多姿势
二哥,我今年大二,看你分享的《阿里巴巴 Java 开发手册》上有一段内容说:“循环体内,拼接字符串最好使用 StringBuilder 的 append 方法,而不是 + 号操作符。”到底为什么啊,我平常一直就用的‘+’号操作符啊!二哥有空的时候能否写一篇文章分析一下呢? 就在昨天,一位叫小菜的读者微信我说了上面这段话。 我当时看到这条微信的第一感觉是:小菜你也太菜了吧,这都不知道为啥啊!我估...
写1行代码影响1000000000人,这是个什么项目?
不带钱不带卡,只带手机出门就能畅行无阻,这已是生活的常态。益普索发布的《2019第一季度第三方移动支付用户研究》报告显示,移动支付在手机网民中的渗透率高达95.1%,截至今年1月,支付宝全球用户数已经突破10亿。你或许每天都会打开支付宝,付款购物、领取权益、享受服务……但你或许不知道的是,在这个方便、快捷、智能化的APP背后,有一群年轻的技术人,用智慧和创新让它每天都变得更“聪明”一点。 ...
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
一点一滴记录 Java 8 stream 的使用
日常用到,一点一滴记录,不断丰富,知识积累,塑造自身价值。欢迎收藏 String 转 List String str = 1,2,3,4; List&lt;Long&gt; lists = Arrays.stream(str.split(",")).map(s -&gt; Long.parseLong(s.trim())).collect(Collectors.toList()); Lis...
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车? 某胡同口的煎饼摊一年能卖出多少个煎饼? 深圳有多少个产品经理? 一辆公交车里能装下多少个乒乓球? 一
相关热词 c# plc s1200 c#里氏转换原则 c# 主界面 c# do loop c#存为组套 模板 c# 停掉协程 c# rgb 读取图片 c# 图片颜色调整 最快 c#多张图片上传 c#密封类与密封方法
立即提问