急急，弹出层与图片切换。100%结贴


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
// JavaScript Document
var t = n =0, count;
$(document).ready(function(){ 
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var b = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
n = b;
if (b >= count) return;
$("#banner_info").html($("#banner_list a").eq(b).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(b).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(b).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("aaa()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("aaa()", 4000);});})function aaa()
{
n = n >=(count -1) ?0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
</head>
<body onclick="document.getElementById('menulist').style.display = 'none';">
<div id="top">
      <ul class="logo-right">
        <li class="logo-city"><span id="menuBtn"><strong id="js_v">北京</strong></span></li>
      </ul>
      <div class="list_city" id="menulist" style="display:none;">
         <dl class="box">
           <dt>华北东北</dt>
              <dd>
                <ul>
                  <li><a href="#">北京</a></li>
                </ul>
              </dd>
            </dl>
          <span class="morecities">&nbsp;</span>
                <a href="#" class="allcities">全部城市&gt;&gt;</a>
       </div>
</div>
<div id="banner">
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info"></div><!--标题-->
<ul>
<li class="on"><a class="pic">1</a></li>
<li><a class="pic">2</a></li>
<li><a class="pic">3</a></li>
<li><a class="pic">4</a></li>
<li><a class="pic">5</a></li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="index_window3.jpg"title="最美外景" alt="最美外景"/></a>
<a href="#" target="_blank"><img src="index_window4.jpg"title="最美外景" alt="最美外景"/> </a>
<a href="#" target="_blank"><img src="index_window5.jpg"title="最美外景" alt="最美外景"/></a>
<a href="#" target="_blank"><img src="index_window6.jpg"title="最美外景" alt="最美外景"/></a>
<a href="#" target="_blank"><img src="index_window7.jpg"title="最美外景" alt="最美外景"/></a>
</div>
</div><script>
ldh = {         
get: function (el) {             
return typeof el == "string" ? document.getElementById(el) : el;         
},         
on: function (el, type, fn) {             
el = this.get(el);             
el.attachEvent ?         
el.attachEvent('on' + type, function () { fn.call(el, event) }) :        
el.addEventListener(type, fn, false);             
return this         
},         
align: function (el, el2, x, y) {             
var rect = this.get(el2).getBoundingClientRect(), x = x || 0, y = y || 0;             
el.style.top = rect.top + this.get(el2).offsetHeight + y + 'px';             
el.style.left = rect.left + x + 'px'         
},         
stop: function (e) {             
e = e || window.event;             
e.stopPropagation && e.stopPropagation();             
e.cancelBubble = true;           
},         
onblur: function (el, id, fn) {             
el = this.get(el);             
id = this.get(id);             
for (var i = 0; i < el.getElementsByTagName("a").length; i++) {                 
(el.getElementsByTagName("a")[i].onclick = function () {                     
for (var m = 0; m < el.getElementsByTagName("li").length; m++) {                         
el.getElementsByTagName("li")[m].className = "";                     
}                     
id.innerHTML = this.innerHTML;                     
el.getElementsByTagName("li")[arguments.callee.x].className = "focus";                     
el.style.display = 'none';                 
}).x = i;             
}               
return this;         
}     
};     ldh.onblur('menulist', "js_v").on('menuBtn', 'click', function(e) {         
var css = ldh.get('menulist').style;         
if (css.display != 'none')        
ldh.align(ldh.get('menulist'), this, -85, 10);         
css.display = 'block'; 
ldh.stop(e); 
});
/*
$(document).ready(function(){
$(document).click(function(){
if(!$(".list_city").hasClass("hide")){
$(".list_city").addClass("hide");
}
});
*/</script></body>
</html>
点击北京弹出隐蔽的城市切换DIV，下面是个banner图片切换效果，当图片隐藏第一张切换到下一张时。弹出的城市切换DIV也同时被隐藏。怎么让他们互不影响？在线等求解....

解决方案 »

  1.   

    你这个代码真是思路有点怪啊造成这个效果的原因是，你给body了一个click事件是让那个城市切换DIV隐藏的
    你给了banner下的li列表每个一个click是切换图片的，然后蛋疼点来了，你弄了个定时器每隔4000毫秒调用一次li的click事件
    在li的click事件触发时，先执行li的click，就是切换图片，然后事件冒泡，触发了body的click事件，城市切换那个DIV就隐藏了
      

  2.   

    看看是不是你要的效果  记得把Jquery文件替换成你自己的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    // JavaScript Document
    var t = n =0, count;
    $(document).ready(function(){ 
    count=$("#banner_list a").length;
    $("#banner_list a:not(:first-child)").hide();
    $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
    $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
    $("#banner li").click(function() {
    changePic($(this));
    });
    t = setInterval("aaa()", 4000);
    $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("aaa()", 4000);});
     
    })
    function changePic(obj){
    var b = obj.text() -1;//获取Li元素内的值，即1，2，3，4
    if (b >= count) return;
    $("#banner_info").html($("#banner_list a").eq(b).find("img").attr('alt'));
    $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(b).attr('href'), "_blank")})
    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(b).fadeIn(1000);
    document.getElementById("banner").style.background="";
    obj.toggleClass("on");
    obj.siblings().removeAttr("class");
    }
    function aaa()
    {
    n = (n >=(count -1) ? 0 : ++n);
    changePic($("#banner li").eq(n));
    }
    </script>
    </head>
    <body onclick="document.getElementById('menulist').style.display = 'none';alert(123);">
    <div id="top">
          <ul class="logo-right">
            <li class="logo-city"><span id="menuBtn"><strong id="js_v">北京</strong></span></li>
          </ul>
          <div class="list_city" id="menulist" style="display:none;">
             <dl class="box">
               <dt>华北东北</dt>
                  <dd>
                    <ul>
                      <li><a href="#">北京</a></li>
                    </ul>
                  </dd>
                </dl>
              <span class="morecities">&nbsp;</span>
                    <a href="#" class="allcities">全部城市&gt;&gt;</a>
           </div>
    </div>
    <div id="banner">
    <div id="banner_bg"></div><!--标题背景-->
    <div id="banner_info"></div><!--标题-->
    <ul>
    <li class="on"><a class="pic">1</a></li>
    <li><a class="pic">2</a></li>
    <li><a class="pic">3</a></li>
    <li><a class="pic">4</a></li>
    <li><a class="pic">5</a></li>
    </ul>
    <div id="banner_list">
    <a href="#" target="_blank"><img src="index_window3.jpg"title="最美外景" alt="最美外景"/></a>
    <a href="#" target="_blank"><img src="index_window4.jpg"title="最美外景" alt="最美外景"/> </a>
    <a href="#" target="_blank"><img src="index_window5.jpg"title="最美外景" alt="最美外景"/></a>
    <a href="#" target="_blank"><img src="index_window6.jpg"title="最美外景" alt="最美外景"/></a>
    <a href="#" target="_blank"><img src="index_window7.jpg"title="最美外景" alt="最美外景"/></a>
    </div>
    </div>
     
    <script>
    ldh = {         
    get: function (el) {             
    return typeof el == "string" ? document.getElementById(el) : el;         
    },         
    on: function (el, type, fn) {             
    el = this.get(el);             
    el.attachEvent ?         
    el.attachEvent('on' + type, function () { fn.call(el, event) }) :        
    el.addEventListener(type, fn, false);             
    return this         
    },         
    align: function (el, el2, x, y) {             
    var rect = this.get(el2).getBoundingClientRect(), x = x || 0, y = y || 0;             
    el.style.top = rect.top + this.get(el2).offsetHeight + y + 'px';             
    el.style.left = rect.left + x + 'px'         
    },         
    stop: function (e) {             
    e = e || window.event;             
    e.stopPropagation && e.stopPropagation();             
    e.cancelBubble = true;           
    },         
    onblur: function (el, id, fn) {             
    el = this.get(el);             
    id = this.get(id);             
    for (var i = 0; i < el.getElementsByTagName("a").length; i++) {                 
    (el.getElementsByTagName("a")[i].onclick = function () {                     
    for (var m = 0; m < el.getElementsByTagName("li").length; m++) {                         
    el.getElementsByTagName("li")[m].className = "";                     
    }                     
    id.innerHTML = this.innerHTML;                     
    el.getElementsByTagName("li")[arguments.callee.x].className = "focus";                     
    el.style.display = 'none';                 
    }).x = i;             
    }               
    return this;         
    }     
    };     
     
    ldh.onblur('menulist', "js_v").on('menuBtn', 'click', function(e) {         
    var css = ldh.get('menulist').style;         
    if (css.display != 'none')        
    ldh.align(ldh.get('menulist'), this, -85, 10);         
    css.display = 'block'; 
    ldh.stop(e); 
    });
    /*
    $(document).ready(function(){
    $(document).click(function(){
    if(!$(".list_city").hasClass("hide")){
    $(".list_city").addClass("hide");
    }
    });
    */
     
    </script>
     
    </body>
    </html>
      

  3.   

    还有个问题，<strong id="js_v">北京</strong>里的北京是默认的，如果我切到广州，刷新页面又显示北京了