无聊的时候写了一个轮播

yaohaixiao

压缩文件是7z格式的，没有zip软件，自己修改一下

没有特别的，写的练手的，可以给刚接触的同学参考一下

1. /**
   
2. * Created by Robert on 2016/4/14.
   
3. */
   
4. (function ( global, factory ) {
   
5.     'use strict';
   
6. 
   
7.     if ( typeof define === 'function' && define.amd ) {
   
8.         // AMD (Register photos)
   
9.         define("photos", [ 'jquery' ], factory( global, $ ) );
   
10.     }
    
11.     else {
    
12. 
    
13.         if ( typeof define === 'function' && define.cmd ) {
    
14.             // CMD (Register photos module)
    
15.             define( 'photos', function ( require, exports, module ) {
    
16.                 module.exports = factory( global, require( 'jquery' ) );
    
17.             } );
    
18.         }
    
19.         else {
    
20. 
    
21.             if ( typeof exports === 'object' ) {
    
22.                 // Node/CommonJS
    
23.                 module.exports = factory( global, require( 'jquery' ) );
    
24.             }
    
25.             else {
    
26.                 // Browser globals
    
27.                 factory( global, jQuery );
    
28.             }
    
29.         }
    
30.     }
    
31. }( typeof window !== "undefined" ? window : this, function ( window, $ ) {
    
32.     'use strict';
    
33. 
    
34.     var $wrap = null,
    
35.         $bd = null,
    
36.         $container = null,
    
37.         $photos = null,
    
38.         $prevBtn = null,
    
39.         $nextBtn = null,
    
40.         $ft = null,
    
41.         $dots = null,
    
42.         CLS_DOT = 'tp-dot',
    
43.         CLS_PHOTO = 'tp-photo',
    
44.         CLS_HIDE = 'tp-hide',
    
45.         CLS_ACTIVE = 'tp-active',
    
46.         photoIndex = 0,
    
47.         images = [];
    
48. 
    
49. 
    
50.     function _init () {
    
51.         $wrap = $( '#wrapper' );
    
52.         $bd = $( '#bd' );
    
53.         $container = $( '#photos' );
    
54.         $prevBtn = $( '#prev-btn' );
    
55.         $nextBtn = $( '#next-btn' );
    
56.         $ft = $( '#dots' );
    
57.     }
    
58. 
    
59.     function render () {
    
60. 
    
61.         $container.empty();
    
62. 
    
63.         $( images ).each( function ( i, image ) {
    
64.             var $photo = $( '<p id="photo-' + i + '" class="' + CLS_PHOTO + ' ' + CLS_HIDE + '"><img src="' + image + '" width="238" height="237" alt="页面模板预览" /></p>' ),
    
65.                 $dot = $( '<a id="dot-' + i + '" class="tp-dot" href="$photo-' + i + '">' + i + '</a>' );
    
66. 
    
67.             if ( i === 0 ) {
    
68.                 $photo.removeClass( CLS_HIDE );
    
69.                 $dot.addClass( CLS_ACTIVE );
    
70.             }
    
71. 
    
72.             $container.append( $photo );
    
73.             $ft.append( $dot );
    
74.         } );
    
75. 
    
76.         $photos = $container.find( '.' + CLS_PHOTO );
    
77.         $dots = $ft.find( '.' + CLS_DOT );
    
78.     }
    
79. 
    
80.     function moveTo ( index ) {
    
81.         var $curPhoto = $( '#photo-' + index ),
    
82.             $curDot = $( '#dot-' + index ),
    
83.             $lastPhoto = $photos.filter( ':visible' ),
    
84.             $lastDot = $ft.find( '.' + CLS_ACTIVE );
    
85. 
    
86.         $lastDot.removeClass( CLS_ACTIVE );
    
87.         $curDot.addClass( CLS_ACTIVE );
    
88. 
    
89.         $lastPhoto.addClass( CLS_HIDE );
    
90.         $curPhoto.removeClass( CLS_HIDE );
    
91.     }
    
92. 
    
93.     function attachEvents () {
    
94. 
    
95.         $bd.on( 'mouseenter', function () {
    
96.             $prevBtn.removeClass( CLS_HIDE );
    
97.             $nextBtn.removeClass( CLS_HIDE );
    
98.         } );
    
99. 
    
100.         $bd.on( 'mouseleave', function () {
     
101.             $prevBtn.addClass( CLS_HIDE );
     
102.             $nextBtn.addClass( CLS_HIDE );
     
103.         } );
     
104. 
     
105.         $prevBtn.on( 'click', function ( evt ) {
     
106. 
     
107.             photoIndex -= 1;
     
108. 
     
109.             if ( photoIndex < 0 ) {
     
110.                 photoIndex = images.length - 1;
     
111.             }
     
112. 
     
113.             moveTo( photoIndex );
     
114. 
     
115.             evt.stopPropagation();
     
116.             evt.preventDefault();
     
117.         } );
     
118. 
     
119.         $nextBtn.on( 'click', function ( evt ) {
     
120. 
     
121.             photoIndex += 1;
     
122. 
     
123.             if ( photoIndex >= images.length ) {
     
124.                 photoIndex = 0;
     
125.             }
     
126. 
     
127.             moveTo( photoIndex );
     
128. 
     
129.             evt.stopPropagation();
     
130.             evt.preventDefault();
     
131.         } );
     
132. 
     
133.         $ft.delegate( '.' + CLS_DOT, 'click', function ( evt ) {
     
134.             var index = $( this ).index();
     
135. 
     
136.             photoIndex = index;
     
137.             moveTo( index );
     
138. 
     
139.             evt.stopPropagation();
     
140.             evt.preventDefault();
     
141.         } );
     
142.     }
     
143. 
     
144.     var Photos = function ( photos ) {
     
145.         images = photos;
     
146. 
     
147.         _init();
     
148.         render();
     
149.         attachEvents();
     
150.     };
     
151. 
     
152.     window.Photos = Photos;
     
153. 
     
154.     return Photos;
     
155. } ));

复制代码

zj440823

感谢楼主的分享！学习啦！

Kamisama

'use strict';

这句话啥意思？
作为“刚接触的同学”表示完全看不懂，求楼主推荐一下前端模块化的入门教程

atlantis2007

楼上问的那个是“严格模式”

sunritz

swiper这些工具海啸从来都不用么？

guizi2000

感谢楼主的分享！学习啦！