html部分
<body>
<div id="box">
<div id="lunbo">
<ul>
<li><img src="./imgs/1.jpg" alt="" style="width: 500px;"></li>
<li><img src="./imgs/2.jpg" alt="" style="width: 500px;"></li>
<li><img src="./imgs/3.jpg" alt="" style="width: 500px;"></li>
<li><img src="./imgs/4.jpg" alt="" style="width: 500px;"></li>
<li><img src="./imgs/5.jpg" alt="" style="width: 500px;"></li>
<li><img src="./imgs/6.jpg" alt="" style="width: 500px;"></li>
</ul>
<ol><!-- 动态生成底部序号圆点 -->
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>
css部分
/* 轮播图的css代码 */
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/* 大盒子样式开始 */
/* 大盒子样式开始 */
#box{
width: 500px;
height: 196px;
margin: 0 auto;
margin-top: 50px;
position: relative;
border: 2px solid darkmagenta;
}
#box #lunbo{
width:500px;
height: 200px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
/* 以下5行代码控制，li中嵌套的元素横向排列 */
#box #lunbo ul{
width: 3500px;
height: 200px;
position: absolute;
}
#box #lunbo ul li{
display: inline;
float: left;
}
/* 无序列表下面原点样式开始 */
#box #lunbo ol{
width: auto;
height: auto;
/* background-color: green; */
position: absolute;
top: 180px;
right: 0px;
}
#box #lunbo ol li{
width: 13px;
height: 15px;
/* border-radius: 50%; */
border: 1px solid rebeccapurple;
float: left;
margin-right: 8px;
color: black;
line-height: 13px;
text-align: center;
cursor: pointer;
}
.bar{
background-color: chartreuse;
}
/* 无序列表下面原点样式结束 */
/* 两边箭头样式开始 */
#arr #left,#right{
width: 30px;
height: 30px;
background-color: grey;
position: absolute;
cursor: pointer;
font-size: 20px;
text-align: center;
line-height: 26px;
}
#arr #left{
top: 42%;
left: 0;
}
#arr #right{
top:42% ;
right: 0;
}
/* 两边箭头样式结束 */
/* 大盒子样式结束 */
js部分
<script>
/* 完成整个的动画轮播图需要以下步骤：
1、动态添加下方原点，根据ul中li的数量。。通过class Name的形式设置样式，默认第一个原点对应第一个图片
2、鼠标点击原点上，动画版切换图片
3、鼠标不进入轮播时，图片自己动画版播放
4、鼠标放在图片上，显示箭头
5、点击箭头，图片按照动画版切换
*/
//1、动态添加下方原点，根据ul中li的数量。。通过class Name的形式设置样式，默认第一个原点对应第一个图片
//获取元素
var box=my$('box');
var lunbo=my$('lunbo');
var ul=lunbo.children[0];
var ol=lunbo.children[1];
var arr=my$('arr');
var left=my$('left');
var right=my$('right');
//获取图片宽度
var imgWidth=lunbo.offsetWidth;
//记录图片总共多少张
var num=ul.children.length;
var timerId;
var index=0; //记录当前图的索引，第一次打开页面，默认第一张图片，index=0，
for(var i=0; i<num; i++){
var li=document.createElement('li');
ol.appendChild(li);
li.innerHTML=i+1;
if(i===0){
//给第一个设置样式
li.className='bar';
}
//设置属性，记录ol中每一个li的索引
li.setAttribute('index',i);
// 2、鼠标点击原点上，动画版切换图片，每一个原点都需要添加
//如果写在for循环里面，需要在循环过程中，创建多次click事件，所以移出去，在循环里面添加
li.onclick=liclick;
}
function liclick() {
//2.1 点击原点的时候，所有原点背景消失，当前原点背景高亮显示
for(var i=0; i<ol.children.length; i++){
ol.children[i].className='';
}
this.className='bar';
//2.2 点击图片时，以动画的形式切换到当前图片，切换到第一张需要移动0个图片宽度距离，切换到第2张移动1张图片的宽度距离，也就是，按照下标索引移动
//使用attribute设置的属性下标都是字符串格式，使用parseInnt转换成number
//获取自定义属性
var liIndex=parseInt(this.getAttribute('index'));
//移动的是ul，向左移动是负,ul不要忘记加绝对定位，否则没有效果
animate(ul, -liIndex*imgWidth,10);
//优化1：让全局下的index与此处的ol下的li的值相等，方便控制点击箭头和圆点处所对应的下标相同
index=liIndex;
}
//4、鼠标进入轮播区域时，显示箭头，3、计时器停止
box.onmouseenter=function(){
arr.style.display='block';
clearInterval(timerId);
}
box.onmouseleave=function(){
arr.style.display='none';
timerId=setInterval(function(){
right.click(); //代码模拟，让系统自己点击
},1500);
}
//复制第一张图片，并追加到ul中
var firstLi=ul.children[0];
var copyli=firstLi.cloneNode(true);
ul.appendChild(copyli);
//5、点击箭头，图片按照动画版切换，相应的圆点高亮显示
//5.2 下一张无缝滚动；5.3上一张无缝滚动
//右边箭头，是下一张
right.onclick=function(){
//在点击箭头之后，判断是否是克隆的第一张图片，如果是，则换到真正的第一张，修改ul的left，同时下标index也修改为第一张图片队形的下标也就是index=0
if(index===num){ //说明已经是复制的图片
ul.style.left='0px';
index=0;
}
//总共有num张图片，最后还有一个克隆的图片，克隆的图片索引是num
index++;
if(index<num){ //num前面有定义：ul中图片的数量
// animate(ul, -imgWidth*index,10);
//切换后相应的原点高亮显示方法2：利用按钮自带的click方法，btn.click();
// 当我在点击左右箭头里面，直接使用brn.click()方法，直接调用让系统自己点击圆点，实现切换同时高亮，前面的annimate也不需要了
ol.children[index].click();
}else{
//切换到复制的那一张
animate(ul,-index * imgWidth,10);
//并把第一张的圆点样式高亮显示
for(var i=0; i<ol.children.length; i++){
ol.children[i].className='';
}
ol.children[0].className='bar';
}
}
left.onclick=function(){
//上一张无缝滚动
//判断是否是第一张，是第一张，点击左箭头切换到最后一张（就是复制后的第一张图片）原来是num张图片，加上最后复制的一共num+1张，索引是num
if(index===0){
index=num;
ul.style.left=-index*imgWidth+'px';
}
index--;
ol.children[index].click();
/*
//判断是否是第一张，是则不做切换，不是则index--
if(index>0){
index--;
// animate(ul,-imgWidth*index,10);
//高亮显示圆点，和上面一样的道理
ol.children[index].click();
} */
}
// 3、鼠标不进入轮播时，图片自己动画版播放，鼠标进入盒子时，计时器停止，离开盒子计时器开始
/* 设置定时器 */
var timerId=setInterval(function(){
right.click(); //代码模拟，让系统自己点击
},1500);
//当点击向右的箭头时，切换到最后一张图片的时候，在点击箭头，会跳转到第2张图片，目标时点击后不动
/* 原因:索引由index记录，当轮播到最后一张图片的时候，此时，index超出num-1，跳出index++，恢复到index=0的状态
再次点击箭头，就会index++，变成1.则直接跳转到第2张。
解决方法：点击箭头里面的index是全局变量，在点击圆点的时候，也定义了ol下li的索引也是index
只需要让他们对应的值相等即可。*/
//无缝滚动
/* 实现方法：当滚动到最后一张图片时，将第一个图片复制一份【复制后ul的li中由num+1张图片，但num是之前就计算好的，num还是num】，滚动大最后的时候，在点击箭头，切换到复制的那一张
在点击下一张时，悄悄的移动到真正的第一张，并把图片的索引也修改为0，然后继续向下切换 */
</script>
其中 引入了js文件common.js (通用的处理函数)和animate.js
animate.js部分之前有写，发过。
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
