那时撷取的是两个单纯的Exi图，那个Exi图的特技很单纯，能展开相片的Exi和点选适当相片，相片能重定向到适当边线，具体来说手写的div部份：<div id=“scrollPics”> <ul class=“slider”> <li><img src=“../images/1.jpg” alt=“”></li> <li><img src=“../images/2.jpg” alt=“”></li> <li><img src=“../images/3.jpg” alt=“”></li> <li><img src=“../images/7.jpg” alt=“”></li> <li><img src=“../images/5.jpg” alt=“”></li> </ul> <ul class=“num”></ul></div>然后手写style样式部份<style> *{ margin: 0px; padding: 0px; } ul{ list-style: none; } #scrollPics{ height: 420px; width: 790px; margin-bottom: 10px; overflow: hidden; position: relative; top: 100px; left:400px; } .slider{ margin-top: 0px; } .slider img{ width: 100%; } .num{ position: absolute; right:5px; bottom: 5px; } .num li{ float: left; color: #ff7300; text-align: center; line-height: 16px; width: 16px; height: 16px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #ff7300; background-color: white; border-radius: 50%; } .num li.active{ color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #ff7300; font-weight: bold; border-radius: 50%; cursor: pointer;}</style>最后是script部份<script> $(function () { var slider =$(“#scrollPics .slider”); var imgCon =$(“#scrollPics .slider li”); //除第一张其余的相片全部隐藏 imgCon.not(imgCon.eq(0)).hide(); //定义页码 var num =$(“#scrollPics .num”) //find()方法返回备选元素的后代元素 var len =slider.find(“li”).length; var html_page =“”; index=0; //添加页码 for (var i=0;i<len;i++){ if (i===0){ html_page+=“<li class=active>”+(i+1)+“</li>” } else { html_page +=“<li>”+(i+1)+“</li>” } } //输出原点 num.html(html_page) //显示索引对应的相片 function showPic(index) {imgCon.eq(index).show().siblings(“li”).hide(); num.find(“li”).eq(index).addClass(“active”).siblings(“li”).removeClass(“active”) } //原点点选事件 $(“.num li”).click(function () { index=$(this).index() showPic(index) }) //相片Exi $(“#scrollPics”).hover(function () { clearInterval(window.timer) },function () { window.timer =setInterval(function () {showPic(index); index++; if (index ===len){ index =0 } },2000) }).trigger(“mouseleave”)//触发备选元素的指定事件 })</script>最后因为是用jquery手写的代码，还要导入 <script src=”../js/jquery-2.2.3.js”></script> 。最后是完整代码 <!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>JQExi图</title> <script src=“../js/jquery-2.2.3.js”></script> <style> *{ margin: 0px; padding: 0px; } ul{ list-style: none; } #scrollPics{ height: 420px; width: 790px; margin-bottom: 10px; overflow: hidden; position: relative; top: 100px; left:400px; } .slider{ margin-top: 0px; } .slider img{ width: 100%; } .num{ position: absolute; right: 5px; bottom: 5px; } .num li{ float: left; color: #ff7300; text-align: center; line-height: 16px; width: 16px; height: 16px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #ff7300; background-color: white; border-radius: 50%; } .num li.active{ color: #fff; line-height:21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #ff7300; font-weight: bold; border-radius: 50%; cursor: pointer; }</style></head><body><div id=“scrollPics”> <ul class=“slider”> <li><img src=“../images/1.jpg” alt=“”></li> <li><img src=“../images/2.jpg” alt=“”></li> <li><img src=“../images/3.jpg” alt=“”></li> <li><img src=“../images/7.jpg” alt=“”></li> <li><img src=“../images/5.jpg” alt=“”></li> </ul> <ul class=“num”></ul></div><script> $(function () { var slider =$(“#scrollPics .slider”); var imgCon =$(“#scrollPics .slider li”); //除第一张其余的相片全部隐藏 imgCon.not(imgCon.eq(0)).hide(); //定义页码 varnum =$(“#scrollPics .num”) //find()方法返回备选元素的后代元素 var len =slider.find(“li”).length; varhtml_page =“”; index=0; //添加页码 for (var i=0;i<len;i++){ if (i===0){ html_page+=“<li class=active>”+(i+1)+“</li>” } else {html_page +=“<li>”+(i+1)+“</li>” } } //输出原点 num.html(html_page) //显示索引对应的相片 function showPic(index) {imgCon.eq(index).show().siblings(“li”).hide(); num.find(“li”).eq(index).addClass(“active”).siblings(“li”).removeClass(“active”) } //原点点选事件 $(“.num li”).click(function () { index=$(this).index() showPic(index) }) //相片Exi $(“#scrollPics”).hover(function () { clearInterval(window.timer) },function () { window.timer =setInterval(function () { showPic(index); index++; if (index ===len){ index =0 } },2000) }).trigger(“mouseleave”)//触发备选元素的指定事件 })</script></body></html>推荐阅读用vue同时实现两个仿简书的Exi图效用JavaScript同时实现无缝Exi效用的思路原生js同时实现Exi图实例教程本文完〜
