zoukankan      html  css  js  c++  java

  • JS原生轮播图

     小米菜单案例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米菜单案例</title>
    <style>
        body, h2, ul {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            color: black;
            text-decoration: none;
        }
        .title {
            background-color: #ddd;
            overflow: hidden;
            line-height: 60px;
        }
        .title h2 {
            float: left;
        }
        .title ul {
            float: right;
        }
        .title li {
            float: left;
            margin: 0 5px;
            line-height: 23px;
            margin-top: 20px;
            cursor: pointer;
        }
        .title li.active {
            color: #FF6700;
            border-bottom: 2px solid #FF6700;
            transition: .2s;
        }
    </style>
    <style>
        .main {
            overflow: hidden;
        }
        .main a {
            display: block;
             300px;
            height: 400px;
            text-align: center;
        }
        .main li {
            float: left;
             300px;
            height: 400px;
            background-color: orange;
            margin-right: 14px;
        }
        .main img {
             260px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="title">
            <h2>搭配</h2>
            <ul>
                <li class="active">热门</li>
                <li>耳机音响</li>
                <li>电源</li>
                <li>电池与储蓄卡</li>
            </ul>
        </div>
        <ul class="main">
            <li>
                <a href="javascript:void(0)">
                    <h2>小米音响</h2>
                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
                    <p>这是小米音响, 稍微解释一下</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <h2>小米音响</h2>
                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
                    <p>这是小米音响, 稍微解释一下</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <h2>小米音响</h2>
                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
                    <p>这是小米音响, 稍微解释一下</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <h2>小米音响</h2>
                    <img src="https://i1.mifile.cn/a4/cf6660a3-d424-4248-889f-0eed1e99a342" alt="">
                    <p>这是小米音响, 稍微解释一下</p>
                </a>
            </li>
        </ul>
    </div>
</body>

<!--设置导航-->
<script>
(function () {
    // 制造数据(模拟后台请求得到的)
    let data = [
        [
            {
                title: "热门1",
                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
                info: "这是热门"
            },
            {
                title: "热门2",
                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
                info: "这是热门"
            },
            {
                title: "热门3",
                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg1e99a342",
                info: "这是热门"
            },
            {
                title: "热门4",
                img_url: "https://i1.mifile.cn/a4/xmad_15435448534832_SAPDq.jpg",
                info: "这是热门"
            }
        ], [
            {
                title: "耳机1",
                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
                info: "这是耳机"
            },
            {
                title: "耳机2",
                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
                info: "这是耳机"
            },
            {
                title: "耳机3",
                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
                info: "这是耳机"
            },
            {
                title: "耳机4",
                img_url: "https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg",
                info: "这是耳机"
            }
        ], [], []
    ];

    let lis = document.querySelectorAll('.title li');
    // 设置一个记录活跃li索引的状态变量
    let active_index = 0;
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            // 清除之前活跃的
            lis[active_index].className = "";
            // 设置自身为活跃
            this.className = "active";
            // 更新活跃索引
            active_index = i;

            // 更新数据
            updateData(i);
        }
    }

    // 更新数据
    let main_lis = document.querySelectorAll('.main li');
    // 分析数据结构与页面结构,将指定数据渲染到指定位置
    function updateData(index) {
        let dataArr = data[index];
        // let count = 0;
        // for (dataObj of dataArr) {
        //     // console.log(dataObj.title);
        //     let h2 = main_lis[count].querySelector('h2');
        //     h2.innerText = dataObj.title;
        //     let img = main_lis[count].querySelector('img');
        //     img.setAttribute('src', dataObj.img_url);
        //     let p = main_lis[count].querySelector('p');
        //     p.innerText = dataObj.info;
        //     count++;
        // }
        for (let i = 0; i < dataArr.length; i++) {
            let h2 = main_lis[i].querySelector('h2');
            h2.innerText = dataArr[i].title;
            let img = main_lis[i].querySelector('img');
            img.setAttribute('src', dataArr[i].img_url);
            let p = main_lis[i].querySelector('p');
            p.innerText = dataArr[i].info;
        }
    }
    
})()
</script>

<!--完成数据更新-->
<script>
(function () {
    let lis = document.querySelectorAll('.main li');
})()
</script>

<!--
<script>
    var lis = document.querySelectorAll('.title li');
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            // 悬浮的li变成活跃状态, 之前活跃的li取消活跃状态

            // 移除所有的
            clearAllClassName()
            // 添加自己的
            this.className = "active"
        }
    }
    function clearAllClassName() {
        for (li of lis) {
            li.className = "";
        }
    }
