完美代码
<script>
window.onload = function () {
//1.获取标签
var slider = document.getElementById('slider');
var slider_scroll = document.getElementById('slider_scroll');
var slider_ctrl = document.getElementById('slider_ctrl');
var slider_main = document.getElementById('slider_main');
var slider_pics = slider_main.children;
var slider_w = slider.offsetWidth;
var iNow = 0;//用来记录当前显示的图片的索引
//2.操作标签
//2.1添加span,用来控制下面的跳转
for(var i= 0;i < slider_pics.length;i ++){
//创建span
var mySpan = document.createElement('span');
//2.11绑定索引
mySpan.innerHTML = slider_pics.length - i;
mySpan.className = 'slider-ctl-icon';
//插入span,每次都插入到 第2个标签之前 (2对应的索引是1)
slider_ctrl.insertBefore(mySpan,slider_ctrl.children[1]);
}
slider_ctrl.children[1].className = 'slider-ctl-icon current';
//2.2让除了第一张图片,都放在第一张图片的后面
//遍历除了第一张的图片
for(var i = 1;i < slider_pics.length;i++){
slider_pics[i].style.left = slider_w +'px';
}
//2.3点击span,做对应的操作
//遍历span
for(var i = 0;i < slider_ctrl.children.length;i ++){
//2.31取出span
var mySpan = slider_ctrl.children[i];
//2.32点击span,判断类型,然后做对应的操作
mySpan.onmousedown = function () {
//根据类名来判断点击了那个span
if(this.className == 'slider_left'){
//让当前图片移动到右边,我们需要搞一个值用来记录当前显示的图片
buffer(slider_pics[iNow],{left:slider_w});
//让上张图片快速定位到左边
iNow --;
if (iNow < 0){
iNow = slider_pics.length - 1;
}
slider_pics[iNow].style.left = -slider_w +'px';
//让上一张图片快速移动到当前的位置
buffer(slider_pics[iNow],{left:0});
}else if(this.className == 'slider_right'){
//当前图片左移
buffer(slider_pics[iNow],{left:-slider_w});
iNow ++;
if (iNow > slider_pics.length -1){
iNow = 0;
}
//让下一张图片快递定位到右边
slider_pics[iNow].style.left = slider_w + 'px';
//让下一张图片移动到当前的位置
buffer(slider_pics[iNow],{left:0});
}else {
//我们要获取点击的span的索引,要和当前的图片比较
//一般做法:就是在创建span的时候绑定索引
var index = this.innerHTML - 1;
//判断
if(index > iNow){//点击右边
//让当前的图片快速左移
buffer(slider_pics[iNow],{left:-slider_w});
//让索引对应的值快速定位右边
//让当前的值等于index
iNow = index;
slider_pics[index].style.left = slider_w + 'px';
//让索引对应的值快速移动到当前位置
buffer(slider_pics[iNow],{left:0});
}else if(index < iNow){//左边
//让当前的图片快速右移
buffer(slider_pics[iNow],{left:slider_w});
//让索引对应的值快速定位左边
//让当前的值等于index
iNow = index;
slider_pics[index].style.left = -slider_w + 'px';
//让索引对应的值快速移动到当前位置
buffer(slider_pics[iNow],{left:0});
}
}
//更新索引
changeIndex();
}
}
//3.更新索引
function changeIndex(indx) {
//就是让当前索引对应的span显示对应的颜色,其他原来的颜色
//使用排他
for(var i = 1;i < slider_ctrl.children.length -1;i ++){
slider_ctrl.children[i].className = 'slider-ctl-icon';
}
slider_ctrl.children[iNow +1].className = 'slider-ctl-icon current'
}
//4自动滚动
var timer = setInterval(autoPlay,1000)
/*抽取自动滚动的函数
* */
function autoPlay() {
//相当于点击了右键
//当前图片左移
buffer(slider_pics[iNow],{left:-slider_w});
iNow ++;
if (iNow > slider_pics.length -1){
iNow = 0;
}
//让下一张图片快递定位到右边
slider_pics[iNow].style.left = slider_w + 'px';
//让下一张图片移动到当前的位置
buffer(slider_pics[iNow],{left:0});
//更新索引
changeIndex();
}
//5.当移动到slider,停止定时器,离开就开启定时器
slider.onmouseover = function () {
clearInterval(timer);
}
slider.onmouseout = function () {
timer = setInterval(autoPlay,1000);
}
}
</script>
网友评论