简单的轮播图

Posted 2021-02-13 leslie-cheung1584304774

tags:

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul,ol {
                list-style: none;
            }
            
            img {
                display: block;
            }
            
            .slider {
                width: 490px;
                height: 170px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 5px;
                position: relative;
            }
            
            .inner {
                width: 100%;
                height: 100%;
                background-color: pink;
                position: relative;
                overflow: hidden;
            }
            
            .inner ul {
                width: 1000%;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .inner ul li {
                float: left;
            }
            
            .slider ol {
                position: absolute;
                left: 50%;
                bottom: 10px;
            }
            
            .slider ol li {
                float: left;
                width: 18px;
                height: 18px;
                background-color: #fff;
                margin-right: 10px;
                text-align: center;
                line-height: 18px;
                cursor: pointer;
            }
            
            .slider ol li.current {
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div class="slider" id="slider">
            <div class="inner">
                <ul id="box">
                    <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
                </ul>
            </div>
            <ol id="bt">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
    </body>
</html>
<script src="common.js"></script>
<script>
    var index = 0;
    var moveTimer = null;
    var olist = $id("bt").children;
    var ulist = $id("box").children;
    moveTimer = setInterval(autoPlay,1500);
    function autoPlay(){
        index++;
        for(var i = 0;i < olist.length;i++){
            olist[i].className = "";
        }
        if(index == olist.length){
            index = 0;
        }
        olist[index].className = "current";
        move($id("box"),-index * ulist[0].offsetWidth);
    }
    for(let i = 0;i < olist.length;i++){
        olist[i].onmouseover = function(){
            clearInterval(moveTimer);
            index = i - 1;
            autoPlay();
        }
        olist[i].onmouseout = function(){
            moveTimer = setInterval(autoPlay,1500);
        }
    }
    function move(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - obj.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(target == obj.offsetLeft){
                clearInterval(obj.timer);
            }else{
                obj.style["left"] = obj.offsetLeft + speed + "px";
            }
        },30);
    }
</script>

引入的common.js文件

//定义一个函数 功能是根据id查找页面元素
function $id( id ){
    return document.getElementById( id );
}
//创建元素
function create(ele){
    return document.createElement(ele);
}

//获取任意区间的整数值
function rand( min , max ){
    return Math.round( Math.random()*(max-min) + min );
}

//随机获取六位十六进制颜色值 
function getColor(){
    var str = "0123456789abcdef";
    var color = "#";
    for( var i = 1 ; i <= 6 ; i++ ){
        color += str.charAt( rand(0,15) );
    }
    return color;
}

//自定义日期时间格式
function dateToString(now,sign){
    //默认日期的间隔符为  -  如果用户传递的是/  就使用/  .  如果用户不传递任何参数 默认是-
    sign = sign || "-";
    var y = now.getFullYear();
    var m = toTwo(  now.getMonth()+ 1  ) ;
    var d = toTwo(  now.getDate() );
    var h = toTwo(  now.getHours() );
    var _m = toTwo(  now.getMinutes() );
    var s = toTwo( now.getSeconds() ) ;
    var str = y + sign + m + sign + d + " " + h + ":" + _m + ":" + s;
    return str;
}
//判断得到的结果是否小于10 如果小于10，前面拼接0
function toTwo(val){
    return val < 10 ? "0"+val : val;
}

//验证码 ： 字母和数字组成
function yzm(){
    //小写字母   大写字母   数字
    //48--122 随机获取一个code值  判断编码值如果在 58--64   91--96 两个区间，就重新抽取
    //如果不在上面的两个区间内，就将code转成字符， 拼接到字符串中
    var str = "";//拼接6位的验证码
    for( var i = 1 ; i <= 6 ; i++ ){
        var code = rand( 48 , 122 );
        if( code >= 58&&code <= 64 || code >= 91 && code <= 96 ){
            //就重新抽一次
            i--;
        }else{
            var ch = String.fromCharCode( code );
            str += ch;
        }
    }
    return str;
}

//碰撞函数
function pz(d1,d2){
    R1 = d1.offsetWidth+d1.offsetLeft;
    L1 = d1.offsetLeft;
    T1 = d1.offsetTop;
    B1 = d1.offsetHeight + d1.offsetTop;
    
    R2 = d2.offsetWidth+d2.offsetLeft;
    L2 = d2.offsetLeft;
    T2 = d2.offsetTop;
    B2 = d2.offsetHeight + d2.offsetTop;
    
    //如果碰不上 返回false 
    if( R1 < L2 || B1 < T2 || T1 > B2 || L1 > R2 ){
        return false;
    }else{
        return true;
    }
}

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