</script>
-->

</html>

    轮播图

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style >
        * {
            /*不允许选择文本, 网页文本不能负责*/
            user-select: none;
        }
        body, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .scroll {
             1226px;
            height: 460px;
            margin: 0 auto;
            /*background-color: orange;*/
            position: relative;
            cursor: pointer;
        }
        .scroll_view {
             100%;
            height: 100%;
            position: relative;
        }
        .scroll_view li {
            background: red;
             100%;
            height: 100%;
            font: normal 100px/460px 'STSong';
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .scroll_view li.active {
            opacity: 1;
            transition: .5s;
        }
        .left {
            position: absolute;
            top: 170px;
            left: 0;
            background-color: #eee;
            font-size: 100px;
        }
        .left:hover, .right:hover {
            cursor: pointer;
            background-color: #333;
        }
        .right {
            position: absolute;
            top: 170px;
            right: 0;
            background-color: #eee;
            font-size: 100px;
        }

        .scroll_tag {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .scroll_tag li {
             10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            border: 3px solid #ddd;
            float: left;
            margin: 0 10px;
        }
        .scroll_tag li.active {
            background-color: #ccc;
            border: 3px solid #333;
        }
    </style>
</head>
<body>
<div class="scroll">
    <ul class="scroll_view">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul class="scroll_toggle">
        <li class="left"><</li>
        <li class="right">></li>
    </ul>
    <ul class="scroll_tag">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script>
(function () {
    let left_btn = document.querySelector('.left');
    let right_btn = document.querySelector('.right');
    let img_lis = document.querySelectorAll('.scroll_view li');
    let tag_lis = document.querySelectorAll('.scroll_tag li');
    let scroll = document.querySelector('.scroll');

    // 定时器
    let timer = 0;

    // 记录活跃状态的索引变量
    let active_index = 0;

    // 下一张
    right_btn.onclick = function () {
        // 清除之前活跃的图片和tag
        img_lis[active_index].className = "";
        tag_lis[active_index].className = "";

        // 索引切换(更新活跃索引)
        // 安全性: 最后一张的下一张应该是第一张
        if (active_index == 4) active_index = -1;
        active_index++;

        // 设置将要活跃的图片和tag
        img_lis[active_index].className = "active";
        tag_lis[active_index].className = "active";
    };
    // 上一张
    left_btn.onclick = function () {
        // 清除之前活跃的图片和tag
        img_lis[active_index].className = "";
        tag_lis[active_index].className = "";

        // 索引切换(更新活跃索引)
        // 安全性: 第一张的前一张应该是最后一张
        if (active_index == 0) active_index = 5;
        active_index--;

        // 设置将要活跃的图片和tag
        img_lis[active_index].className = "active";
        tag_lis[active_index].className = "active";
    };

    // 自动轮播
    function autoScroll() {
        timer = setInterval(function () {
            // 清除之前活跃的图片和tag
            img_lis[active_index].className = "";
            tag_lis[active_index].className = "";

            // 索引切换(更新活跃索引)
            // 安全性: 最后一张的下一张应该是第一张
            if (active_index == 4) active_index = -1;
            active_index++;

            // 设置将要活跃的图片和tag
            img_lis[active_index].className = "active";
            tag_lis[active_index].className = "active";
        }, 1500);
    }
    // 加载页面就只执行一次,打开自动轮播
    autoScroll();

    // 鼠标悬浮轮播图停止自动轮播
    scroll.onmouseenter = function () {
        clearInterval(timer)
    };
    // 鼠标移开重新开启自动轮播
    scroll.onmouseleave = function () {
        autoScroll();
    };

    // tag点击对应的图片切换
    for (let i = 0; i < tag_lis.length; i++) {
        tag_lis[i].onclick = function () {
            // console.log(i);
            // 清除之前活跃的图片和tag
            img_lis[active_index].className = "";
            tag_lis[active_index].className = "";

            // 更新活跃索引
            active_index = i;

            // 设置将要活跃的图片和tag
            img_lis[active_index].className = "active";
            tag_lis[active_index].className = "active";
        }
    }

})()
</script>
</html>

    滚动轮播

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滚动轮播</title>
    <style>
        body, ul {
            margin: 0;
            padding: 0;
            list-style: none;
            user-select: none;
        }

        .wrapper {
             400px;
            height: 240px;
            background-color: orange;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        /* 滚得的标签是ul, 带动着4个li同步运动 */
        .scroll_view {
             1600px;
            /*利用绝对定位完成运动*/
            position: absolute;
            top: 0;
            /*left: -400px;*/
            left: 0;
            /*transition: 1s;*/
        }
        .scroll_view li {
             400px;
            height: 240px;
            font: normal 80px/240px 'STSong';
            text-align: center;
            float: left;
        }
        .li1 { background-color: pink }
        .li2 { background-color: deeppink }
        .li3 { background-color: lightpink }
        .li4 { background-color: hotpink}

        .left {
            position: absolute;
            top: 100px;
            left: 0;
            background-color: #eee;
            font-size: 30px;
        }
        .left:hover, .right:hover {
            cursor: pointer;
            background-color: #333;
        }
        .right {
            position: absolute;
            top: 100px;
            right: 0;
            background-color: #eee;
            font-size: 30px;
        }

        .scroll_tag {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .scroll_tag li {
             10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            border: 3px solid #ddd;
            float: left;
            margin: 0 10px;
        }
        .scroll_tag li.active {
            background-color: #ccc;
            border: 3px solid #333;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="scroll_view">
            <li class="li1">1</li>
            <li class="li2">2</li>
            <li class="li3">3</li>
            <li class="li4">4</li>
        </ul>
        <ul class="scroll_toggle">
            <li class="left"><</li>
            <li class="right">></li>
        </ul>
        <ul class="scroll_tag">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
(function () {
    let scroll_view = document.querySelector('.scroll_view');
    let left_btn = document.querySelector('.left');
    let right_btn = document.querySelector('.right');
    let tag_lis = document.querySelectorAll('.scroll_tag li');
    
    right_btn.onclick = function () {
        let total_lenth = 400;
        let count = 0;
        let step = 8;
        let timer = setInterval(function () {
            // 通过滚动的距离映射出所在的图片索引
            let index = parseInt(-scroll_view.offsetLeft / total_lenth);
            index += 1;
            console.log(index);
            // 临界点, 往右4
            if (index == 4) {
                clearInterval(timer);
                return;
            }

            // 0+1 ==> 1
            // 1+1 ==> 2
            // 2+1 ==> 3
            tag_lis[index - 1].className = "";
            tag_lis[index].className = "active";

            scroll_view.style.left = scroll_view.offsetLeft - step + 'px';
            count++;
            if (count >= total_lenth / step) {
                clearInterval(timer)
            }
        }, 10);
    };

    left_btn.onclick = function () {
        let total_lenth = 400;
        let count = 0;
        let step = 8;
        let timer = setInterval(function () {
            // 要偏移坐标系, 要加上一个宽度400 total_lenth
            // 要处理第一次偏移bug, 少加上8 step
            let index = parseInt((-scroll_view.offsetLeft + 392) / total_lenth);
            console.log(index);
            // 处理第一次偏移bug

            // 3 => 2
            // 2 => 1
            // 1 => 0
            // 临界点, 往左0
            if (index == 0) {
                clearInterval(timer);
                return;
            }
            // if (index == 4) index = 3;
            tag_lis[index].className = "";
            tag_lis[index - 1].className = "active";

            scroll_view.style.left = scroll_view.offsetLeft + step + 'px';
            count++;
            if (count >= total_lenth / step) {
                clearInterval(timer)
            }
        }, 10);
    }
})()
</script>
</html>

    　　

    更好的方式实现滚动轮播

    <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>最简单的轮播效果</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        .box {

             500px;

            height: 300px;

            border: 1px solid #ccc;

            margin: 100px auto;

            padding: 5px;

 

        }

        .inner{

             500px;

            height: 300px;

            position: relative;

            overflow: hidden;

        }

        .inner img{

             500px;

            height: 300px;

            vertical-align: top

        }

        ul {

             1000%;

            position: absolute;

            list-style: none;

            left:0;

            top: 0;

        }

        .inner li{

            float: left;

 

        }

 

        ol {

            position: absolute;

            height: 20px;

            right: 20px;

            bottom: 20px;

            text-align: center;

            padding: 5px;

        }

        ol li{

            display: inline-block;

             20px;

            height: 20px;

            line-height: 20px;

            background-color: #fff;

            margin: 5px;

            cursor: pointer;

 

        }

        ol .current{

            background-color: red;

        }

        #arr{

            display: none;

        }

        #arr span{

             40px;

            height: 40px;

            position: absolute;

            left: 5px;

            top: 50%;

            margin-top: -20px;

            background: #fff;

            cursor: pointer;

            line-height: 40px;

            text-align: center;

            font-weight: bold;

            font-family: '黑体';

            font-size: 30px;

            color: #000;

            opacity: 0.5;

            border: 1px solid #fff;

        }

        #arr #right {

            right: 5px;

            left: auto;

        }

    </style>

</head>

<body>

<div class="box" id="box">

    <div class="inner">

        <!--轮播图-->

        <ul>

            <li><a href="#"><img src="images/1.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/2.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/3.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/4.jpg" alt=""></a></li>

            <li><a href="#"><img src="images/5.jpg" alt=""></a></li>

 

        </ul>

 
        <!-- 小按钮数量无法确定，由js动态生成 -->
        <ol class="bar">

        </ol>

        <!--左右焦点-->

        <div id="arr">

                    <span id="left">

                        <

                    </span>

            <span id="right">

                        >

                    </span>

        </div>

    </div>

</div>

<script>

    /**

     *

     * @param id  传入元素的id

     * @returns {HTMLElement | null}  返回标签对象，方便获取元素

     */

    function my$(id) {

        return document.getElementById(id);
    }
    //获取各元素，方便操作

    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;

    var olObj=inner.children[1];

    var arr=my$("arr");

    var imgWidth=inner.offsetWidth;

    var right=my$("right");

    var pic=0;

    //根据li个数，创建小按钮

    for(var i=0;i<list.length;i++){

        var liObj=document.createElement("li");
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);


        //为按钮注册mouseover事件

        liObj.onmouseover=function () {

            //先清除所有按钮的样式
            for (var j=0;j<olObj.children.length;j++){

                olObj.children[j].removeAttribute("class");
            }

            this.className="current";

            pic=this.getAttribute("index");

            animate(ulObj,-pic*imgWidth);

        }

    }

    //设置ol中第一个li有背景颜色

    olObj.children[0].className = "current";

    //克隆一个ul中第一个li,加入到ul中的最后=====克隆

    ulObj.appendChild(ulObj.children[0].cloneNode(true));

 

    var timeId=setInterval(onmouseclickHandle,1000);

    //左右焦点实现点击切换图片功能

    box.onmouseover=function () {

        arr.style.display="block";

        clearInterval(timeId);

    };

    box.onmouseout=function () {

        arr.style.display="none";

        timeId=setInterval(onmouseclickHandle,1000);

    };

 

    right.onclick=onmouseclickHandle;

    function onmouseclickHandle() {

        //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,

        //所以,如果用户再次点击按钮,用户应该看到第二个图片

        if (pic == list.length - 1) {

            //如何从第6个图,跳转到第一个图

            pic = 0;//先设置pic=0

            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置

        }

        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了

        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片

        //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,

        if (pic == list.length - 1) {

            //第五个按钮颜色干掉

            olObj.children[olObj.children.length - 1].className = "";

            //第一个按钮颜色设置上

            olObj.children[0].className = "current";

        } else {

            //干掉所有的小按钮的背景颜色

            for (var i = 0; i < olObj.children.length; i++) {

                olObj.children[i].removeAttribute("class");

            }

            olObj.children[pic].className = "current";

        }

    }

    left.onclick=function () {

        if (pic==0){

            pic=list.length-1;

            ulObj.style.left=-pic*imgWidth+"px";

        }

        pic--;

        animate(ulObj,-pic*imgWidth);

        for (var i = 0; i < olObj.children.length; i++) {

            olObj.children[i].removeAttribute("class");

        }

        //当前的pic索引对应的按钮设置颜色

        olObj.children[pic].className = "current";

    };

 

    //设置任意的一个元素,移动到指定的目标位置

    function animate(element, target) {

        clearInterval(element.timeId);

        //定时器的id值存储到对象的一个属性中

        element.timeId = setInterval(function () {

            //获取元素的当前的位置,数字类型

            var current = element.offsetLeft;

            //每次移动的距离

            var step = 10;

            step = current < target ? step : -step;

            //当前移动到位置

            current += step;

            if (Math.abs(current - target) > Math.abs(step)) {

                element.style.left = current + "px";

            } else {

                //清理定时器

                clearInterval(element.timeId);

                //直接到达目标

                element.style.left = target + "px";

            }

        }, 10);

    }

</script>

</body>

</html>

    　　

    　　
  • 相关阅读:
    消息中间件
    线程以及多线程
    锁以及分布式锁
    并发以及高并发
    SpringBoot + SpringCloud学习踩坑实记
    公众号笔记： 2018年12月
    浅谈final关键字的用法
    浅谈static关键字的四种用法
    Linux常用的一些命令
    HTTPS
  • 原文地址：https://www.cnblogs.com/596014054-yangdongsheng/p/10169887.html
Copyright © 2011-2022 走看看