急！下午弄的，但是问题相当严重相当多，jquery仿Flash轮播（CSS 和JQuery问题）

Question

本帖最后由 default7 于 2011-08-18 19:12:40 编辑

Answer 1

/* 绑定图片 */
$('#flash > .flash-img > ul > li > a').bind('mouseover',function(){
  window.clearInterval(FlashTm);
  });
$('#flash > .flash-img > ul > li > a').bind('mouseout',function(){
  FlashTm = window.setInterval("FlashSlide()",FlashTm);
  });看到最后面绑定的mouseout事件
     FlashTm = window.setInterval("FlashSlide()",FlashTm);
这个触发事件的间隔时间......  应该是FlashTime      名字没取好啊

Answer 2

谢谢，应该是这个问题，不过CSS还是有很大的问题啊。头大啊，IE下根本就不显示。
遮罩半透明的那个，不显示啊。

Answer 3

你贴代码的结构很乱套，分离得一块一块的，不便直观运行测试。
请贴代码的时候，重新组织一下，各块用标签包起来，复制过来可以直接运行的。另外，（1）IE下那个绝对布局不显示了，文字的那个。firefox下显示的。 这个到底是哪个，都不知你说的什么。(3)移动的话，可以看看jq的animate方法API说明。

Answer 4

我已经修改了很多了，我也加了那个animate的效果了，不过还是有很多问题……
预览地址： http://it.zbphp.com/CSDN/ErrIndexFlash/
脚本源码：http://it.zbphp.com/CSDN/ErrIndexFlash/flash/index.flash.js/* JavaScript For Index Flash *//* 得到数据 */
var FlashDataArr = new Array();
$("#flash ul li a").each(function(i,o){
  var img = $(o).find('img').eq(0);
  FlashDataArr.push([$(this).attr('href'),img.attr('alt'),img.attr('src'),img.attr('width'),img.attr('height')]);
  });
var FlashHtml1 = '<div class="flash-img"><ul>';
var FlashHtml2 = '<div class="flash-txt"><ul>';
for(var i in FlashDataArr){
  FlashHtml1 += '<li><a rel="'+(parseInt(i)+1)+'" href="'+FlashDataArr[i][0]+'"><img src="'+FlashDataArr[i][2]+'" alt="'+FlashDataArr[i][1]+'" width="'+FlashDataArr[i][3]+'" height="'+FlashDataArr[i][4]+'" \/><\/li>';
  FlashHtml2 += '<li><a rel="'+(parseInt(i)+1)+'" href="'+FlashDataArr[i][0]+'">'+FlashDataArr[i][1]+'<\/a><\/li>';
  }FlashHtml1 += '</ul></div>';
FlashHtml2 += '</ul></div>';
$('#flash').html(FlashHtml1+'<div class="flash-bg"></div>'+FlashHtml2);
//$('#flash .flash-img ul li a:not(:first)').hide();
$('#flash .flash-img ul li a:first').addClass('curr');
$('#flash .flash-txt ul li a:first').addClass('curr');
/* 绑定文字 */
$('#flash .flash-txt ul li a').bind('mouseover',function(){
  var objACurr = $(this).parent().parent().find('a.curr').eq(0);
  var objANext = $(this);  var eqImgCurr = parseInt( objACurr.attr('rel') );
  var eqImgNext = parseInt( objANext.attr('rel') );  if(eqImgCurr == eqImgNext) return;  var objImgCurr = $('#flash > .flash-img > ul > li > a[rel="'+eqImgCurr+'"]');
  var objImgNext = $('#flash > .flash-img > ul > li > a[rel="'+eqImgNext+'"]');  $(this).parent().parent().find('a').removeClass('curr');
  objANext.addClass('curr');  objImgNext.css({left: objImgNext.position().left+680,'z-index':100});
  objImgCurr.animate({left:'-=680px'},'slow');
  objImgNext.animate({left:'-=680px'},'slow','swing',function(){
    objImgCurr.css({'left':0,'z-index':0});
    });
});
/* 自播函数 */
function FlashSlide(){
  if($('#flash > .flash-txt > ul > li:last-child > a').hasClass('curr')){
    $('#flash > .flash-txt > ul > li > a:first').mouseover();
  }else{
    $('#flash > .flash-txt > ul > li > a.curr').parent().next().find('a').mouseover();
  }
}/* 清除 */ function FlashStop(){  window.clearInterval(FlashInterval);  }
/* 开始 */ function FlashStart(){  FlashInterval = window.setInterval("FlashSlide()",FlashTime);  }
/* 自动轮播 */
var FlashTime = 2000;
var FlashInterval = window.setInterval("FlashSlide()",FlashTime);
$('#flash .flash-txt ul li a:first').mouseover();
/* 绑定 */
$('#flash > .flash-img > ul > li > a').bind({'mouseover':FlashStop,'mouseoout':FlashStart});
$('#flash > .flash-txt > ul > li > a').bind({'mouseover':FlashStop,'mouseoout':FlashStart});仍旧存在的问题：
（1）IE浏览器下没有，不出现。
（2）FF浏览器下可以显示，但是如果在上面滑动的太快了，就出问题，会乱套……
比较急，各位帮忙看下啊……

Answer 5

很急的话去这里下载过来修改了先用吧O(∩_∩)O~
http://www.lanrentuku.com/js/jiaodiantu.html

Answer 6

你这个东西的问题非常多，我可以帮你，发完整可执行代码给我。[email protected]

Answer 7

谢谢各位，不过还是有点问题，我整理下，还是在哪个地址上面：【演示地址】http://it.zbphp.com/CSDN/ErrIndexFlash/
【下载地址】http://it.zbphp.com/CSDN/ErrIndexFlash/ErrIndexFlash.zip
【一个作品】http://it.zbphp.com/CSDN/ErrIndexFlash/index_ok.html（不过还是有两点问题……）