实现图片的循环滚动——JS的简单应用
首先默认都了解JS的循环分支运算符等基本语法
用CSS实现简单的布局也是会的。
然后我们就可以来了解一下
[DOM 树节点]
它分为三大类：元素节点、文本节点、属性节点
文本节点跟属性节点为元素节点的两个子节点。它有什么用呢，我们得取到节点，然后才能通过节点来设置节点的属性，修改样式。
[查看节点]
1.getElementById("div1")通过id获取唯一节点:多个同名ID只会取第一个
2.getElementsByName()通过Name取到一个数组，包含一到多个节点
使用方式，通过循环，取到每个节点。循环次数，从零开始<数组.length
getElementsByClassName()与getElementsByTagName取到的都是数组，用法同getElementsByName()
示例：
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常用的方法我么这里也能用到，而且是最关键的，那就是设置定时器
setInterval:设置定时器，循环每隔N毫秒执行一次
两个参数：需要执行的 function，毫秒数
示例：
var num =10;
var out=setInterval(function(){
document.write(num+"<br/>");
num--;
if(num==0){
clearInterval(out);
}
},1000)
var out=setInterval(function(){
document.write(num+"<br/>");
num--;
if(num==0){
clearInterval(out);
}
},1000)
还有两个很关键的属性，我们要用到：
1.innerHTML属性：设置或者获取节点内部的所有Html代码
2. innerText：设置或者获取节点内部的所有文字
下面是这次主要要实现的功能：首先做一块区域，在里面放下你所需要滚动的图（当然图片大小是一样的，图自己找喽）
<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; }
效果可以自己实践一下=。=，这里就不插图了
