原生js实现轮播图代码
js实现轮播图制作方法本文实例为大家分享了js实现轮播图展示的具体代码,供大家参考,具体内容如下
效果如图所示
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } .container { position: relative; width: 600px; height: 300px; margin: 30px auto; overflow: hidden; } .left { display: none; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); width:50px; height: 50px; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background-color: rgba(0,0,0,0.5); z-index: 999; } .left i { display: block; margin-top: 10px; margin-left: 20px; width: 30px; height: 30px; background: url(img/left.jpg" alt="原生js实现轮播图代码(js实现轮播图制作方法)" border="0" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。