用按钮控制轮播图

用按钮来控制轮播图,核心就是通过按钮的点击事件来改变图片的路径。

以下就来介绍怎么实现:

1、先创建一个主体



    
        
        
    
    
    
        

2、用css进行修饰


这个里面由于我是用盒子套的按钮,所以后面会在图片上方出现一片黑色背景,这是由按钮的盒子撑出来的,你可以在css里面对按钮的盒子的宽高进行定义,最后在从img的 修饰里面用相对定义的top减去自己对按钮盒子定义的高度即可。
当然你也可以不用那个,你可以先直接在img的修饰里面先写上一个估值,然后从浏览器里面的检查里进行调试,最后再回去改。

3、用js来实现按钮的点击事件


这个里面就相对理解起来简单一些,点击相应的按钮,会做出相应的反应。所谓的上一张或下一张就是把图片的路径进行更改,当然这个图片的路径,你要设置的尽量简单些,最好是序号排列。不然在写判断时会麻烦些。

好了,以上就是我想做出的分享!

你可能感兴趣的:(用按钮控制轮播图)