本文介绍了一个使用CSS和JavaScript实现的图片轮播效果。通过清除默认样式、绝对定位以及动态调整图片left值，实现了图片在绿色背景框内平滑切换。同时，利用JavaScript动态调整小方块（导航点）的颜色，使其跟随图片切换状态。文章还讨论了如何处理图片轮播到最后一张时的无缝衔接问题，确保了图片轮播的连贯性。
<style>
*{margin: 0;
padding: 0;}/*为何整个ul距离div上左还有较大距离，浏览器默认样式（清除即可）*/
#outer{
width: 520px;
height: 332px;
margin: 200px auto;
background-color:greenyellow;
padding: 10px 0;
position: relative;
/*最后隐藏溢出的ul，只显示当前outer中的ul中的img*/
overflow: hidden;
}
#imglist{
width: 3120px;
/*为何最后一张上不来？,因为outer仅为固定相框，imglist才是胶卷可溢出*/
list-style: none;
position: absolute;
/*——————————————————————————————————————————*/
/*JS1：动态调整图片left值*/
/*——————————————————————————————————————————*/
/* left: -520px; */
/*为什么上来显示第二张，点第一个a块能到第一张，之前最初尝试加的left还在，去掉即可*/
}
#imglist li{
float: left;
margin: 0 10px;
}
#navDIV{
position: absolute;/*为何此刻用poa，第一被盖住看不见必须开（后开的在上方），因为后期还要根据outer的por调整位置*/
bottom: 15px;
/*——————————————————————————————————————————*/
/*Js2：将小方块居中*/
/*——————————————————————————————————————————*/
/* left:（ 520-25*5）/2=197.5 ；*/
left: 197px;
}
#navDIV a{
/*变成小红块*/
width: 15px;
height: 15px;
background-color: red;
/*发现内联样式优先级比样式表高，因此必须转换为快元素，为何不转为block？不转为poa是因为其父div意见有了整体根据outer定位，内部不需要开了*/
float: left;
/*方块连一起了*/
margin:0 5px;
}
#navDIV a:hover{
/*——————————————————————————————————————————*/
/*JS3:动态调整按钮颜色*/
/*——————————————————————————————————————————*/
background-color: black;
}
</style>
<script src="./tools.js"></script>
<script>
window.onload=function(){
/*——————————————————————————————————————————*/
/*JS1：动态调整图片left值*/
/*——————————————————————————————————————————*/
/*单击按钮才变化其left值*/
var imglist=document.getElementById("imglist");
var ALLarr =document.getElementsByTagName("a");
autochange();
for(var i=0;i<ALLarr.length;i++)
{ ALLarr[i].number=i;
ALLarr[i].onclick=function(){
/*-----------------------------------------------------------------------------------*/
clearInterval(timer);
/*单击的优先级比autochange高，清除定时器停止自动切换,何时打开呢？等到单击move动画切换的效果结束，开启定时器（即autochange函数），在move回调函数中开启interval*/
/*-----------------------------------------------------------------------------------*/
/*单机后获取其单击按钮是第几个，对应改left；*/
/* alert(i);单击完i一直是5，先执行循环在执行单击响应函数。*/
index=this.number;//现在的index即代表按钮的索引
/* alert(index); */
/*——————————————————————————————————————————————————————————————————————————————*/
/*单击时直接切换图片效果*/
/* imglist.style.left=index*-520+"px"; *//*第一张为0，从此以后4张分别为该动的分别为1234，正好匹配4张。*/
/*——————————————————————————————————————————————————————————————————————————————*/
//放到单击函数中，使得每次点击时a块都变红，并让点击的块变黑。
getblack();
/*首先通过判断变黑的点，在autochange（）中，通过在move中调用了getblack（）函数，在getblack中判断是否为最后一个，此时图片整体向左移动完，只剩最后一张相框内 。*/
/*要起到自动播放返回第一张的效果，借助黑块判断数量找到第一个黑块，就要在最后一张结束的瞬间将整体诺回到还未移动的状态，并且将index归零，将黑块也回到第一个*/
/*getblack()内的循环代表通过for循环将所有按钮变红（再将选中的变黑，仅这一次），这只完成一个，所需效果需要所有，再放到循环里。*/
/*——————————————————————————————————————————————————————————————————————————————*/
/*单击时移动切换图片效果*/
/* move(imglist,"left",index*-520,20,function(){}); */
/*——————————————————————————————————————————————————————————————————————————————*/
//调用移动函数，attr为 “left”改变的属性，speed在tools中专门写的不分正负。移动目标位置带负的——因为在左边。
/*两动画同时进行，并且单击函数优先级更高。*/
move(imglist,"left",index*-520,20,function(){
//重新开启自动切换函数，否则失去自动切换功能。
autochange();
});
}
}
/*解决第一个黑块显示的问题*/
ALLarr[0].style.backgroundColor="black";
/*——————————————————————————————————————————*/
/*Js2：将小方块居中*/
/*——————————————————————————————————————————*/
var navDIV =document.getElementById("navDIV");
var outer = document.getElementById("outer");
/* navDIV.style.left=(outer.offsetWidth-navDIV.offsetWidth)/2; ，不生效*/
navDIV.style.left=(outer.offsetWidth-ALLarr.length*25)/2 +"px";
/*无需找小方块为多少，小方块总的起来即为大navdiv的宽度，元素.offsetwidth,即为获取元素宽度*/
/*navDIV.offsetwidth不生效，因此尝试小的加起来，即为宽度width+10margin=25，乘上a的个数，即为数组ALLarr的长度。；*/
/*——————————————————————————————————————————*/
/*JS3:动态调整按钮颜色*/
/*——————————————————————————————————————————*/
var index=0;//默认显示图片的索引为0；
var imgarr=document.getElementsByTagName("img");
function getblack(){
if(index >= imgarr.length-1)
//设置这个整个是为了看点，index没有变0意味着没有执行，因为要查看的数组length搞错了，不是imglist，而是imgarr
{index = 0;
imglist.style.left=0+"px";}
//即为将左移到头的ul全部右移至left为0的位置，重新到第一张img，由于没有动画切换效果，不明显的障眼法。
for(var i=0;i<ALLarr.length;i++)//注意此刻必须是《，不能《=，否则多出一个，共5，从0 开始 《5， 《=5则6个人.
{ /*这就写完放到onclick里，不用再写一个了*/
ALLarr[i].style.backgroundColor="";}
//但写完发现 a：hover 失效，因为这是内联样式，优先级比样式表高，a自身的backgroundcolor为红色， a：hover 的bakcgoroudcolor为黑色
/*——————————————————————————————————————————————————————————————————————————————————————————————————————————————————*/
//这里的 “ ”空串导致的是 ALLarr[i] 即为覆盖 a全部的backgroundcolo么？，此时要实现空串必须是自身的样式表backgoroundcolor才会变成红色
/*——————————————————————————————————————————————————————————————————————————————————————————————————————————————————*/
ALLarr[index].style.backgroundColor="black";
}
/专门创建一个函数，专门放置autochange函数/
var timer;
function autochange(){
//需要一个索引值使得定时器中能够自动切换图片
/为啥一直不能用？原因就是因为这里的数组长度应该是img的长度，而不是imglist——ul的数组长度，所以出错！/
timer = setInterval(function(){
//index值不断自增达到根据索引切换图片的效果。
index++; //此时的index必须放到定时器中，否则不循环，否则仅仅执行一次，就不执行了，出现只切换一次的bug。
//自动切换图片，效果与move函数一样，只是不需要点，通过定时器自动运行。
//此时出现第一个问题，当图片切换到最后一张时，在切换，往左移出现大绿块，此时需要的效果应该为继续向左移并出现第一张img。
//解决问题：1.首先在imglist中将img.1放到最后，即开头与结尾均为img1，为啥不显示？关闭overflow-hidden发现问题，ul宽度不够(div仅为框)。
// 2.此时开头结尾均为img1，但还要解决后面大绿块的问题，即解决index不能无限增加的问题。
/* index %= imgarr.length; */
/* if(index>=imgarr.length)
index=0; */
/*解决index无限增加的问题，此处也可不写，毕竟要调用getblack的，在getblack里进行判断了。*/
move(imglist,"left",index*-520,20,function(){
getblack();
}); },2000)
//已经能够实现自动切换的效果，放到哪里运行呢？流程应该为 autochange ， onclick ，clearinterval， 在onclick动画切换结束时继续运行autochange；
}
}
-
<li> <img src="./2.jpg" alt=""> </li> <li> <img src="./3.jpg" alt=""> </li> <li> <img src="./4.jpg" alt=""> </li> <li> <img src="./5.jpg" alt=""> </li> <li> <img src="./1.jpg" alt=""> </li> </ul> <div id="navDIV"> <a href="javascript:;"></a><a href="javascript:;"></a> <a href="javascript:;"></a><a href="javascript:;"></a> <a href="javascript:;"></a><!-- <a href="javascript:;"></a> --> <!-- <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> --> <!-- 现在a在下方（因为ul尚未浮动，若根据left进行定位， 则需开启定位就上去了，此时a就必须开定位，否则被盖住了，然后进行位置的调整） --> </div> </div>
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
