<div class="codetitle"> <span><a style="CURSOR: pointer" data="56232" class="copybut" id="copybut56232" onclick="doCopy('code56232')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code56232"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" コンテンツ="text/html; charset=gb2312" /><br> <script type="text/javascript" src="js/jquery-1.7.min.js"></script><br> < ;title>jq控制左右箭头滚動图片列表</title><br> <style type="text/css"><br> *{ margin:0;パディング:0;フォントサイズ: 12px;}<br> ul{ list-style:none;}<br> .slider{ width:760px;border: 1px #708090 ソリッド;パディング:10px 20px;高さ:130px;マージン:100px 自動;位置:相対;カーソル:ポインタ;}<br> #slider_pic{幅:630px;マージン:0自動;オーバーフロー:非表示;高さ:130ピクセル;位置:相対; }<br> .prev,.next{position: 絶対;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align:center;line-height:20px;font-weight:bold;color:#fff;}<br> .next{right: 20px;}<br> .no_click{background-color: #808080;}<br> #slider_pic li{float: left;margin-right: 10px;}<br> #slider_pic ul{position:Absolute;left: 0;}<br><br> </style><br> <script type="text/javascript"><br> $(function(){<br> var oPic=$('#slider_pic').find('ul');<br> var oImg=oPic.find(' li '）; <br> var olen = oimg.length;<br>var oli = oimg.width（）; <br>var prev = $（ "＃prev"）;<br>var next = $（ "＃＃（"＃ next");<br><br> oPic.width(oLen*210);//计算总长度<br> var iNow=0;<br> var iTimer=null;<br> prev.click(function() {<br> if(iNow>0){ <br> iNow--;<br><br> }<br> ClickScroll() ;<br> })<br> next.click(function(){<br> if(iNow<oLen-3){ <br> iNow <br> }<br> ClickScroll();<br> })<br><br> function ClickScroll(){<br><br> iNow== 0? prev.addClass('no_click'): prev.removeClass('no_click');<br> iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");<br><br> oPic.animate({left:-iNow*210})<br> }<br><br> })<br><br> <br> </script><br> </head><br><br> <body><br> <div class="slider"><br> < ;span class="prev no_click" id="prev"><<</span><br> <span class="next " id="next">>></span> ;<BR> <div id="slider_pic"><br> <ul><br> <li><img src="http://images.jb51.net/cnblogs_com/hxh-hua/ 478335/o_01.jpg" width="200" height="130" /></li><br> <li><img src="http://images.jb51.net/cnblogs_com/hxh -hua/478335/o_02.jpg" width="200" height="130" /></li><br> <li><img src="http://images.jb51.net/ cnblogs_com/hxh-hua/478335/o_03.jpg" width="200" height="130" /></li><br> <li><img src="http://images.jb51 .net/cnblogs_com/hxh-hua/478335/o_04.jpg" width="200" height="130" /></li><br> <li><img src="http:// image.jb51.net/cnblogs_com/hxh-hua/478335/o_05.jpg" width="200" height="130" /></li><br><br> <br> </ul> <br> </div><br><br> </div><br> </body><br> </html><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
