轮播图（一）原生js

最新推荐文章于 2024-04-17 09:52:42 发布

qq_34664510

最新推荐文章于 2024-04-17 09:52:42 发布

阅读量303

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_34664510/article/details/77998511

版权

1.大框架，获取需要用到的html元素并定义js变量

window.onload=function () {
    var container=document.getElementById('container');
    var list=document.getElementById('list');
    var buttons=document.getElementById('buttons').getElementsByTagName('span');
    var prev=document.getElementById('prev');
    var next=document.getElementById('next');
}

2.增加：左右箭头点击事件。animate()

/*左右箭头点击*/
function animate(offset) {          //offset为偏移量
    list.style.left=parseInt(list.style.left)+offset;
}
//右箭头
next.onclick=function () {
    animate(-1075);
}
//左箭头
 prev.onclick=function () {
    animate(1075);
}

3.无限滚动:需要两张辅助图片，位移到辅助图时及时归位。需要判断两张辅助图的位置范围。

function animate(offset) {          //offset为偏移量
    list.style.left=parseInt(list.style.left)+offset;
    if(list.style.left>-1075){
        list.style.left=-5375+'px'
    }
      if(list.style.left<-5375){
        list.style.left=-1075+'px'
    }
}
//右箭头
next.onclick=function () {
    animate(-1075);
}
//左箭头
 prev.onclick=function () {
    animate(1075);
}

优化：新增一个变量

function animate(offset) {          //offset为偏移量
    var newLeft=parseInt(list.style.left)+offset;
    list.style.left=newLeft+'px';

    if(newLeft>-1075){
        list.style.left=-5375+'px'
    }
    if(newLeft<-5375){
        list.style.left=-1075+'px'
    }
}
//右箭头
next.onclick=function () {
    animate(-1075);
}
//左箭头
 prev.onclick=function () {
    animate(1075);
}

4.加上小圆点点亮事件

var index=1;//用来存放当前显示的是第几张图片，以确定点亮第几个小圆点


function showButton() {
        buttons[index-1].className='on';//实际位置和数组位置差1
}

在箭头点击事件中调用

//右箭头
next.onclick=function () {
    index+=1;
    showButton();
    animate(-1075);
}
//左箭头
 prev.onclick=function () {
    index-=1;
    showButton();
    animate(1075);
}

在亮起下一个按钮之前，要关掉之前亮起的按钮。修改showButton()

function showButton() {
      for(var i=0;i<buttons.length;i++){
            if(buttons[i].className=='on'){//当属性值为“on”时，说明已经点亮。将其变为空，结束点亮
                buttons[i].className='';
                break;
            }
        }
      buttons[index-1].className='on';
    }

上述修改，默认index一直加或者一直减。当index超出5或者1时，小圆点不会亮，所以同样需要归位。大于5，归位到1；小于1，归位到5

next.onclick=function () {
        if(index==5){
            index=1;
        }else {
            index+=1;
        }
        showButton();
        animate(-1075);
}
prev.onclick=function () {
        if(index==1){
            index=5;
        }else {
            index-=1;
        }
        showButton();
        animate(1075);
 }

5.给按钮添加点击事件。不是相邻切换，可能有跳转切换，需要计算偏移

for(var i=0;i<buttons.length;i++){
       buttons[i].onclick=function () {
           var myIndex=parseInt(this.getAttribute('index'));//根据index的位置来绝对显示哪一张图片。因为index是自定义的属性，能用getAttribute()获取自定义属性。
           var offset=-1075*(myIndex-index);
           animate(offset);
           index=myIndex;//切换到点击的index获取对应图片后，更新一下index值
           showButton();//点亮更新后的按钮

       }
}

优化：连续点击相同的按钮，程序依然会跑一次，没有意义

for(var i=0;i<buttons.length;i++){
       buttons[i].onclick=function () {
           if(this.className=='on'){
                   return;//优化
           }//当点击同样的图片时，不执行代码
       ...
      }
}

6.动态换图。增加animate（）的功能

function animate(offset) {
        var newLeft=parseInt(list.style.left)+offset;

        /*滑动切换*/
        var time=300;//位移总时间
        var interval=10;//位移间隔
        var speed=offset/(time/interval);//每次的位移量

        //判断是否开始移动，go()是animate()的内部函数
        function go() {
            if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){
                list.style.left=parseInt(list.style.left)+speed+'px';

                //没有达到目标值还需要继续调用go函数
                setTimeout(go,interval);//10毫秒运行一次go函数,递归。每次只执行一次
         }
         //移动到了目标值
            else {
                list.style.left=newLeft+'px';
                if(newLeft>-1075){
                    list.style.left=-5375+'px';
                }
                if(newLeft<-5375){
                    list.style.left=-1075+'px';
                }
            }
        }
      go();
    }

优化：不断的点击箭头，图片不断切换，内存使用较多。需要做成：还在切换时不进行新一轮切换，切换完毕后再进行新的切换

用var animated=false;和var animated=true;调节

7.自动切换

