JS 实现动态轮播图

JavaScript实现轮播图思路 + html/css + js源码

1. 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出现在相框中,不在相框中的元素会被css中的 overflow : hidden 隐藏掉, 其次,图片是经过处理的 ,正好和我们的相关等宽等高!
2. 动态的创建元素,下面我们会动态创建li,并通过css把它修饰成小按钮格式,其次给小按钮添加点击事件,鼠标经过,离开事件,动态的实现图片的移动, 其实就是根据不同的参数,移动 ul的left值
3. 最后添加定时器,在回调函数的位置让他每隔一定的时间就调用一次点击左边按钮的事件

    
    
    



    

        

            

            

            

            

            

        
        
        

        
    
    
<>

上面是html/css搭起来架子,简单说一下

1. body里面有一个直接子div,我们叫他box,它是整个轮播图的父盒子

1 对box的css相关css样式调整, 给定了宽高,让他把轮播图需要的空间撑起来, 2. 设置了内边距,让他在原有宽高不变的情况下,四周扩展一些,美观 ; 3. 初始情况下,这个盒子贴着浏览器的左上角对齐,我们给他设置外边距, 上下100px ,左右自动, 意思是居中对齐 4. 添加相对定位, 因为box里面的小按钮要脱离文档流,用定位移动到相框指定的位置, 如果不加相对定位, box就限制不住它里面的子元素,

1. box又有两个直接元素div

box 的第一个直接子元素class=screen , screen的宽高和box一样,里面放着个无序列表,无序列表里面是轮播图的图片, 每一个li,都给定和图片一样大小的宽高,添加浮动,让它们排成一排,给li添加overflow , 属性,防止图片太大了,把多出去的部分切掉,

screen的第二个直接子元素是个ol列表,一会我们要通过js动态的生成和 ul里面的li相同数目的li标签,把他们的样式改成按钮, 需要绝对定位,因此我们设置screen为相对对位

box的第二个直接子元素是一个div叫arr，默认它dispaly:none 隐藏 ,arr里面是轮播图的左右两个箭头，让他相对于box 进行绝对定位

js代码: