前端开发 —— 图片轮播

橐驼發表於 2020-5-27 22:57:00

<div class="output_wrapper" id="output_wrapper_id" style="font-size: 16px; color: rgba(62, 62, 62, 1); line-height: 1.6; word-spacing: 0; letter-spacing: 0; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center"><blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0; color: rgba(129, 145, 152, 1); border-left: 6px solid rgba(220, 230, 240, 1); background: rgba(242, 247, 251, 1); overflow: auto; overflow-wrap: normal; word-break: normal">
今日一言： 受身无间者永远不死，寿长乃无间地狱中之大劫。 ——《涅盘经》
</blockquote>
<h3 id="h" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0 50px; font-weight: bold; border-bottom: 2px solid rgba(63, 63, 63, 1); font-size: 1em"><span style="font-size: inherit; line-height: inherit; margin: 0; display: inline-block; background: rgba(63, 63, 63, 1); color: rgba(255, 255, 255, 1); padding: 10px 16px; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 1)">前端开发 —— 图片轮播</h3>
<hr style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; height: 1px; margin: 1.5rem 0; border-right: none; border-bottom: none; border-left: none; border-top: 1px dashed rgba(165, 165, 165, 1)">
<h3 id="hhtml" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0 50px; font-weight: bold; border-bottom: 2px solid rgba(63, 63, 63, 1); font-size: 1em"><span style="font-size: inherit; line-height: inherit; margin: 0; display: inline-block; background: rgba(63, 63, 63, 1); color: rgba(255, 255, 255, 1); padding: 10px 16px; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 1)">HTML</h3>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="html language-html hljs xml" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important"><div class="content">     <div class="img_box">         <ul>             <li><img src="./img/1.jpeg" style="width: 640px;height: 480px" /></li>             <li><img src="./img/2.jpeg" style="width: 640px;height: 480px"/></li>             <li><img src="./img/3.jpeg" style="width: 640px;height: 480px"/></li>             <li><img src="./img/4.jpeg" style="width: 640px;height: 480px"/></li>             <li><img src="./img/5.jpeg" style="width: 640px;height: 480px"/></li>         </ul>         <p>             <span class="leftBtn">&lt;</span>             <span class="rightBtn">&gt;</span>         </p>         <div class="bar" style="width: 640px;height:5px;background-color: #FFFFFF"></div>     </div> </div> </code></pre>
<hr style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; height: 1px; margin: 1.5rem 0; border-right: none; border-bottom: none; border-left: none; border-top: 1px dashed rgba(165, 165, 165, 1)">
<h3 id="hcss" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0 50px; font-weight: bold; border-bottom: 2px solid rgba(63, 63, 63, 1); font-size: 1em"><span style="font-size: inherit; line-height: inherit; margin: 0; display: inline-block; background: rgba(63, 63, 63, 1); color: rgba(255, 255, 255, 1); padding: 10px 16px; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 1)">CSS</h3>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="css language-css hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">body{     background-color: #212121; } li{     list-style-type: none; } ul {     width: 640px;     height: 480px;     padding: 0;     display: flex; } .img_box{     width: 640px;     height: 480px;     position: absolute;     left: 50%;     top: 50%;     margin-left: -320px;     margin-top: -240px;     overflow: hidden; } p{     position: absolute;     width: 640px;     height: 70px;     top: 50%;     left: 50%;     margin-left: -320px;     margin-top: -35px;     display: flex;     justify-content: space-between; } .rightBtn{     -webkit-touch-callout: none;     -webkit-user-select: none;     -khtml-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     display: inline-block;     font-size: 50px;     width: 70px;     height: 70px;     border-radius: 9px;     text-align: center;     margin-right: 5px;      color: #fff;     background-color: rgba(0,0,0,0.5);     cursor: pointer; } .leftBtn{     -webkit-touch-callout: none;     -webkit-user-select: none;     -khtml-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     user-select：none;     display: inline-block;     font-size: 50px;     width: 70px;     height: 70px;     border-radius: 9px;     text-align: center;     color: #fff;     margin-left: 5px;     background-color: rgba(0,0,0,0.5);     cursor: pointer; } .bar{     position: absolute;     bottom: 0; } </code></pre>
<hr style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; height: 1px; margin: 1.5rem 0; border-right: none; border-bottom: none; border-left: none; border-top: 1px dashed rgba(165, 165, 165, 1)">
<h3 id="hjavascript" style="color: inherit; line-height: inherit; padding: 0; margin: 1.5em 0 50px; font-weight: bold; border-bottom: 2px solid rgba(63, 63, 63, 1); font-size: 1em"><span style="font-size: inherit; line-height: inherit; margin: 0; display: inline-block; background: rgba(63, 63, 63, 1); color: rgba(255, 255, 255, 1); padding: 10px 16px; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 1)">JavaScript</h3>
<pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0; padding: 0"><code class="JavaScript language-JavaScript hljs" style="overflow-wrap: break-word; margin: 0 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0; letter-spacing: 0; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0; color: rgba(169, 183, 198, 1); background: rgba(40, 43, 46, 1); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important">var cureent = 0; var time = $("img").width(); var timer; var leftBtn = $(".leftBtn"); var rightBtn = $(".rightBtn"); function show(status){     if( status == 1 ){         timer = setInterval(function(){             time--;             if( time < 0 ){                 Tright();                 time = box.width();             }             $(".bar").width($("img").width()-time+"px");         },10);     } else {         clearInterval(timer);         time = $("img").width();     } } show(1); $(".img_box").hover(function(){     leftBtn.fadeIn(30);     rightBtn.fadeIn(30); }); $(".img_box").mouseleave(function(){     leftBtn.fadeOut(30);     rightBtn.fadeOut(30); }); function Tleft(){     show(0);     cureent--;     if( cureent < 0 ) cureent = 4;     $("ul").animate({marginLeft: -640 * cureent + "px"});     show(1); } function Tright(){     show(0);     cureent++;     if( cureent >= 5 ) cureent = 0;     $("ul").animate({marginLeft: -640 * cureent +"px"});     show(1); } leftBtn.click(function(){     Tleft(); }); rightBtn.click(function(){     Tright(); }); </code></pre>
<hr style="font-size: inherit; color: inherit; line-height: inherit; padding: 0; height: 1px; margin: 1.5rem 0; border-right: none; border-bottom: none; border-left: none; border-top: 1px dashed rgba(165, 165, 165, 1)"></div> 
来源：https://www.cnblogs.com/rcklos/p/12977275.html

頁: [1]

琼殿技术论坛's Archiver

前端开发 —— 图片轮播