图片轮播

来源：互联网发布：ewb仿真软件简介编辑：程序博客网时间：2024/06/16 00:28
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function(){$("ul li").click(function(){var $index = $(this).index();$(".wrap .img").eq($index).removeClass("hide").addClass("show").siblings(".show").removeClass("show").addClass("hide");})})</script><style>body{margin:0px;padding: 0px;}@-webkit-keyframes in{0%{left:1152px}100%{left:0px}}@-webkit-keyframes out{0%{left:0px}100%{left:-1152px}}.wrap{width:1152px;height:648px;border: 1px solid red;margin:0 auto;position:relative;overflow:hidden;}.wrap .img{width:1152px;height:648px;background: url('img/11.jpg');position: absolute;top:0px;left:1152px;}.wrap .img:nth-child(2){background: url('img/22.jpg');}.wrap .img:nth-child(3){background: url('img/33.jpg');}.wrap .img:nth-child(4){background: url('img/44.jpeg');}.wrap .img:nth-child(5){background: url('img/55.jpg');}.wrap .show{-webkit-animation:in 3s;left: 0px;;}.wrap .hide{-webkit-animation:out 3s;left:1152px;}ul{position: absolute;right: 50px;bottom: 20px;}li{display: inline-block;list-style: none;width: 30px;height:30px;opacity:0.6;border-radius:15px;background: yellow;cursor: pointer;}</style></head><body><div class="wrap"><div class="img show"></div><div class="img "></div><div class="img "></div><div class="img "></div><div class="img "></div><ul><li></li><li></li><li></li><li></li><li></li></ul></div></body></html>
阅读全文
0 0