Html
    Css
    Js
* { margin:0px; padding:0px; } .banner { width:500px; height:300px; margin:150px auto; position:relative; overflow:hidden; cursor:pointer; } .banner ul { list-style:none; width:700%; height:300px; position:absolute; } .banner ul li { width:500px; height:300px; float:left; } .banner ul li img { width:100%; height:100%; } .banner .arrow .left,.banner .arrow .right { width:40px; height:80px; background:#000000; opacity:0.3; position:absolute; top:50%; transform:translateY(-50%); font-family:"宋体"; font-size:52px; color:#fff; line-height:80px; text-align:center; } .arrow .left { left:0px; } .arrow .right { right:0px; } .banner .arrow { display:none; } /*鼠标经过盒子,让箭头显示出来*/ .banner:hover .arrow { display:block; cursor:pointer; } /*小圆点样式*/ .banner ol { list-style:none; width:200px; height:20px; background:#222222; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); /*opacity:0.3; */ border-radius:10px; } .banner ol li { width:10px; height:10px; background:#fff; border-radius:50%; float:left; margin-left:21px; margin-top:5px; cursor:pointer; } .banner ol .now { background:aqua; }
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

2
      0
      2018/4/13 9:01:24
      还是有bug,当连续点击左右切换按钮时(鼠标不移动),两侧的左右切换按钮没有规律性的偶尔消失
          轻酌~浅醉0
          2018/4/13 9:52:08
          我没试出来,不过我设置的是鼠标移出包裹图片的这个div,按钮才消失,按常理来说,鼠标没移出应该不会消失。。。
      回复