收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1734|回复: 5

[作品展示] 无聊的时候写了一个轮播

[复制链接]
发表于 2016-4-16 22:07:21 | 显示全部楼层 |阅读模式
压缩文件是7z格式的,没有zip软件,自己修改一下

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

  1. /**
  2. * Created by Robert on 2016/4/14.
  3. */
  4. (function ( global, factory ) {
  5.     'use strict';

  6.     if ( typeof define === 'function' && define.amd ) {
  7.         // AMD (Register photos)
  8.         define("photos", [ 'jquery' ], factory( global, $ ) );
  9.     }
  10.     else {

  11.         if ( typeof define === 'function' && define.cmd ) {
  12.             // CMD (Register photos module)
  13.             define( 'photos', function ( require, exports, module ) {
  14.                 module.exports = factory( global, require( 'jquery' ) );
  15.             } );
  16.         }
  17.         else {

  18.             if ( typeof exports === 'object' ) {
  19.                 // Node/CommonJS
  20.                 module.exports = factory( global, require( 'jquery' ) );
  21.             }
  22.             else {
  23.                 // Browser globals
  24.                 factory( global, jQuery );
  25.             }
  26.         }
  27.     }
  28. }( typeof window !== "undefined" ? window : this, function ( window, $ ) {
  29.     'use strict';

  30.     var $wrap = null,
  31.         $bd = null,
  32.         $container = null,
  33.         $photos = null,
  34.         $prevBtn = null,
  35.         $nextBtn = null,
  36.         $ft = null,
  37.         $dots = null,
  38.         CLS_DOT = 'tp-dot',
  39.         CLS_PHOTO = 'tp-photo',
  40.         CLS_HIDE = 'tp-hide',
  41.         CLS_ACTIVE = 'tp-active',
  42.         photoIndex = 0,
  43.         images = [];


  44.     function _init () {
  45.         $wrap = $( '#wrapper' );
  46.         $bd = $( '#bd' );
  47.         $container = $( '#photos' );
  48.         $prevBtn = $( '#prev-btn' );
  49.         $nextBtn = $( '#next-btn' );
  50.         $ft = $( '#dots' );
  51.     }

  52.     function render () {

  53.         $container.empty();

  54.         $( images ).each( function ( i, image ) {
  55.             var $photo = $( '<p id="photo-' + i + '" class="' + CLS_PHOTO + ' ' + CLS_HIDE + '"><img src="' + image + '" width="238" height="237" alt="页面模板预览" /></p>' ),
  56.                 $dot = $( '<a id="dot-' + i + '" class="tp-dot" href="$photo-' + i + '">' + i + '</a>' );

  57.             if ( i === 0 ) {
  58.                 $photo.removeClass( CLS_HIDE );
  59.                 $dot.addClass( CLS_ACTIVE );
  60.             }

  61.             $container.append( $photo );
  62.             $ft.append( $dot );
  63.         } );

  64.         $photos = $container.find( '.' + CLS_PHOTO );
  65.         $dots = $ft.find( '.' + CLS_DOT );
  66.     }

  67.     function moveTo ( index ) {
  68.         var $curPhoto = $( '#photo-' + index ),
  69.             $curDot = $( '#dot-' + index ),
  70.             $lastPhoto = $photos.filter( ':visible' ),
  71.             $lastDot = $ft.find( '.' + CLS_ACTIVE );

  72.         $lastDot.removeClass( CLS_ACTIVE );
  73.         $curDot.addClass( CLS_ACTIVE );

  74.         $lastPhoto.addClass( CLS_HIDE );
  75.         $curPhoto.removeClass( CLS_HIDE );
  76.     }

  77.     function attachEvents () {

  78.         $bd.on( 'mouseenter', function () {
  79.             $prevBtn.removeClass( CLS_HIDE );
  80.             $nextBtn.removeClass( CLS_HIDE );
  81.         } );

  82.         $bd.on( 'mouseleave', function () {
  83.             $prevBtn.addClass( CLS_HIDE );
  84.             $nextBtn.addClass( CLS_HIDE );
  85.         } );

  86.         $prevBtn.on( 'click', function ( evt ) {

  87.             photoIndex -= 1;

  88.             if ( photoIndex < 0 ) {
  89.                 photoIndex = images.length - 1;
  90.             }

  91.             moveTo( photoIndex );

  92.             evt.stopPropagation();
  93.             evt.preventDefault();
  94.         } );

  95.         $nextBtn.on( 'click', function ( evt ) {

  96.             photoIndex += 1;

  97.             if ( photoIndex >= images.length ) {
  98.                 photoIndex = 0;
  99.             }

  100.             moveTo( photoIndex );

  101.             evt.stopPropagation();
  102.             evt.preventDefault();
  103.         } );

  104.         $ft.delegate( '.' + CLS_DOT, 'click', function ( evt ) {
  105.             var index = $( this ).index();

  106.             photoIndex = index;
  107.             moveTo( index );

  108.             evt.stopPropagation();
  109.             evt.preventDefault();
  110.         } );
  111.     }

  112.     var Photos = function ( photos ) {
  113.         images = photos;

  114.         _init();
  115.         render();
  116.         attachEvents();
  117.     };

  118.     window.Photos = Photos;

  119.     return Photos;
  120. } ));
复制代码

图片轮播.zip

168.4 KB, 下载次数: 406

轮播

发表于 2016-4-17 09:22:13 | 显示全部楼层
感谢楼主的分享!学习啦!
回复 支持 反对

使用道具 举报

发表于 2016-4-19 16:54:36 | 显示全部楼层
'use strict';
这句话啥意思?
作为“刚接触的同学”表示完全看不懂,求楼主推荐一下前端模块化的入门教程
回复 支持 反对

使用道具 举报

发表于 2016-4-19 17:04:07 | 显示全部楼层
楼上问的那个是“严格模式”
回复 支持 反对

使用道具 举报

发表于 2016-4-24 14:07:02 | 显示全部楼层
swiper这些工具海啸从来都不用么?
回复 支持 反对

使用道具 举报

发表于 2016-5-5 09:29:13 | 显示全部楼层
感谢楼主的分享!学习啦!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-28 10:02 , Processed in 0.109098 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表