网页设计轮播图代码_html三张图片的轮播代码

网页设计轮播图代码_html三张图片的轮播代码网页轮播图是我们网页常常需要使用的效果,现在也有各种框架或是插件可以很好地实现网页轮播图,但了解其布局及js实现原理也是很有必要的,尤其是对于刚接触js的人,学会轮播图的实现原理,对js的理解及深入学习也是大有裨益的,于是跟着视频教学,编写了网页轮播图,代码分享如下: 一、html布局代码 <

网页设计轮播图代码_html三张图片的轮播代码"

网页轮播图是我们网页常常需要使用的效果,现在也有各种框架或是插件可以很好地实现网页轮播图,但了解其布局及js实现原理也是很有必要的,尤其是对于刚接触js的人,学会轮播图的实现原理,对js的理解及深入学习也是大有裨益的,于是跟着视频教学,编写了网页轮播图,代码分享如下:

一、html布局代码

<body>
    <div class="mylunbo">
        <a href="javascript:;" class="arrow-l"><</a>
        <a href="javascript:;" class="arrow-r">></a>
        <ul>
            <li>
                <a href="#"><img src="2.png" width="720" height="432" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="1.png" width="720" height="432" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="3.jpeg" width="720" height="432" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="4.jpeg" width="720" height="432" alt="" /></a>
            </li>
        </ul>
        <ol class="circle">

        </ol>
    </div>
</body>

二、css层叠样式表

*{
    padding:0;
    margin:0;
}
.mylunbo{
    margin:20px auto;
    position: relative;
    width: 720px;
    height: 432px;
    /*background-color: purple;*/
    overflow: hidden;
}
img{
    width:720px;
    height:432px;
}
.mylunbo ul{
    position: absolute;
    top: 0;
    left: 0;
    width:500%;
}
ul li{
    float:left;
    list-style-type: none;
}
ol li{
    list-style-type: none;
}
.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;/*高度40,上移20*/
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
}
.arrow-r {
    right: 0;
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 350px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(240, 120, 120, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}
.current {
    background-color: #fff;
}
a:hover{
    color:red;
}

三、js代码(animate.js+index.js)

function animate(obj,length,callback){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var step=(length-obj.offsetLeft)/10; // 缓动效果,步长=(目标值-当前值)/10
        step=step>0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==length){
            clearInterval(obj.timer);
            if(callback)
                callback();
            //callback && callback()
        }
            obj.style.left=obj.offsetLeft+step+'px';
        },15);
}
window.addEventListener('load',function(){
    const lunbo=document.querySelector(".mylunbo");
    const arrowl=document.querySelector(".arrow-l");
    const arrowr=document.querySelector(".arrow-r");
    var num=0;  // 左右移动按钮定位图片
    var circle=0;  // 定位小圆点
    var flag=true;  // 节流阀
    //1、右侧按钮,左侧按钮
    lunbo.addEventListener('mouseenter',function(){
        arrowl.style.display='block';
        arrowr.style.display='block';
        clearInterval(timer);  // 清楚计时器,轮播图不自动播放
        //timer=null;  // 清楚timer变量
    });
    lunbo.addEventListener('mouseleave',function(){
        arrowl.style.display='none';
        arrowr.style.display='none';
        timer=setInterval(function(){
            arrowr.click();
        },2000);
    });
    //2、创建小圆点
    const ul=lunbo.querySelector("ul");
    const ol=lunbo.querySelector("ol");
    for(let i=0;i<ul.children.length;i++){  // 根据图片数量生成小圆点
        let li=document.createElement("li");
        li.setAttribute('index',i);  // 添加自定义属性index
        ol.appendChild(li);
        //3、添加小圆圈点击事件
        li.onclick=function(){
            for(let i=0;i<ol.children.length;i++){
                ol.children[i].className='';
            }
            this.className='current';
            //4、小圆圈动画
            let lunbowidth=lunbo.offsetWidth;
            let index=this.getAttribute('index');
            num=circle=index;  // 点击小圆点时,将num和circle的值赋值为index,即将小圆点顺序和左右按钮的num定位到当前图片
            animate(ul,-index*lunbowidth);  // 调用动画函数,-index*lunboWidth为终点位置
        }
    }
    //5、克隆子元素-->ABCDA,此时最后一张图为第一张图的复制!!
    let child=ul.children[0].cloneNode(true);
    ul.appendChild(child);
    ol.children[0].className='current';
    //6、右侧按钮点击事件
    arrowr.addEventListener('click',function(){
        if(flag){
            flag=false;  // 未完成轮播动画,不能轮播,设置为false
            if(num==ul.children.length-1){
                ul.style.left=0;  // 当点击到最后一个图片时,即和第一幅图相同的那张,num为ul.children.length-1,先切换到第一张(很快),执行动画切换到第二张
                num=0;  // num重新设为0,后面再加1
            }
            num++;
            animate(ul,-num*lunbo.offsetWidth,function(){
                flag=true;  // 将flag设置为true,可以再次点击轮播
            });
            circle++;
            if(circle==ol.children.length)  // 当小圆圈移动到最后,点击右移,circle+1,此时circle为ol.children.length
                circle=0;
            setCurrent();
        }
    })
    //7、左侧点击事件
    arrowl.addEventListener('click',function(){
        if(flag){
            flag=false;
            if(num==0){
                num=ul.children.length-1;  // 当轮播图为第一张图时,num设为最后一张图的index,之后再减一
                ul.style.left=-num*lunbo.offsetWidth+'px';  // 先切换到最后一张图,之后再调用动画函数到实际倒数第二图
            }
            num--;
            animate(ul,-num*lunbo.offsetWidth,function(){
                flag=true;
            });
            circle--;
            if(circle==-1)  // 当小圆圈在第一个位置时,点击左移,circle-1,此时circle为-1
                circle=ol.children.length-1;
            setCurrent();
        }
    });
    var timer=setInterval(function(){
        arrowr.click();
    },2000);
    function setCurrent(){
        for(let i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        ol.children[circle].className='current';
    }
})

源码分享:

链接:https://pan.baidu.com/s/1DrXnGKlahm4XhdCmTjFvDg
提取码:2ldh

今天的文章网页设计轮播图代码_html三张图片的轮播代码分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/48792.html

(0)
编程小号编程小号
上一篇 2023-09-03 19:06
下一篇 2023-09-03

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注