//自动切换，设置一个定时器。每隔3秒,可以一直执行
    function play() {
        timer=setInterval(function () {
            next.onclick();
        },3000);
    }
    //需要停止
    function stop() {
        clearInterval(timer);
    }

最后调用

//给容器加一个鼠标移出，移入事件，来决定是否自动播放
    container.onmouseover=stop;
    container.onmouseout=play;
    play();

全部代码

HTML

<!--pics  slider start-->
<div class="pics" id="container">
     <div id="list" style="left:-1075px">
            <img src="img/Sliderpics/5.jpg">
            <img src="img/Sliderpics/1.jpg">
            <img src="img/Sliderpics/2.jpg">
            <img src="img/Sliderpics/3.png">
            <img src="img/Sliderpics/4.jpg">
            <img src="img/Sliderpics/5.jpg">
           <img src="img/Sliderpics/1.jpg">
      </div>
     <div id="buttons">
           <span index="1" class="on"></span>
           <span index="2"></span>
           <span index="3"></span>
           <span index="4" ></span>
           <span index="5"></span>
     </div>
<a href="javascript:;" id="prev" class="arrow">&lt;</a>
<a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
<!--pics  slider end-->

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

a{
    text-decoration: none;
}
#container{
    width: 1075px;/*图片尺寸*/
    height: 600px;
    /*border: 3px solid #333333;*/
    overflow: hidden;/*溢出隐藏*/
    position: relative;/*定位基准*/
}
#list{
    width: 7525px;/*1075px×7=7525px*/
    height: 600px;
    position: absolute;/*定位*/
    z-index: 1;
}
#list img{
    float: left;
}
#buttons{

    width: 100px;
    height: 10px;
    z-index: 2;/*按钮在list 上方*/
    position: absolute;
    bottom: 20px;
    left: 450px;
}
#buttons span{
    width: 10px;
    height: 10px;
    margin-right: 5px;
    background: #333333;
    border-radius:50% ;
    cursor: pointer;
    float: left;
    border: 1px solid #fff;

}
#buttons .on{
    background:  #A3C4E7;
}
.arrow{
    width: 40px;
    height: 60px;
    line-height: 59px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    display: none;/*默认先不显示*/
    cursor: pointer;
    position: absolute;
    top: 300px;
    background-color: rgba(0,0,0,.3);
    color: #fff;
    z-index: 2;
}
#container:hover .arrow{display: block;}
.arrow:hover{
    background:rgba(0,0,0,.7);
}
#prev{left: 20px;}
#next{right: 20px}

window.onload=function () {
    var container=document.getElementById('container');
    var list=document.getElementById('list');
    var buttons=document.getElementById('buttons').getElementsByTagName('span');
    var prev=document.getElementById('prev');
    var next=document.getElementById('next');
    var index=1;
    var animated=false;
    var timer;
    //亮起小圆点
    function showButton() {
        for(var i=0;i<buttons.length;i++){
            if(buttons[i].className=='on'){
                buttons[i].className='';
                break;
            }
        }
        buttons[index-1].className='on';
    }

    //左右箭头点击
    function animate(offset) {
        animated=true;//优化
        var newLeft=parseInt(list.style.left)+offset;

        //滑动切换
        var time=300;
        var interval=10;
        var speed=offset/(time/interval);//每次的位移量
        //判断是否唯一
        function go() {
            if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){
                list.style.left=parseInt(list.style.left)+speed+'px';

                //继续调用go函数
                setTimeout(go,interval);//10毫秒运行一次go函数,递归。每次只执行一次
            }else {
                animated=false;//优化
                list.style.left=newLeft+'px';
                //实现无限循环的判断
                if(newLeft>-1075){
                    list.style.left=-5375+'px';
                }
                if(newLeft<-5375){
                    list.style.left=-1075+'px';
                }
            }
        }
      go();
    }
    //自动切换，设置一个定时器。每隔3秒,可以一直执行
    function play() {
        timer=setInterval(function () {
            next.onclick();
        },3000);
    }
    //需要停止
    function stop() {
        clearInterval(timer);
    }

    next.onclick=function () {
        if(index==5){
            index=1;
        }else {
            index+=1;
        }
        showButton();
        if(!animated){//优化
            animate(-1075);
        }

    }
    prev.onclick=function () {
        if(index==1){
            index=5;
        }else {
            index-=1;
        }
        showButton();
        if(!animated){//优化
            animate(1075);
        }
    }

    //按钮切换，图片随意跳转
    for(var i=0;i<buttons.length;i++){
       buttons[i].onclick=function () {
           if(this.className=='on'){
               return;//优化
           }
           var myIndex=parseInt(this.getAttribute('index'));
           var offset=-1075*(myIndex-index);

           animate(offset);
           index=myIndex;
           if(!animated){//优化
               showButton();
           }
           debugger;
       }
    }
    //给容器加一个鼠标移出，移入事件，来决定是否自动播放
    container.onmouseover=stop;
    container.onmouseout=play;
    play();
}

qq_34664510

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
轮播图（一）原生js

1.大框架，获取需要用到的html元素并定义js变量window.onload=function () { var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('butt
复制链接

扫一扫