关于轮播图的制作

Posted 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>

 




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

层叠轮播图的简易制作

前端必备技能——轮播图(原生代码+插件)

如何用Bootstrap制作轮播图

轮播图

如何用Bootstrap制作轮播图

js如何制作图片轮播