最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS轮播图实现简单代码
时间:2017-08-24 编辑:猪哥 来源:一聚教程网
思路:
1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示
代码:
轮播图 css"> .container{ margin:0 auto; position: relative; overflow: hidden; border:4px solid gray; box-shadow: 3px 3px 5px gray; border-radius:10px; } .list{ position: absolute; top:0px; } img{ float:left; } .dots{ position: absolute; left:40%; bottom:30px; list-style: none; } .dots li{ float:left; 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; }