<!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; ???????????width: 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; ???width:0; ???height:0; ???margin:0; ???padding:0; ???border:none;} ?*/ ???????.c:after { ???????????clear: both; ???????????width: 0; ???????????padding: 0; ???????????content: ""; ???????????display: block; ???????????visibility: hidden; ???????} ???????body { ???????????font-size: 14px; ???????????color: black; ???????????background: #09c; ???????} ???????.active {} ???????.wrap { ???????????width: 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; ???????????width: 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>JS小功能系列11手风琴
原文地址：http://www.cnblogs.com/xingkongly/p/7672568.html