淡入淡出轮播图

Posted 2021-02-13 leslie-cheung1584304774

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了淡入淡出轮播图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,ol,li{
            list-style: none;
        }
        img{
            display: block;
        }
        #banner{
            width: 800px;
            height: 350px;
            border:1px solid #ff0;
            margin:100px auto;
            position: relative;
        }
        #bigImg{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #bigImg li{
            position: absolute;
            top:0;
            left: 0;
        }
        #bigImg li img{
            width: 800px;
            height: 350px;
        }
        #smallImg{
            width: 180px;
            height: 20px;
            position: absolute;
            bottom: 10px;
            right: 0;
        }
        #smallImg li{
            float: left;
            width: 20px;
            height: 20px;
            background: #f00;
            margin-right: 10px;
            border-radius: 50%;
            font-size: 18px;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        #smallImg li.active{
            background: #ff0;
        }
    </style>
    
</head>
<body>
    <div id="banner">
        <ul id="bigImg">
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
            <li><img src="images/6.jpg"></li>
        </ul>
        <ol id="smallImg">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
</body>
</html>
<script src="sport3.js"></script>
<script>
    var timer = null;
    var index = 0;
    var list = document.getElementById("smallImg").children;
    var ul = document.getElementById("bigImg").children;
    timer = setInterval(autoPlay,1500);
    function autoPlay(){
        index++;
        for(var i = 0;i < list.length;i++){
            list[i].className = "";
            startMove(ul[i],"opacity",0);
        }
        if(index == list.length){
            index = 0;
        }
        list[index].className = "active";
        startMove(ul[index],"opacity",100);
    }
    for(let i = 0;i < list.length;i++){
        list[i].onmouseover = function(){
            clearInterval(timer);
            index = i - 1;
            autoPlay();
        }
        list[i].onmouseout = function(){
            timer = setInterval(autoPlay,1500);
        }
    }
</script>

引入的sport3.js文件

//支持 缓冲 + 多物体 + 链式
//  obj ： 运动的对象  
//  attr : 运动的样式
// target ： 目标值
//callback ：代表一个功能    一个函数  当一个函数作为参数时，这样的函数叫做回调函数
//回调 ：回头再调用
function startMove(obj,attr,target,callback){
    clearInterval( obj.timer );
    obj.timer = setInterval( function(){
        //获取实际样式值
        var current = 0;
        if( attr == "opacity" ){
            current = getStyle( obj , attr )*100;
        }else{
            current = parseInt( getStyle( obj , attr ) );
        }
        //获取速度
        var speed = (target - current)/10;
        speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
        //判断结束条件 并设置样式
        if( target == current ){
            clearInterval( obj.timer );
            //上一个动作完成了  开始进入到下一个动作
            //下一个动作不确定  此处有一个功能 是可变的
            if( callback ){//如果用户传递了该参数 就执行下一个动作
                callback();
            }
        }else{
            if( attr == "opacity" ){
                obj.style[attr] = (current + speed)/100;
            }else{
                obj.style[attr] = current + speed + "px";
            }
        }
    },30 )
}

//封装一个函数 功能是获取非行内元素样式值
function getStyle( obj ,attr ){
    if( getComputedStyle ){
        return getComputedStyle( obj,false )[attr];
    }else{
        return obj.currentStyle[attr];
    }
}

以上是关于淡入淡出轮播图的主要内容，如果未能解决你的问题，请参考以下文章