springboot轮播图的代码如何实现

转载

编程小天匠 2024-09-14 16:49:33

文章标签 javascript js ide 轮播图 ci 文章分类 架构后端开发

#轮播图dome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="lbbox">
        <ul class="oUl">
            <a href="">
                <li><img src="./imager/1.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/2.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/3.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/4.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/5.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/1.jpg" alt=""></li>
            </a>
        </ul>
        <span class="lf">〈</span>
        <span class="rg">〉</span>
        <div class="raidusYuan">
            <span class="yuanS"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}
.lbbox{
    width:980px;
    height:420px;
    margin: 80px auto;
    position: relative;
    overflow: hidden;
}
.oUl{
    
    width: 9999999px;
    height:420px;
    position: absolute;
    top: 0;
    left: 0;
}
.oUl a{
    display: block;
    width: 980px;
    height:420px;
    float: left;
}
.oLi a li img{
    width: 980px;
    height:420px;
}
.lf,.rg{
    width: 50px;
    height: 50px;
    position: absolute;
    background: black;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
    font-size:30px;
    color: rgb(255, 255, 255);
    opacity: 0.4;
    cursor: pointer;
}
.lf{
    left: 0;
    top:210px;
}
.rg{
    right: 0;
    top:210px;
}
.yuanS{
    background: black;
}
.raidusYuan{
    width: 300px;
    height: 30px;
    position: absolute;
    left: 327px;
    top: 347px;
}
.raidusYuan span{
    cursor: pointer;
    margin-left: 30px;
    height: 20px;
    border-radius: 50%;
    width: 20px;
    display: block;
    float: left;
    border: solid 1px rgb(255, 255, 255)
}

var timer = null;
//创建定时器的开关
var sliderPage = document.getElementsByClassName('oUl')[0];
//获取ul标签
var moverWidth = sliderPage.children[0].offsetWidth;
//获取一张轮播图的宽度
var num = sliderPage.children.length - 1;
//获取所以轮播图的张数
var leftBtn = document.getElementsByClassName('lf')[0];
//获取左按钮
var rightBtn = document.getElementsByClassName('rg')[0];
//获取右按钮
var oSPan = document.getElementsByClassName('raidusYuan')[0].getElementsByTagName('span')
//获取圆点
var key = true;
//锁
var index = 0;
//创建一个变量用来判断样式圆点在那个位置

function changeIndex(_index){
    //给圆点添加样式函数
    for(var i = 0; i < oSPan.length; i ++){
        //获取每个圆点的位置
        oSPan[i].className = ' ';
        //让当前所有的圆点的class变为空
    }
    oSPan[_index].className = "yuanS"
    //让当前的index的值也就是当前轮播图圆点变为黑色。
}


for(var i = 0; i < oSPan.length; i ++){
    //给当前每一个圆点加点击事件
        (function(i){
            //会触发闭包，使用立即执行函数
            oSPan[i].onclick = function(){
                //添加事件
                key = false;
                //将锁关上
                clearTimeout(timer);
                //清楚定时器
                index = i;
                //让当前的Index等于当前点击按钮对等轮播图的位置
                startMove(sliderPage, {left: - index * moverWidth,},function(){
                    //starMove函数是dom运动函数,让当前ul的位置 减去点击的位置的数字* 宽度
                    key = true;
                    //将锁打开
                    timer = setTimeout(autoMove,1500);
                    //执行图片自己动
                    changeIndex(index)
                    //改变圆点样式
                })
            }
        }(i))
    }


function autoMove(direction){
    //轮播图自左向右自动运动
    clearTimeout(timer)
    //清除定时器
    if(key){
        //先看锁开了没有，如果锁是关着的则不执行，防止两个定时器一起动发生冲突。
        key = false;
        //将锁关闭
        if(!direction || direction == "left->right"){
            //如果当前的值是"left->right"
            index ++;
            //让index加一个值
            startMove(sliderPage,{left : sliderPage.offsetLeft - moverWidth}, function () {
                //图片运动函数，让当前Ul的宽度减去初始的moveWidth宽度
                if(sliderPage.offsetLeft == -num * moverWidth){
                    //如果越界了，当前Ul的宽度等于所有轮播图的张数的宽度
                    index = 0;
                    //让圆点值等于1
                    sliderPage.style.left = '0px';
                    //让轮播图归位第一张
                }
                changeIndex(index);   
                //执行圆点样式
                timer = setTimeout(autoMove,1500);
                //再一次执行自动轮播
                key = true;
                //将锁打开
                console.log(index)
                
            })
        }else if(direction == "right->left"){
            //如果点击是自右向左
            if(sliderPage.offsetLeft == 0){
                //先判断当前的Ul轮播图是不是第一张
                sliderPage.style.left = - num * moverWidth + 'px';
                //如果是让当前ul的宽度值直接等于所有轮播图的最后一张的宽度值
                index = num;
                ///让圆点等于最后一张轮播图位置数字的值
            }
            index --;
            //如果不是第一张就index --一个值
            startMove(sliderPage,{left : sliderPage.offsetLeft + moverWidth,}, function () {
                //执行动画
                changeIndex(index);
                //执行圆点样式
                timer = setTimeout(autoMove,1500);
                //执行自动定时器
                key = true;
                //让锁打开
            })
            
        }
    } 
}

leftBtn.onclick = function(){
    //给左按键添加点击事件
autoMove('right->left');
//传入参数自右向左
}
rightBtn.onclick = function(){
    //给右键添加点击事件
autoMove('left->right');
//传入参数自左向右
}




setTimeout(autoMove,1500);
//初始自动加载函数

//获取当前元素的class值的方法
function getStyle (dom, attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom, null)[attr];
    }else{
        return dom.currentStyle[attr];
    }
}
//动画方法，看之前的博客文章有写到
function startMove(dom, attrObj, callback) {
    clearInterval(dom.timer);
    var iSpeed = null, iCur = null;
    dom.timer = setInterval(function () {
        var bStop = true;
        for (var attr in attrObj) {
            if (attr == 'opacity') {
                iCur = parseFloat(getStyle(dom, attr)) * 100
            } else {
                iCur = parseFloat(getStyle(dom, attr));
            }
            iSpeed = (attrObj[attr] - iCur) / 7;
            iSpeed = iSpeed > 0 ?  Math.ceil(iSpeed) : Math.floor(iSpeed);
            if(attr == 'opacity'){
                dom.style.opacity = (iCur + iSpeed) / 100;
            }else{
                dom.style[attr] = iCur + iSpeed + 'px'
            }
            if( iCur != attrObj[attr]){
                bStop = false;
            }
        }
        if(bStop) {
            clearInterval(dom.timer);
            typeof callback == 'function' && callback()
        }
    }, 30)
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。