<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: black; } li { list-style-type: none; } .triangle { display: inline-block; 0px; height: 0px; border: 8px solid transparent; border-top-color: black; } .circle { display: inline-block; padding: 5px; background: #000; border-radius: 50%; } /* input,button{ outline:none; } */ .l { float: left; } .r { float: right; } /* .c{ clear:both; 0; height:0; margin:0; padding:0; border:none; } */ .c:after { clear: both; 0; padding: 0; content: ""; display: block; visibility: hidden; } body { font-size: 14px; color: black; background: #09c; } .active {} .wrap { 1030px; height: 429px; background: #07c; margin: 20px auto; overflow: hidden; } .hand { position: relative; } .hand li { position: relative; float: left; } .hand span { display: inline-block; background: orange; 20px; height: 429px; padding: 0px 20px; } .hand img { position: absolute; left: 60px; top: 0; opacity: 1; border: 1px solid red; } @keyframes moveLeft { 0% { left: 0px; } 100% { left: 789px; } } @keyframes moveRight { 0% { left: 789px; } 100% { left: 0px; } } .toggleLeft { /*forwards*/ animation: moveLeft 1s linear forwards; } .toggleRight { animation: moveRight 1s linear forwards; } </style> <script> window.onload = function () { var handLi = document.querySelectorAll('.hand li'), handImg = document.querySelectorAll(".hand img"); for (var i = 1, len = handLi.length; i < len; i++) { handLi[i].onclick = function () { if (this.getAttribute("class") == "toggleLeft") this.className = "toggleRight"; else this.className = "toggleLeft"; } } } </script> <!-- <script src="../jquery-1.7.2/jquery.js"></script> <script> $(function () { $(".hand ul span").each(function (i) { $(this).on("click", function () { if (i > 0) { if ($(this).parent().hasClass("show")) { $(this).parent().animate({ left: "0px" }); $(this).parent().removeClass("show"); } else { $(this).parent().animate({ left: "789px" }) $(this).parent().addClass("show"); } } }); }); }); </script> --> </head> <body> <div class="main"> <div class="wrap"> <div class="hand"> <ul> <li> <span>1:宠辱不惊，闲看庭前花开花落， </span> <img src="./手风琴素材/img/1.jpg"> </li> <li> <span>2:宠辱不惊，闲看庭前花开花落 </span> <img src="./手风琴素材/img/2.jpg"> </li> <li> <span>3:宠辱不惊，闲看庭前花开花落， </span> <img src="./手风琴素材/img/3.jpg"> </li> <li> <span>4:宠辱不惊，闲看庭前花开花落， </span> <img src="./手风琴素材/img/4.jpg"> </li> <li> </li> </ul> </li> </ul> </div> </div> </div> </body> </html>
