我的第一篇文章、哈哈、有点小鸡冻。
之前在百度搜索“图片轮播”、“图片滚动”，结果都是那种可以左右切换的。也是我们最常见的那种。可能是搜索 关键字的问题吧。
如图：
教程效果图：
教程开始：
HTML代码：
1 <body> 2 <div id="div1"> 3 <div id="div4"> 4 <div id="div2"> 5 <img src="img/1.jpg" alt="图片1"/> 6 <img src="img/2.jpg" alt="图片2"/> 7 <img src="img/3.jpg" alt="图片3"/> 8 <img src="img/4.jpg" alt="图片4"/> 9 </div> 10 <div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域--> 11 </div> 12 </div> 13 </body>
CSS代码：
1 <style type="text/css"> 2 div,img{ 3 margin:0; 4 padding:0; 5 } 6 img{ 7 float:left; 8 height:100px; 9 width:150px; 10 } 11 #div1{ 12 width:500px; 13 height:100px; 14 overflow: hidden; 15 border:solid blue 2px; 16 } 17 #div2,#div3{ 18 float:left; 19 } 23 #div4{ 24 width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/ 25 float:left; 26 } 27 </style>
JavaScript代码：
1 <script type="text/javascript"> 2 window.onload=function(){ 3 var v1=document.getElementById('div1'); 4 var v2=document.getElementById('div2'); 5 var v3=document.getElementById('div3'); 6 7 v3.innerHTML= v2.innerHTML;//将v2容器里面的图片插入到v3容器里面 使其空白区域被遮住。 8 function fun(){ 9 if(v1.scrollLeft<=0){ 10 v1.scrollLeft=600; 11 }else{ 12 v1.scrollLeft--; 13 } 14 } 15 16 var fun1=setInterval(fun,10); 17 18 v1.onmouseover = function() {//鼠标经过时 清除定时器 停止图片的滚动 19 clearInterval(fun1) 20 }; 21 v1.onmouseout = function() {//鼠标离开后 继续滚动图片 22 fun1 = setInterval(fun, 10) 23 }; 24 } 25 26 </script>
教程结束。
本人新手一个、请大神们多多指教。
此处省略一万字...