- UID
- 281860
- 在线时间
- 小时
- 积分
- 2139
- 帖子
- 离线
- 18650 天
- 注册时间
- 2006-8-7
|
压缩文件是7z格式的,没有zip软件,自己修改一下
没有特别的,写的练手的,可以给刚接触的同学参考一下
- /**
- * Created by Robert on 2016/4/14.
- */
- (function ( global, factory ) {
- 'use strict';
- if ( typeof define === 'function' && define.amd ) {
- // AMD (Register photos)
- define("photos", [ 'jquery' ], factory( global, $ ) );
- }
- else {
- if ( typeof define === 'function' && define.cmd ) {
- // CMD (Register photos module)
- define( 'photos', function ( require, exports, module ) {
- module.exports = factory( global, require( 'jquery' ) );
- } );
- }
- else {
- if ( typeof exports === 'object' ) {
- // Node/CommonJS
- module.exports = factory( global, require( 'jquery' ) );
- }
- else {
- // Browser globals
- factory( global, jQuery );
- }
- }
- }
- }( typeof window !== "undefined" ? window : this, function ( window, $ ) {
- 'use strict';
- var $wrap = null,
- $bd = null,
- $container = null,
- $photos = null,
- $prevBtn = null,
- $nextBtn = null,
- $ft = null,
- $dots = null,
- CLS_DOT = 'tp-dot',
- CLS_PHOTO = 'tp-photo',
- CLS_HIDE = 'tp-hide',
- CLS_ACTIVE = 'tp-active',
- photoIndex = 0,
- images = [];
- function _init () {
- $wrap = $( '#wrapper' );
- $bd = $( '#bd' );
- $container = $( '#photos' );
- $prevBtn = $( '#prev-btn' );
- $nextBtn = $( '#next-btn' );
- $ft = $( '#dots' );
- }
- function render () {
- $container.empty();
- $( images ).each( function ( i, image ) {
- var $photo = $( '<p id="photo-' + i + '" class="' + CLS_PHOTO + ' ' + CLS_HIDE + '"><img src="' + image + '" width="238" height="237" alt="页面模板预览" /></p>' ),
- $dot = $( '<a id="dot-' + i + '" class="tp-dot" href="$photo-' + i + '">' + i + '</a>' );
- if ( i === 0 ) {
- $photo.removeClass( CLS_HIDE );
- $dot.addClass( CLS_ACTIVE );
- }
- $container.append( $photo );
- $ft.append( $dot );
- } );
- $photos = $container.find( '.' + CLS_PHOTO );
- $dots = $ft.find( '.' + CLS_DOT );
- }
- function moveTo ( index ) {
- var $curPhoto = $( '#photo-' + index ),
- $curDot = $( '#dot-' + index ),
- $lastPhoto = $photos.filter( ':visible' ),
- $lastDot = $ft.find( '.' + CLS_ACTIVE );
- $lastDot.removeClass( CLS_ACTIVE );
- $curDot.addClass( CLS_ACTIVE );
- $lastPhoto.addClass( CLS_HIDE );
- $curPhoto.removeClass( CLS_HIDE );
- }
- function attachEvents () {
- $bd.on( 'mouseenter', function () {
- $prevBtn.removeClass( CLS_HIDE );
- $nextBtn.removeClass( CLS_HIDE );
- } );
- $bd.on( 'mouseleave', function () {
- $prevBtn.addClass( CLS_HIDE );
- $nextBtn.addClass( CLS_HIDE );
- } );
- $prevBtn.on( 'click', function ( evt ) {
- photoIndex -= 1;
- if ( photoIndex < 0 ) {
- photoIndex = images.length - 1;
- }
- moveTo( photoIndex );
- evt.stopPropagation();
- evt.preventDefault();
- } );
- $nextBtn.on( 'click', function ( evt ) {
- photoIndex += 1;
- if ( photoIndex >= images.length ) {
- photoIndex = 0;
- }
- moveTo( photoIndex );
- evt.stopPropagation();
- evt.preventDefault();
- } );
- $ft.delegate( '.' + CLS_DOT, 'click', function ( evt ) {
- var index = $( this ).index();
- photoIndex = index;
- moveTo( index );
- evt.stopPropagation();
- evt.preventDefault();
- } );
- }
- var Photos = function ( photos ) {
- images = photos;
- _init();
- render();
- attachEvents();
- };
- window.Photos = Photos;
- return Photos;
- } ));
复制代码 |
|