Javascript 小圆点导航实现幻灯片切换

超、凢脫俗 2022-03-06 10:24 234阅读 0赞

## 小圆点导航实现幻灯片切换 ##

如果你说你在下午五点来，从四点钟开始，我就觉得快乐，时间越临近，我就越来越觉得快乐！因为星期一是我们约会的时间，忽然之间，星期一又来到了。在最近几个月，星期一可是最美好的一天了，每次最期待的就是星期一到来，可是你说你今天朋友来，你不来了，然后我有点不开心，但是想着你有时候还是真的难跑。突然你坐在地铁上，我感觉你的温度离得越来越远，你说我的博客怎么没有更新了，于是我就去写了这篇博客，今天的内容。

今天做作业真的是很顺，发觉自己越来越聪明了，怎么可以这么聪明，咳咳…不能自夸了。中途也遇到某些麻烦但是都被我一一化解，有事还是思考不周，当老师了来问我作业做的怎么样了，我自信的回眸一说，完全没有问题，结果一个bug被检查出来，所以还是不能太自信。

切入正题吧，下面就是今天的内容，图片是我选的最喜欢的一部，也是至今看过的最好看的一部电视剧—权力的游戏，强烈安利大家去看。在做这个轮播图，最主要是实现他的效果，还有他的美观，更重要是一个人写代码的风格和简约程度。上面下面采用了渐变给上面下面弄一个底，左右两边用代码写出箭头并写出鼠标经过效果，js部分最重要，采用数组，循环…

1.点击下面小圆点实现切换到某张指定图；  
2.用左右两边的实行顺序切换，并让下面的小圆点跟着动，上面的文字跟着动；  
3.最重要的一个值，就是num=this.index的这句，全局最重要的，着重去看，就是因为这句话，会影响效果的，如果不加这句，不管你的小圆点切换到哪里，你点下一张或者上一张都是从第一个开始的，都不会跟着小圆点的变动而变动。

![图片轮播][20190318174855249.gif]

## 具体内容看代码 ##

## HTML 代码 ##

## CSS代码 ##

*{ 
                box-sizing:border-box;
            }
            ul,li{ 
                margin:0;
                padding:0;
            }
            li{ 
                list-style:none;
            }
        #wrap{ 
            width:900px;
            height:486px;
            margin:20px auto;
            border:1px solid #eee;
            position:relative;
            overflow: hidden;
            border:3px solid transparent;
        }
        #wrap:hover{ 
            border:3px solid #FF5F5F;  
        }
        #wrap img{ 
            width:100%;
        }
        #wrap span{ 
            top:0;
            background:linear-gradient(to top,transparent,rgba(0,0,0,.5));
        }
        #box{ 
            bottom:0;
            background:linear-gradient(to bottom,transparent,rgba(0,0,0,.5));
            
        }
        #box,#wrap span{ 
            position:absolute;
            left:0;
            width:100%;
            height:40px;
            color:#fff;
            text-align:center;
            line-height:40px; 
        }
        #box a{ 
            display:inline-block;
            width:12px;
            height:12px;
            background-color:#fff;
            border-radius:50%;
            text-align:center;
            margin-right:10px;
            margin-bottom:0px;
        }
        #box li{ 
            display:inline-block;
        }
        .a{ 
            position:absolute;
            display:block;
            width:40px;
            height:70px;
            background:rgb(234, 112, 112,.5);
            top:50%;
            margin-top:-35px;
        }
        .a:hover{ 
            background:#ea7070;
        }
        .a1{ 
            left:0;
        }
        .a1:after,.a2:after{ 
            content:"";
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-7.5px;
            margin-left:-7.5px;
            width:15px;
            height:15px;
            border:2px solid #fff;
            border-right:none;
            border-bottom:none;
            transform:rotate(-45deg);
    
        }
        .a1:after{ 
            transform:rotate(-45deg);
        }
        .a2:after{ 
            transform:rotate(135deg);
        }
        .a2{ 
            right:0;
        }
        .clearfix::after{ 
            content:"";
            display:block;
            clear:both;
        }
        #box .active{ 
            background-color:#1F6ED4;
        }

## JS代码 ##

## 谢谢大家观看！ ##

[20190318174855249.gif]: /images/20220303/d7e3641a93694f25965a0532aaa4b038.png