我有一个父 html 页面，其中包含用于我的垂直菜单的手风琴 JS 文件。我还想在其中包含一个简单的图像幻灯片放映、JS 文件。通过包含两个 JS 文件来避免 jQuery 冲突。我用过 I<frame>标签。它在所有现代浏览器中都能完美运行。但在 Internet Explorer 6 中。我的图像幻灯片放映根本不起作用。这是我的代码。
<link type="text/css" rel="stylesheet" href="css/template.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url()"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url()"});
});
});
</script>
<style type="text/css">
}
.menu_list {
width:100%
}
.menu_head {
padding: 0px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #fff url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body p{
display:block;
background-color:#fff;
margin-top:0px;
padding-left:10px;
text-decoration:none;
}
.menu_body a:hover{
color: #000000;
text-decoration:underline;
}
</style>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr >
<td ><iframe src="simple_gallery.html" width="300px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="No"></iframe></td>
</tr>
</table>
<div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
<a href="#">Link-3</a>
</div>
</div>
iframe 链接页面内容：
<link rel="stylesheet" type="text/css" href="css/simple_slider.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="JS/simplegallery.js"></script>
<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [300,250], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/img-2.jpg", "#", "_new", "There's nothing like a nice swim in the Summer."],
["images/img-1.jpg", "#", "", ""],
["images/r-tata.jpg", "", "", "Eat your fruits, it's good for you!"],
["images/inside-image1.jpg", "", "", ""]
],
autoplay: [true, 2500, 5], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
<style type="text/css">
}
.menu_list {
width:100%
}
.menu_head {
padding: 0px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #fff url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body p{
display:block;
background-color:#fff;
margin-top:0px;
padding-left:10px;
text-decoration:none;
}
.menu_body a:hover{
color: #000000;
text-decoration:underline;
}
</style>
<div id="simplegallery1"></div>