首页 新闻 会员 周边

关于图片轮播的js代码问题

0
[待解决问题]

我在网上下载别人的图片轮播的代码下来研究,结果碰壁了,弄了好久弄不明白,麻烦哪位大哥帮忙解析一下:

  1 $.fn.extend({
  2     allenMenu: function() {                    
  3         $(this).children('ul').children('li').hover(                //hover:当鼠标悬停时
  4             function() {
  5                 if(!$(this).children('ul').hasClass('focus')) {
  6                     $(this).addClass('focus');
  7                     $(this).children('ul:first').stop(true, true).animate({ height:'show' }, 'fast');
  8                 }
  9             },
 10             function() {
 11                 $(this).removeClass('focus');
 12                 $(this).children('ul:first').stop(true, true).animate({ height:'hide', opacity:'hide' }, 'slow');
 13             }
 14         );
 15         $(this).children('ul').children('li').children('ul').hover(
 16             function() {
 17                 $(this).addClass('focus');
 18             },
 19             function() {
 20                 $(this).removeClass('focus');
 21             }
 22         );
 23     }
 24 });
 25 
 26 $.fn.extend({
 27     allenSlide: function() {
 28         var ads = $(this).find('ul:first li');
 29         var name = $(this).attr('id');
 30         var n = ads.length;
 31         var w = ads.width();
 32         var h = ads.height();
 33         var clicked = false;
 34         var t = 4000;
 35         var lt = 1000;
 36         var speed = 500;
 37         var curPage = 1;
 38         
 39         //$(this).children('ul:first').append($(this).find('ul:first li:first').clone());
 40         
 41         //$(this).width(w).height(h);
 42         $(this).width(w);
 43         $(this).css('overflow', 'hidden');
 44         $(this).css('position', 'relative');
 45         $(this).children('ul:first').width(w * (n + 1));
 46         var pages = $('<div class="slide-page"></div>');
 47         for(var i = 1; i <= n; i++) {
 48             var el = $('<a href="#" id="' + name + '-page-' + i + '">' + i + '</a>');
 49             eval('el.click(function(){ clicked = true; slideTo(' + i + '); return false; });');
 50             pages.append(el);
 51         }
 52         $(this).append(pages);
 53         $('#' + name + '-page-1').parent().addClass('on');
 54         autoSlide();
 55         
 56         /* Fade Version
 57         */
 58         function slideTo(page) {
 59             curPage = page;
 60             var ml = -1 * w * (page - 1);
 61             $('#' + name).find('li:eq('+(curPage-1)+')').stop();
 62             if(page > n) {
 63                 page = 1;
 64                 curPage = 1;
 65             }
 66             $('#' + name).find('li').each(function() {
 67                 if($(this).css("display") != "none") {
 68                     //$(this).css('z-index', '2');
 69                     $(this).fadeOut(speed);
 70                 }
 71             });
 72             //$('#' + name).find('li:eq('+(page-1)+')').css('z-index', '1');
 73             $('#' + name).find('li:eq('+(page-1)+')').fadeIn(speed);
 74             $('#' + name).find('.slide-page > a').removeClass('on');
 75             $('#' + name + '-page-' + curPage).addClass('on');
 76         }
 77 
 78         /* Slide Version
 79         function slideTo(page) {
 80             curPage = page;
 81             var ml = -1 * w * (page - 1);
 82             $('#' + name).children('ul:first').stop();
 83             if(page > n) {
 84                 curPage = 1;
 85             } else if(page == 2 && !clicked) {
 86                 $('#' + name).children('ul:first').css('margin-left', '0px');
 87             }
 88             $('#' + name).children('ul:first').animate({ marginLeft: ml }, speed);
 89             $('#' + name).find('.slide-page > a').removeClass('on');
 90             $('#' + name + '-page-' + curPage).addClass('on');
 91         }
 92         */
 93         
 94         function autoSlide() {
 95             var tp = curPage;
 96             if(!clicked) {
 97                 slideTo(tp + 1);
 98                 eval('setTimeout(function() { autoSlide(); }, ' + t + ');');
 99             } else {
100                 clicked = false;
101                 eval('setTimeout(function() { autoSlide(); }, ' + lt + ');');
102             }
103         }
104 
105     }
106 });
yeamatch的主页 yeamatch | 菜鸟二级 | 园豆:202
提问于:2014-03-11 22:34
< >
分享
所有回答(2)
0

给你发个地址。里面都是焦点图切换的特效。希望可帮到你。


http://www.xwcms.net/js/list/jdt/jdt_1.html

xiwei | 园豆:202 (菜鸟二级) | 2014-03-12 01:02

谢谢!

支持(0) 反对(0) yeamatch | 园豆:202 (菜鸟二级) | 2014-03-12 10:08
0
1565783227 | 园豆:227 (菜鸟二级) | 2014-08-18 12:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册