标签：space nowrap else banner man 方式 doc -- position
首先默认都了解JS的循环分支运算符等基本语法
用CSS实现简单的布局也是会的。
然后我们就可以来了解一下
function getById(){ //取到属性节点 // var divById = document.getElementById("div1").style; //取到元素节点 var divById = document.getElementById("div1"); //divById.style.backgroundColor = "blueviolet";//节点属性用小驼峰命名 divById.style.color="green"; divById.innerHTML="<h5>cherishLi</h5>";//重置修改div里的中的HTML代码 if(divById.style.backgroundColor == "blue"){ divById.style.backgroundColor = "red"; } else{ divById.style.backgroundColor = "blue"; }
一个windows常用的方法我么这里也能用到，而且是最关键的，那就是设置定时器
还有两个很关键的属性，我们要用到：
<section id="banner"> <div id="inside"> <img src="../img/12168431_1036060226444795_851404817_o_z1lzd7.jpg"/> <img src="../img/12388071_1065320530185431_2076280306_n_g93ygx.jpg"/> <img src="../img/12656432_1094243637293120_49905962_o_dk24or.jpg"/> <img src="../img/12903800_1136073019776848_60542799_o_rewsfx.jpg"/> <img src="../img/12910198_1136068819777268_2019684994_n_shntwd.jpg"/> </div> </section>
然后设置一下样式（如何在只能显示四张图的区域放下十张图）
*{ margin: 0px; padding: 0px; } #banner{ width: 440px; height: 110px; overflow: hidden; white-space: nowrap; } #inside{ width: 1100px; height: 110px; position: relative; white-space: nowrap; transition: all 0.5s ease; } #inside img{ float: left; }
最后是JS代码,应该已经很明了了。每隔1s滚动100px，滚完5张，计数器清零。
var manyImg= document.getElementById("inside"); manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML; // console.log(manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML); var i=0; var gun = setInterval(function(){ i++; manyImg.style.transition="all 0.5s ease"; switch (i){ case 1: manyImg.style.transition="none"; inside.style.marginLeft = 0+"px"; break; case 2: inside.style.marginLeft = (-110)+"px"; break; case 3: inside.style.marginLeft = (-110-110)+"px"; break; case 4: inside.style.marginLeft = (-110-110*2)+"px"; break; case 5: inside.style.marginLeft = (-110-110*3)+"px"; break; case 6: inside.style.marginLeft = (-110-110*4)+"px" i = 0; break; case 7: inside.style.marginLeft = (-110-110*5)+"px"; break; case 8: inside.style.marginLeft = (-110-110*6)+"px"; break; case 9: inside.style.marginLeft = (-110-110*7)+"px"; break; case 10: inside.style.marginLeft = (-110-110*8)+"px"; break; case 11: inside.style.marginLeft = (-110-110*9)+"px"; break; default: break; } },1000)
如果需要加上数字按钮控制对应的图片，只需用ul或者div做好按钮，加上一个函数控制就行
<ul id="bannerNumber"> <li onclick="changeBan(1)">1</li> <li onclick="changeBan(2)">2</li> <li onclick="changeBan(3)">3</li> <li onclick="changeBan(4)">4</li> </ul>
function changeBan(num1){ switch(num1){ case 1: inside.style.marginLeft = 0+"px"; break; case 2: inside.style.marginLeft = (-110)+"px"; break; case 3: inside.style.marginLeft = (-110-110)+"px"; break; case 4: inside.style.marginLeft = (-110-110*2)+"px"; break; case 5: inside.style.marginLeft = (-110-110*3)+"px"; break; } i=num1-1; }
效果可以自己实践一下=。=，这里就不插图了
标签：space nowrap else banner man 方式 doc -- position
原文地址：http://www.cnblogs.com/cherishli/p/6717520.html
