焦点图动态轮播无缝滚动仿小米官网

来源：互联网发布：ubuntu vsftpd安装编辑：程序博客网时间：2024/06/13 05:39
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>学习</title>    <!--页内样式表-->    <link rel="stylesheet" href="css/base1.css" type="text/css"/>    <style>        html, body {            width: 100%;            height: 100%;        }        .fdiv {            position: relative;            width: 500px;            height: 200px;            border: 0px solid seagreen;            margin-top: 50px;            overflow: hidden;        }        ul li {            width: 20px;            height: 20px;            float: left;            line-height: 20px;            text-align: center;            cursor: pointer;            margin-left: 9px;            color: cornflowerblue;            background-color: burlywood;        }        ul li:hover {            background-color: cornflowerblue;            color: brown;        }        .jingguo {            background-color: cornflowerblue;            color: brown;        }    </style></head><body style=" background: lightcoral;"><!--网页主体开始--><div class="fdiv" id="fdiv">    <div id="yes" style="width: 3200px;margin: 0px;padding: 0px;position: absolute;left: 0px;  ">        <img src="img/1.jpg" alt="">        <img src="img/2.jpg" alt="">        <img src="img/3.jpg" alt="">        <img src="img/4.jpg" alt="">        <img src="img/5.jpg" alt="">    </div>    <ul style="position:absolute;    left: 329px;    top: 169px;">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul>    <!--网页主体结束--></div><script src="js/base.js"></script><!--内部js--><script>    var li = getnode("li");    var j1 = 0, j2 = 0;    var yes = getnode("#yes");    var x = 0, y = 0;    var bool = true;    var nimabi = null;    yes.appendChild(yes.children[0].cloneNode(true));    function autoplay(a, b) {        clearInterval(nimabi);        nimabi = setInterval(function () {            if (a) {                x = x + (b - x) / 10;                yes.style.left = -x + "px";            }            else if (!a) {                x = 0;            }//            console.log(x);        }, 30);    }    var dierge;    var a;    var b = 0;    function auto(xxxxxxxxx) {        dierge = setInterval(function () {            a = true;            b = b + 505;            if (xxxxxxxxx != null) {                b = xxxxxxxxx;            }            if (b >= 3030) {                b = 0;                yes.style.left = 0 + "px";                clearInterval(nimabi);                a = false;            }            autoplay(a, b);            a = true;            for (var i = 0; i < li.length; i++) {                li[i].index = i;                li[i].onmouseover = function () {                    clearInterval(dierge);//            clearInterval(nimabi);                    li[0].className = "";                    li[1].className = "";                    li[2].className = "";                    li[3].className = "";                    li[4].className = "";                    li[this.index].className = "jingguo";//            auto(this.index * 505 - 1);                    j2 = 505 * this.index;                    autoplay(1, j2);                    b = this.index * 505;                }            }//            console.log(b / 505);            li[0].className = "";            li[1].className = "";            li[2].className = "";            li[3].className = "";            li[4].className = "";            if (b / 505 >= 0) {                if (b / 505 == 5) {                    li[0].className = "jingguo";                }                else {                    li[b / 505].className = "jingguo";                }            }            else if (b / 505 == 0 || b / 505 == 6) {            }        }, 1700)    }    for (var i = 0; i < li.length; i++) {        li[i].index = i;        li[i].onmouseout = function () {            clearInterval(dierge);            auto();            console.log(this.index * 505);        }    }    function nimabiaaa() {        if (bool) {            auto();        }    }    nimabiaaa();    //    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();    //封装自己的窗口什么的    // 咩咩    window.onload    {        function getnode(a) {            if (a != "") {                var jjj = a.slice(0, 1);                if (jjj == "#") {                    return document.getElementById(a.slice(1));                }                if (jjj == ".") {                    return document.getElementsByClassName(a.slice(1));                }                else {                    return document.getElementsByTagName(a);                }            }        }        //g滚动        function scroll() {            if (window.pageYOffset != null)  //  ie9+ 和其他浏览器            {                return {                    left: window.pageXOffset,                    top: window.pageYOffset                }            }            else if (document.compatMode == "CSS1Compat")  // 声明的了 DTD            // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>            {                return {                    left: document.documentElement.scrollLeft,                    top: document.documentElement.scrollTop                }            }            return { //  剩下的肯定是怪异模式的                left: document.body.scrollLeft,                top: document.body.scrollTop            }        }        function client() {            if (window.innerWidth != null)  // ie9 +  最新浏览器            {                return {                    width: window.innerWidth,                    height: window.innerHeight                }            }            else if (document.compatMode === "CSS1Compat")  // 标准浏览器            {                return {                    width: document.documentElement.clientWidth,                    height: document.documentElement.clientHeight                }            }            return {   // 怪异浏览器                width: document.body.clientWidth,                height: document.body.clientHeight            }        }    }</script><!--外部js--></body></html>
阅读全文
0 0
焦点图 动态轮播无缝滚动 仿小米官网

焦点图动态轮播无缝滚动仿小米官网
