完整轮播图

布满荆棘的人生 2022-01-10 20:23 129阅读 0赞

这是一个js写的滚动轮播图，带有焦点，

未解决的bug：跳跃选择页数的时候，图片不能立即滚动过去而是需要一张一张滚动

贴一下代码；

<!DOCTYPEhtml>
    <htmllang="en">
    <head>
    <metacharset="UTF-8">
    <title>轮播图</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    
    li{
    list-style:none;
    }
    
    #screen{
    width:400px;
    height:250px;
    border:5pxsolidred;
    position:absolute;
    top:100px;
    left:50px;
    overflow:hidden;
    }
    
    #screenul{
    width:1000%;
    position:absolute;
    }
    
    #screenli{
    float:left;
    }
    
    #screenimg{
    width:400px;
    height:250px;
    }
    
    #arrspan{
    width:40px;
    height:40px;
    position:absolute;
    left:5px;
    top:50%;
    margin-top:-20px;
    background:#000;
    cursor:pointer;
    line-height:40px;
    text-align:center;
    font-weight:bold;
    font-family:'黑体';
    font-size:30px;
    color:#fff;
    opacity:0.3;
    border:1pxsolid#fff;
    }
    
    #arr{
    display:none;
    }
    
    #arr#right{
    right:5px;
    left:auto;
    }
    
    ol{
    position:absolute;
    right:10px;
    bottom:10px;
    line-height:20px;
    text-align:center;
    }
    
    olli{
    float:left;
    width:20px;
    height:20px;
    background:#fff;
    border:1pxsolid#ccc;
    margin-left:10px;
    cursor:pointer;
    }
    
    olli.current{
    background:#DB192A;
    }
    </style>
    </head>
    <body>
    <divid="screen">
    <ul>
    <li><imgsrc="../images/11.jpg"alt=""></li>
    <li><imgsrc="../images/12.jpg"alt=""></li>
    <li><imgsrc="../images/13.jpg"alt=""></li>
    <li><imgsrc="../images/14.jpg"alt=""></li>
    <li><imgsrc="../images/15.jpg"alt=""></li>
    </ul>
    <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ol>
    <divid="arr">
    <spanid="left"><</span>
    <spanid="right">></span>
    </div>
    </div>
    </body><script>
    //获取盒子
    varscreen=document.getElementById("screen");
    //获取ul
    varulObj=screen.children[0];
    //获取li
    varlist=ulObj.children;
    //获取图片的宽度
    varlistWidth=list[0].offsetWidth;
    //获取焦点
    vararrObj=document.getElementById("arr");
    //获取ol
    varolObj=screen.children[1];
    varindex=0;
    //鼠标进入时显示小标签背景色
    for(vari=0;i<olObj.children.length;i++){
    
    //给每一个小标签设置索引
    olObj.children[i].setAttribute("index",i);
    
    olObj.children[i].onmouseover=function(){
    //先清理背景色
    for(varj=0;j<olObj.length;j++){
    olObj.children[j].className="";
    }
    this.className="current";
    //获取索引值
    varindex=this.getAttribute("index");
    
    animation(ulObj,-index*listWidth);
    };
    olObj.children[i].onmouseout=function(){
    this.className="";
    }
    
    }
    //克隆第一张图片
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    //自动播放
    vartimeId=setInterval(clickHandle,1000);
    //设置鼠标进入显示焦点
    screen.οnmοuseοver=function(){
    arrObj.style.display="block";
    clearInterval(timeId);
    }
    screen.onmouseout=function(){
    arrObj.style.display="none";
    timeId=setInterval(clickHandle,1000);
    }
    //左焦点
    document.getElementById("left").οnclick=function(){
    if(index==0){
    index=list.length-1;
    ulObj.style.left=-index*listWidth+"px";
    }
    index--;
    animation(ulObj,-index*listWidth);
    }
    //右焦点
    document.getElementById("right").οnclick=clickHandle();
    functionclickHandle(){
    if(index==list.length-1){
    index=0;
    ulObj.style.left="0px";
    }
    index++;
    animation(ulObj,-index*listWidth);
    }
    
    /*
    *设置动画函数
    *@paramelement,对象
    *@paramtarget,移动到的目标位置
    **/
    functionanimation(element,target){
    
    //先清理定时器
    clearInterval(element.timeid);
    element.timeid=setInterval(function(){
    //获取元素当前位置
    varcurrent=element.offsetLeft;
    //每次移动的步数
    varstep=10;
    step=current<target?step:-step;
    current+=step;
    if(Math.abs(target-current)<Math.abs(step)){
    clearInterval(element.timeid);
    //直接到达target
    element.style.left=target+"px";
    }else{
    element.style.left=current+"px";
    }
    
    },20);
    }
    
    
    </script>
    
    </html>

转载于:https://www.cnblogs.com/daiSir/p/10429020.html