php网站banner图片切换,最简单的Banner轮播左右切换效果代码及实现思路（附带源码）...

Banner轮播左右切换效果代码及实现思路，支持左右切换图片，支持点击选择对应的图片。实现思路通过定时器去自动选图和点击触发事件去选择图片。而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画margin-left滚动。具体代码如下：

代码思路：html>

轮播

*{margin:0;padding:0;}

img{display:block;}

.banner {width:500px;height:300px;margin:10% auto;background:#cccccc;overflow:hidden;position:relative;}

.banner ul { position:absolute;left:0;top:0;z-index:100;}

.banner ul li { display:block;width:500px;height:300px;float:left;}

.banner .con { position:absolute; left:45%; bottom:3%;z-index:101; }

.banner .con a { float:left; margin-right:8px; display:block; width:8px; height:8px; border-radius:100%; background:#000;z-index:101;}

.banner .con a.active { background:#fff;}

.banner .u { width:30px;height:20px;background:rgba(255,255,255,0.5); display:none;}

.banner .left { position:absolute; top:40%;left:2%;z-index:103;}

.banner .right { posi