首页 > 代码库 > 今天修改网站的一个jquery轮播收获了新大陆

今天修改网站的一个jquery轮播收获了新大陆

2024-09-01 19:48:44   217人阅读

想想有一段时间没写博客了，主要是最近太懒，加上没有让自己眼前一亮的技术点，故最近都在尝试使用git管理版本，对于版本管理这方面真的是觉得，如果你用了git，你会爱上这个东西，神器！

今天主要是积累一个原生jquery写的类似于手动的轮播，很喜欢这个写法，特此积累一下。

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus?">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>翻页</title>
10  </head>
11  <body>
12  <div id="d1">
13      <div class="tdImg">
14                 <div class="prev">1</div>
20     </div>
21     <ul class="img_ul">
22             <li>a</li>
23             <li>b</li>
24             <li>c</li>
25             <li>d</li>
26             <li>e</li>
27             <li>f</li>
28     </ul>
29  </div>
30     
31         <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
32         <script type="text/javascript">
33                 $(".tdImg .prev").click(function(){
34                         var obj = $(this).parent().parent().find(".img_ul li");
35                         obj.first().before(obj.last());
36                 });
37         </script>
38  </body>
39 </html>

这个效果实现的是点击prev就会实现队列顺序的改变，我们由此可以应用到图片的轮播中，点击prev显示下一张，其他的隐藏，这里的代码就不在赘述，有兴趣的可以自己尝试做个完整的Demo，这里只是提供一个自己很喜欢的思路，让自己又弥补了一个原生jquery的知识盲点，啊~想想自己好多地方还是会有盲点的啊，希望自己早早发现他们，多多积累！恩~

盲点扫除：关于before()和after()这两个函数的返回值。函数的返回值为jQuery类型，返回当前jQuery对象本身，如果插入的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这相当于一个移动操作，而不是复制操作。

不知不觉已经在前端这条路上走了4个月11天了，未来会有怎样的风景啊。加油~ysh

今天修改网站的一个jquery轮播收获了新大陆


联系
我们