轮播图(1)——原生js淡入淡出

轮播图在网页中随处可见,几乎所有的大大小小的网站都有各式各样的轮播图,今天本渣渣在这里为小白们做一个最简单的轮播图效果。当然,还是比较实用的。

1.思路

对于js特效,有一个正确的思路,事情就成功的了一半,剩下的一半就是代码加调试。

1.1、目的:

明确你要做一个什么样的轮播图,是一直从右向左的无缝滚动,还是一张又一张淡入淡出,还是,一张又一张的从右向左逐张滑动出现等等等(这几种轮播图都会在下几篇轮播图系列一个个介绍),明确下来之后就开始造!轮!子!

1.2、思路:

(1)html的布局:
首先来个最外层容器,往里面放两个子元素,一个是用来放图片,另一个自然是放焦点;
(2)css样式设置
最外层的容器添加上相对定位,里面的放图片的容器用相对定位,里面的每个图片元素或者放图片的元素都用绝对定位,并且top和left属性值都为‘0’。
放焦点的容器用绝对定位,防止出现叠放元素引起的覆盖,也是为了让焦点能更好控制布局,(注意:焦点一定要用"display:inline-block",这样是为了让焦点都能自动居中,他的父级元素当然要有"text-align:center",这样可以让不管有多少个焦点都能自动让焦点居中,为了好看嘛)
(3)js部分
实现得准备工作,用js创建相应个数的焦点(这个我认为很有必要),然后就是用排他思想(先设置所有同类元素,再设置其中某一个使其不同于其他同类元素),和选项卡的思想一样,利用全局变量,定时器循环播放,so easy!代码中穿插相对详细备注说明

2.代码

2.1html代码

先来摆上要用的html代码,下面的css和js都要围绕html展开的


2.2 css样式

工欲善其事必先利其器。首先布局得合理,必须得合理,绝对定位一定要有,当然,被赋予绝对定位元素的父级元素得有相对定位。(和二级菜单的相对套绝对是一样的道理),要不然你的页面就会乱掉。

*{
        padding:0;
        margin:0;
        list-style: none;
        font-family: "微软雅黑";
        outline: none;
    }
    .banner{
        width:720px;
        height:480px;
        margin:50px auto;
        position:relative;
    }
    .img>li{
        position:absolute;
        transition: all 1s ease;
        opacity:0;
    }
    .order{
        width:100%;
        position:absolute;
        top:430px;
        text-align: center;
    }
    .order li{
        display:inline-block;
        width:20px;
        height:20px;
        background: white;
        border-radius: 50%;
        margin: 0 15px;
        cursor: pointer;
    }
    #img .on{
        display:block;
        opacity:1;
    }
    #order .on{
        background: chocolate;
    }

2.3 高端大气的js部分(请允许装个X)

var banner = document.getElementById('banner');
var img = document.getElementById('img');
var lis = img.getElementsByTagName('li');
var order = document.getElementById('order');

//根据上面图片的数量创建相应个数的焦点
for(i=0;i= lis.length){
            num = 0;
        }
        play(num);
        
        
        console.log(num);
        
    },1000);
}
autoPlay();

//添加鼠标移入暂停,移出继续轮播事件
banner.onmouseover = function(){
    clearInterval(xh);
    xh = null;
}
banner.onmouseout = function(){
    autoPlay();
}

//给焦点添加实时监控事件,鼠标移到哪个焦点,就显示那个对应的图片
for(i=0;i

3、完工

是不是so easy 觉得不够好的自行优化一下,这里不再做过多的赘述,以后几篇会介绍如何优化,使其体验更好

4、在线演示

在线演示

你可能感兴趣的:(轮播图(1)——原生js淡入淡出)