前段时间，自己试着写了一个带有焦点图轮播的代码，思路大概是这样的，首先，想写无间断滚动图片的函数，于是：
var flag=0;
var scroll=document.getElementById("scroll");
var pic=scroll.getElementsByTagName("div");
var scrolldots=document.getElementById("scrolldots");
var dots=scrolldots.getElementsByTagName("span");
function show(){
pic[flag].style.display="block"; //对应的div样式变为"block"
dots[flag].style.backgroundColor="#fff";
//对应的小圆点的样式改变
for(var i=0,len=pic.length;i<len;i++){
pic[i].id=i;
dots[i].id=i;
if(i!=flag){
pic[i].style.display="none";
dots[i].style.backgroundColor="#e3daef";
}
}
flag++;
if(flag==pic.length){
flag=0;
}
//通过for循环把剩余的样式改变
};
var show1=setInterval(show,3000);
接着，又想写点击上一张下一张的事件和点击小圆点的事件，于是：
var pic_scroll=document.getElementById("pic_scroll");
var a=pic_scroll.getElementsByTagName("a");//获取的是左右两个剪头的图标
function handler(){
//获取到当前显示的图片的id,并将它赋值给falg3;
for(var i=0,len=pic.length;i<len;i++){
if(pic[i].style.display=='block'){
flag3=i;
}
}
//如果是左键头的情况，判断并作出相应的改变
if(this.id==0){
if(flag3==0){
flag3=len-1;
}else {
flag3--;
}
pic[flag3].style.display="block";
for(var i=0;i<len;i++){
if(i!=flag3){
pic[i].style.display="none";
}
}
}
//如果是右箭头的情况，判断并作出相应的改变
else if(this.id==1){
if(flag3==len-1){
flag3=0;
}
else {
flag3++;
}
pic[flag3].style.display="block";
for(var i=0;i<len;i++){
if(i!=flag3){
pic[i].style.display="none";
}
}
}
}
//又完成了点击小圆点的事件函数，其中小圆点的id和图片滚动的id是对应的，所以只需判断点击的是哪个小圆点然后改变相应的样式就可以了。
for(var i=0;i<dots.length;i++){
dots[i].id=i;
EventUtil.addHandler(dots[i],"click",function(){
dots[this.id].style.backgroundColor="#fff";
pic[this.id].style.display="block";
for(var i=0;i<pic.length;i++){
if(i!=this.id){
pic[i].style.display="none";
dots[i].style.backgroundColor="#e3daef";
}
}
});
以上的函数基本都是想到哪写哪看上去比较乱。
又写了一个图片滑动轮播的函数，感觉较上面那个条理一些。
首先，addloadEvent是写到public.js里面的一个函数，大概相当于window.onload=function(){};接着，把需要用到的变量首先都获取到。然后我首先写的是next（下一张）和prev（上一张）的点击函数，在这其中，涉及到图片滑动的距离和相应的小圆点背景色的改变。把图片滑动的距离封装成一个函数animate(),把对应的小圆点背景色改变封装成函数showButton(),index被定义成一个全局变量，记录的是背景色为对应背景色的小圆点的id。接下来是小圆点的点击函数通过点击的index减去当前的index然后乘以相应的位移数。最后完成对图片不断滚动的效果的实现，即响度昂与不断触发next.onclick函数。
addLoadEvent(function(){
var pic_scroll=document.getElementById("pic_scroll");
var scroll_content=document.getElementById("scroll_content");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=1;
var timer;//自动播放的变量
var animated=false;//代表滚动图片已经结束;
function showButton(){
for (var i=0;i<buttons.length;i++)
{
if(buttons[i].className=="on")
{
buttons[i].className="";
}
}
buttons[index-1].className="on";
}
function animate(offset){
var newleft=parseInt(scroll_content.style.left)+offset;
var time=300;//位移总时间
var interval=10;//位移间隔时间
var speed=offset/(time/interval);//每次的位移量
function go(){
if((speed<0&&parseInt(scroll_content.style.left)>newleft)||(speed>0&&parseInt(scroll_content.style.left)<newleft)){
scroll_content.style.left=parseInt(scroll_content.style.left)+speed+'px';
setTimeout(go,interval);//interval时间后运行go函数
animated=true;
}else {
animated=false;
if(newleft<-4989){
newleft=-1663;
}
if(newleft>-1663)
{
newleft=-1663;
}
scroll_content.style.left=newleft+'px';
}
}
go();
}
prev.onclick=function(){
if(animated==false){
animate(1663);
}
if(index==1){
index=3
}else{
index--;
}
showButton();
}
next.onclick=function(){
if(animated==false)
{
animate(-1663);
}
if(index==3){
index=1;
} else
{
index++;
}
showButton();
}
for (var i=0;i<buttons.length;i++)
{
buttons[i].onclick=function(){
var myindex=this.getAttribute("index");
if(myindex==index){
return;
}
var offset=-1663*(myindex-index);
index=myindex;
if(animated==false)
{
animate(offset);
}
showButton();
}
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
pic_scroll.onmouseover=stop;
pic_scroll.onmouseout=play;
play();
})