关于轮播图的制作

Posted 2021-01-28 lzxgg-xl

tags:

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

今天看了好久写了好久注释都在代码里直接上代码了
今天写这个的时候意识到了变量的重要性
在这里面下路导航的变量跟上边含图片的标签的变量分不清很难受以后不能这么写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图啊QAQ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 590px;
            height: 470px;
            margin: 100px auto;
            border: 2px solid #ccc;
        }

        img {
            vertical-align: top;
        }

        .inner {
            width: 590px;
            height: 470px;
            position: relative;

            overflow: hidden;

        }

        .inner ul {
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .inner li {
            float: left;
            list-style: none;
        }

        .indicators {
            width: 1000%;
            position: absolute;
            left: 490px;
            top: 452px;
        }

        .indicators ul {
            width: 100px;
            height: 18px;
            background: rgba(0, 0, 0, 0.1);
            line-height: 15px;
            border-radius: 10px;
        }

        .indicators li {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: #fff;
            text-align: center;
            margin-right: 10px;
            font-size: 10px;
            cursor: pointer;
        }

        .indicators .current {
            background-color: skyblue;
        }

        .hah {
            position: relative;
            left: 0;
            top: 220px;
            display: none;
        }

        .hah span {
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.3);

        }

        .left {
            position: absolute;
            left: 0;
        }

        .right {
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div class="inner" id="ph">
        <ul>
            <li><a href="#"><img src="11.jpg" alt=""></a></li>
            <li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt=""></a></li>
            <li><a href="#"><img src="33.jpg" alt=""></a></li>
            <li><a href="#"><img src="44.jpg" alt=""></a></li>
            <!--<li><a href="#"><img src="11.jpg" ></a></li>-->
        </ul>
        <div class="indicators" id="nav">
            <ul>

            </ul>
        </div>
        <div class="hah" id="ying">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取最外面的div
    var box =  my$("box");
    //获取相框宽度
    var imgWidth = box.children[0].offsetWidth;
    //获取含有图片的ul
    var ulobj =box.children[0].children[0];
    //获取含有图片的所有li标签  获取了所有标签就能获取她的个数了
    var liobj = ulobj.children;
    //获取右下角的小导航栏
    var indicator = box.children[0].children[1].children[0];
    //设置一个使得全部元素公用的索引
    var indexBttom = 0;
    //复制第一个li 添加到最后
    var heyLi = ulobj.children[0].cloneNode(true);
    ulobj.appendChild(heyLi);
    //第一步先根据图片的个数做出来相应导航栏的个数
    for (var i = 0;i < liobj.length-1;i++){
        var tempLi = document.createElement("li");
        //为创建的li添加索引
        tempLi.setAttribute("index",i);
        //设置li里面的内容
        tempLi.innerHTML = i+1;
        indicator.appendChild(tempLi);
        //以上添加完毕 接着注册鼠标进入的事件
        tempLi.onmouseover = function () {
            //取消所有li的样式
            for (var j = 0;j < indicator.children.length;j++){
                indicator.children[j].removeAttribute("class");
                //写这个的时候容易把上述获得的  含有图片的li误当作indicator中的li
            }
            //为当前li 添加背景颜色
            this.className = "current";
            //在这里获取她的索引值
            indexBttom = this.getAttribute("index");
            //获取之后进行动画效果
            animation(ulobj,-indexBttom*imgWidth);
        }

    }
    indicator.children[0].className = "current";

    //第二步写左右箭头
    //先设置经过box的时候显示  不经过的时候隐藏
    box.onmouseover = function () {
        my$("ying").style.display = "block";
    }
    box.onmouseout = function () {
        my$("ying").style.display = "none";
    }
    //分别获得左右箭头
    var arryL = my$("ying").children[0];
    var arryR = my$("ying").children[1];
    //两个箭头这里  写法不尽相同  因为右箭头到越界的位置的时候 不能再遍历进行去除 必须手动去除
    //而到了左箭头这里 由于0的索引值有对应的indicator 所以直接遍历去除就行 不用再分情况
    arryL.onclick = function () {
        //进来判断位置
        if (indexBttom == 0){
            //到达最左端
            indexBttom = liobj.length-1;
            ulobj.style.left = -(indexBttom)*imgWidth + "px";
        }
        indexBttom--;
        //进行动画效果
        animation(ulobj,-indexBttom*imgWidth);
        for (var i = 0;i < indicator.children.length;i++){
            indicator.children[i].removeAttribute("class");
        }
        //再赋值给相应元素
        indicator.children[indexBttom].className = "current";
        }

    arryR.onclick = function () {
            if ( indexBttom == liobj.length-1){
                indexBttom = 0;
                ulobj.style.left = 0+"px";
            }
            indexBttom++;
            //进行动画效果
            animation(ulobj,-indexBttom*imgWidth);
            if (indexBttom == liobj.length-1) {
                // 取消最后一个背景颜色
                indicator.children[indicator.children.length-1].removeAttribute("class");
                //设置第一个li背景颜色
                indicator.children[0].className = "current";
            }
            else {
                //先排它
                for (var i = 0;i < indicator.children.length;i++){
                     indicator.children[i].removeAttribute("class");
                }
                //再赋值给相应元素
                indicator.children[indexBttom].className = "current";
            }



    }


</script>
</body>
</html>

今天自己改进了代码准确说重写了一遍思路清晰了不少，上代码!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图啊QAQ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 590px;
            height: 470px;
            margin: 100px auto;
            border: 2px solid #ccc;
        }

        img {
            vertical-align: top;
        }

        .inner {
            width: 590px;
            height: 470px;
            position: relative;

            overflow: hidden;

        }

        .inner ul {
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .inner li {
            float: left;
            list-style: none;
        }

        .indicators {
            width: 1000%;
            position: absolute;
            left: 490px;
            top: 452px;
        }

        .indicators ul {
            width: 100px;
            height: 18px;
            background: rgba(0, 0, 0, 0.1);
            line-height: 15px;
            border-radius: 10px;
        }

        .indicators li {
            float: left;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: #fff;
            text-align: center;
            margin-right: 10px;
            font-size: 10px;
            cursor: pointer;
        }

        .indicators .current {
            background-color: skyblue;
        }

        .hah {
            position: relative;
            left: 0;
            top: 220px;
            display: none;
        }

        .hah span {
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.3);

        }

        .left {
            position: absolute;
            left: 0;
        }

        .right {
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div class="inner" >
        <ul>
            <li><a href="#"><img src="11.jpg" alt=""></a></li>
            <li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt=""></a></li>
            <li><a href="#"><img src="33.jpg" alt=""></a></li>
            <li><a href="#"><img src="44.jpg" alt=""></a></li>
            <!--<li><a href="#"><img src="11.jpg" ></a></li>-->
        </ul>
        <div class="indicators" id="nav">
            <ul>

            </ul>
        </div>
        <div class="hah" id="ying">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取最外面的div
    var  box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取相框的宽度
    var imgWidth = inner.offsetWidth;
    //获取存图片的ul
    var ulObj = inner.children[0];
    //获取所有图片的li标签
    var imgLiObj = ulObj.children;
    //获取底部导航栏
    var navBottom = my$("nav").children[0];
    //获取导航栏的li 标签
    var  navLiObj = navBottom.children;
    //设置一个全局变量使得 底部导航栏和图片的 索引一致
    var index = 0;
    //添加相应的底部导航栏li标签
    for (var i = 0 ;i < imgLiObj.length;i++){
        var tempLi  =  document.createElement("li");
        tempLi.innerHTML = i+1;
        navBottom.appendChild(tempLi);
        tempLi.setAttribute("index",i);
        //为每个导航栏li注册鼠标进入事件
        tempLi.onmouseover = function () {
            for (var j = 0 ;j < navLiObj.length;j++){
                navLiObj[j].removeAttribute("class");
            }
            this.className = "current";
            //获取导航栏li的索引
            var tempIndex = this.getAttribute("index");
            //进行动画效果移动图片
            animation(ulObj,-tempIndex*imgWidth);
            //更新全局变量index
            index = tempIndex;
        }
    }
    navLiObj[0].className = "current";
    //克隆第一个图片li标签到最后
    var heyLi = imgLiObj[0].cloneNode(true);
    ulObj.appendChild(heyLi);
    //设置进入div显示两侧导航栏的效果
    box.onmouseover  = function () {
        my$("ying").style.display = "block";
        clearInterval(timeId);
    }
    //设置移出div隐藏两侧导航栏的效果
    box.onmouseout  = function () {
        my$("ying").style.display = "none";
        var timeId= setInterval(clickHandle,2000);
    }
    //获取  左右箭头标签
    var arryL = my$("ying").children[0];
    var arryR = my$("ying").children[1];
    //为每个箭头标签设置点击事件
    arryL.onclick = function () {
        if (index == 0){
            index = navLiObj.length;
            ulObj.style.left =  -index*imgWidth + "px";
        }
        index --;
        animation(ulObj,-index*imgWidth);
        for (var j = 0 ;j < navLiObj.length;j++){
            navLiObj[j].removeAttribute("class");
        }
        navLiObj[index].className = "current";
    }
    arryR.onclick =  function () {
        if (index == navLiObj.length){
            index= 0;
            ulObj.style.left = 0 + "px";
        }
        index++;
        animation(ulObj,-index*imgWidth);
        if (index == navLiObj.length) {
            navLiObj[navLiObj.length-1].removeAttribute("class");
            navLiObj[0].className = "current";
        }
        else {
            for (var j = 0 ;j < navLiObj.length;j++){
                navLiObj[j].removeAttribute("class");
            }
            navLiObj[index].className = "current";
        }
    }
    //自动切换
    var timeId= setInterval(clickHandle,2000);
    function clickHandle() {
        if (index == navLiObj.length){
            index= 0;
            ulObj.style.left = 0 + "px";
        }
        index++;
        animation(ulObj,-index*imgWidth);
        if (index == navLiObj.length) {
            navLiObj[navLiObj.length-1].removeAttribute("class");
            navLiObj[0].className = "current";
        }
        else {
            for (var j = 0 ;j < navLiObj.length;j++){
                navLiObj[j].removeAttribute("class");
            }
            navLiObj[index].className = "current";
        }
    }
</script>
</body>
</html>

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