JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下
思路:
1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示
代码:
轮播图 .container{ margin:0auto; width:600px; height:400px; position:relative; overflow:hidden; border:4pxsolidgray; box-shadow:3px3px5pxgray; border-radius:10px; } .list{ width:4200px; height:400px; position:absolute; top:0px; } img{ float:left; width:600px; height:400px; } .dots{ position:absolute; left:40%; bottom:30px; list-style:none; } .dotsli{ float:left; width:8px; height:8px; border-radius:50%; background:gray; margin-left:5px } .dots.active{ background:white; } .pre,.next{ position:absolute; top:40%; font-size:40px; color:white; text-align:center; background:rgba(128,128,128,0.5); /*display:none;*/ } .pre{ left:30px; } .next{ right:30px; }