前言：
如今咱们对“jqueryeq方法”大致比较关心，大家都想要分析一些“jqueryeq方法”的相关知识。那么小编在网摘上收集了一些对于“jqueryeq方法””的相关文章，希望我们能喜欢，看官们一起来了解一下吧！Html
<html ><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/demo12.css"/><script src="js/jquery-3.4.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ let page = 1; let i = 4; //向右移动 $(".next").click(function(){ let jq1 = $(this).parents(".a1"); let jq2 = jq1.find(".a6"); let jq3 = jq1.find(".a5"); let jqwidth = jq3.width(); let len = jq2.find("li").length; let page_count = Math.ceil(len/i); if(!jq2.is(":animated")){ if (page == page_count){ jq2.animate({left:'0px'},"slow"); page = 1; } else{ jq2.animate({left:'-='+jqwidth},"slow"); page++; } } jq1.find("span").eq((page-1)).addClass("one").siblings().removeClass("one"); }); //向左移动 $(".prev").click(function(){ let jq1 = $(this).parents(".a1"); let jq2 = jq1.find(".a6"); let jq3 = jq1.find(".a5"); let jqwidth = jq3.width(); let len = jq2.find("li").length; let page_count = Math.ceil(len/i); if(!jq2.is(":animated")){ if (page == 1){ jq2.animate({left:'-='+jqwidth*(page_count-1)},"slow"); page = page_count; } else{ jq2.animate({left:'+='+jqwidth},"slow"); page--; } } jq1.find("span").eq((page-1)).addClass("one").siblings().removeClass("one"); }); });</script></head><body> <div class="a1"> <div class="a2"> <h1>图片展示</h1> <div class="a3"> <span class="one">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="a4"> <span class="prev">prev</span> <span class="next">next</span> </div> <em><a href="#">更多>></a></em> </div> <div class="a5"> <div class="a6"> <ul> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题q</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题w</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题e</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题r</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题t</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题y</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题u</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题i</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题o</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题p</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题a</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题s</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题d</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题f</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题g</a></h1> <span>时间:<em>2022-11-23</em></span></li> <li><a href="#"><img src="images/demo_12_01.jpg" alt="图片展示" /></a> <h1><a href="#">标题h</a></h1> <span>时间:<em>2022-11-23</em></span></li> </ul> </div> </div> </div></body></html>CSS
/* CSS Document */* { padding:0; margin:0;}body { font-size:12px; font-family:"宋体"; padding:100px;}ul { list-style-type:none;}a { color:#666; text-decoration:none;}a:hover { color:#000; text-decoration:underline;}img { border:none;}h1 { font-size:12px;}.a1 { width:595px; border:1px solid #e7e7e7;}.a2 { height:35px; background:#eee;}.a2 h1 { height:35px; line-height:35px; padding-left:10px; float:left;}.a3 { float:left; margin:14px 0 0 10px;}.a3 span { width:7px; height:7px; float:left; background:url(../images/demo_12_1.gif) no-repeat; text-indent:-9999px; margin:0 2px; }.a3 span.one { background:url(../images/demo_12_2.gif) no-repeat; }.a4 { float:left; margin:7px 0 0 10px; }.a4 span { float:left; background:url(../images/demo_12_3.gif) no-repeat; width:31px; height:22px; text-indent:-9999px;}.a4 span.next { background-position:-31px 0; }.a2 em { float:right; margin:10px 12px 0 0;}.a5 { width:592px; height:160px; overflow:hidden; position:relative; border-top:none;}.a5 ul li { float:left; margin:10px 2px 0; padding:8px;}.a6 { width:2500px; position:absolute; top:0; left:0;}.a6 h1 { padding:5px 0 5px 0; }.a6 h1 a { color:#aaa; } 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jqueryeq方法
