/* CSS重置 * */ body, ul, ol { margin: 0px; padding: 0px; } .flash { 300px; height: 420px; position: relative; overflow: hidden; } /*图片css*/ ul{ 300%; position: absolute; left: 0px; top: 0px; transition: 0.5s; } ul, ol { list-style: none; } ul li { 300px; height: 420px; float: left; transition: 0.5s; } ul li:nth-of-type(1) { background: green; } ul li:nth-of-type(2) { background: blue; } ul li:nth-of-type(3) { background: red; } ul li.now { z-index: 1; opacity: 1; } /*箭头css*/ nav a { position: absolute; top: 100px; z-index: 999; font-size: 36px; 40px; height: 60px; line-height: 60px; text-align: center; text-decoration: none; } nav a:hover { background: #333; color: white; } nav a:nth-of-type(1) { left: 0px; } nav a:nth-of-type(2) { right: 0px; } /*原点css*/ ol { position: absolute; bottom: 50px; right: 50px; z-index: 99; } ol li { float: left; 12px; height: 12px; border: 2px solid #333; background: #ccc; border-radius: 50%; margin: 0px 5px; } ol li.nowx { background: white; border-color: red; box-shadow: 0px 0px 3px black; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="flash.css" /> <style type="text/css"> #s1, #s2, #s3 { float: left; margin-left: 10px; } </style> </head> <body> <!-- 分析功能： 1、左右箭头切换图功能 切换小圆点。 onclick 2、单击小原点时候也能换图 点击哪个小圆点，哪个小圆点对应图片显示。 onclick 3、淡入淡出效果。 left transition --> <section id="s1"> <div class="flash"> <ul> <li class="now">A</li> <li>B</li> <li>C</li> </ul> <ol> <li class="nowx"></li> <li></li> <li></li> </ol> <nav> <a href="#"> < </a> <a href="#"> > </a> </nav> </div> </section> <section id="s2"> <div class="flash"> <ul> <li class="now">A</li> <li>B</li> <li>C</li> </ul> <ol> <li class="nowx"></li> <li></li> <li></li> </ol> <nav> <a href="#"> < </a> <a href="#"> > </a> </nav> </div> </section> <section id="s3"> <div class="flash"> <ul> <li class="now">A</li> <li>B</li> <li>C</li> </ul> <ol> <li class="nowx"></li> <li></li> <li></li> </ol> <nav> <a href="#"> < </a> <a href="#"> > </a> </nav> </div> </section> <script type="text/javascript"> function myMove(_id) { var arrs = document.querySelectorAll(_id + " nav a"); var lisx = document.querySelectorAll(_id + " ol li"); var ul = document.querySelector(_id + " ul"); var lis = document.querySelectorAll(_id + " ul li"); var flash = document.querySelector(_id + " .flash"); var i = 0; //单击左边 arrs[0].onclick = Pre; //单击右边箭头 arrs[1].onclick = Next function Next() { i < (lis.length - 1) ? i++ : null; ul.style.left = -i * 300 + "px"; MyIni(i) } function Pre() { i >= 1 ? i-- : null; ul.style.left = -i * 300 + "px"; MyIni(i) } function MyIni(k) { for(var j = 0; j < lisx.length; j++) { lisx[j].className = ""; } lisx[k].className = "nowx"; } } myMove("#s1"); myMove("#s2"); myMove("#s3"); </script> </body> </html>