week921 - 2015/8/12 22:07:53
第一个是幻灯片,第一段是一个地图的,两个弄在一个页面,幻灯片就不运作了,好郁闷。求大神帮忙看看。。
这是幻灯片的
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
3D立体旋转jquery幻灯片
</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style-type:none;
}
a, img {
border:0;
}
body {
font:12px/180% Tahoma, Geneva, sans-serif;
}
/* Carousel */
#carousel1 {
width:1000px;
height:380px;
overflow:hidden;
position:relative;
border-bottom:solid 1px #d8d9da;
margin:0 auto;
}
#carousel1 img {
border:none;
width:550px;
height:250px;
border:solid 1px #000;
}
#carousel1 #title-text {
font-size:22px;
margin:10px 20px 0 0;
padding:0;
text-align:right;
}
#carousel1 #alt-text {
font-size:14px;
margin:5px 20px 0 0;
padding:0;
text-align:right;
}
#carousel1 #user-c {
padding:0;
position:absolute;
right:15px;
bottom:10px;
}
#carousel1 .carouselLeft, #carousel1 .carouselRight {
position:absolute;
bottom:10px;
width:29px;
height:30px;
overflow:hidden;
cursor:pointer;
}
#carousel1 .carouselLeft {
right:60px;
background:url(e/ld/h/images/templatemo_slider_right.png) no-repeat;
}
#carousel1 .carouselRight {
right:910px;
background:url(e/ld/h/images/templatemo_slider_left.png) no-repeat;
}
</style>
<script type="text/javascript" src="e/ld/h/js/jquery.js"></script>
<script type="text/JavaScript" src="e/ld/h/js/CloudCarousel.1.0.5.js"></script>
<script type="text/JavaScript" src="e/ld/h/js/jquery.mousewheel.js"></script>
<!--鼠标滚动插件-->
<script type="text/javascript">
$(document).ready(function(){
// 这初始化容器中指定的元素,在这种情况下,旋转木马.
$("#carousel1").CloudCarousel({
xPos:550,
yPos:30,
buttonLeft: $('#but1'),
buttonRight: $('#but2'),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
FPS:30,
reflHeight:86,
reflGap:2,
yRadius:40,
autoRotateDelay: 1200,
speed:0.2,
mouseWheel:true,
bringToFront:true
});
});
</script>
<div id="carousel1">
<a target="_parent"><img class="cloudcarousel" src="e/h/images/s_1.jpg" /></a> <a target="_parent"><img class="cloudcarousel" src="e/h/images/s_2.jpg" /></a> <a target="_parent"><img class="cloudcarousel" src="e/h/images/s_3.jpg" /></a> <a target="_parent"><img class="cloudcarousel" src="e/h/images/s_4.jpg" /></a>
<div id="but1" class="carouselLeft">
</div>
<div id="but2" class="carouselRight">
</div>
</div>
这是地图的
<meta charset="utf-8" />
<title>
jQuery地图map悬停显示省市代码
</title>
<script src="e/ld/ditu/js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="e/ld/ditu/js/lib/raphael-min.js"></script>
<script type="text/javascript" src="e/ld/ditu/js/res/chinaMapConfig.js"></script>
<script type="text/javascript" src="e/ld/ditu/js/map-min.js"></script>
<style>
*{margin:0;padding:0;border: none;}
body { color: #333; text-align: center; font: 12px "微软雅黑";background-color: #ffffff; }
.mapTipText{width: 280px;height: 180px;background-color: #ffffff;}
.mapTipText .mapTipImg{height: 66px; width: 66px; float: left;border: 2px solid #ffffff; border-radius: 50%;overflow: hidden;margin: -12px 5px 0 -12px;}
.mapTipText .mapTipImg img{width: 100%;height: 100%;}
.mapTipText .mapTipList{float: left;margin-left: 4px;}
.mapTipText .mapTipList h2{text-align: left;}
.mapTipText .mapTipList h2 a{font-size: 24px; color: #262626;text-decoration:none;}
.mapTipText .mapTipList h2 a:hover{ color: #0085d2;}
.mapTipText .mapTipList h2 a span{font-size: 16px;margin-left: 3px;}
.mapTipText .mapTipList ul{ width: 203px;padding-right: 10px;}
.mapTipText .mapTipList ul li{list-style: none;float: left;padding: 7px 3px 0 3px;}
.mapTipText .mapTipList ul li a{color: #262626;text-decoration:none;}
.mapTipText .mapTipList ul li a:hover{background-color:#2ebcfe;color:#ffffff;}
</style>
<script type="text/javascript">
$(function(){
$('#ChinaMap').SVGMap({
mapWidth: 999,
mapHeight: 491,
});
});
</script>
</head>
<body>
<div class="itemCon" style="text-align:center;margin:80px 0;">
<div id="ChinaMap" style="margin:0px auto 0 auto;"></div>
<div id="stateTip" style="position:absolute;left:100%x;text-align:left;display:inline;"></div>
</div>
<div id="mapTipContent" style="width:900px;margin:0 auto;display:none;">
<div class="mapTipText mapTipText22">
<div class="mapTipImg"><img src="e/ld/ditu/images/chongqing.jpg" alt="" /></div>
<div class="mapTipList">
<h2><a href="">重庆<span>Chongqing</span></a></h2>
<ul>
<li><a href="">石柱</a></li>
<li><a href="">北碚</a></li>
<li><a href="">璧山</a></li>
<li><a href="">大足</a></li>
<li><a href="">垫江</a></li>
<li><a href="">丰都</a></li>
<li><a href="">奉节</a></li>
<li><a href="">涪陵</a></li>
<li><a href="">合川</a></li>
<li><a href="">江津</a></li>
<li><a href="">开县</a></li>
<li><a href="">巴南</a></li>
<li><a href="">梁平</a></li>
<li><a href="">渝北</a></li>
<li><a href="">南川</a></li>
<li><a href="">南坪</a></li>
<li><a href="">綦江</a></li>
<li><a href="">荣昌</a></li>
<li><a href="">长寿</a></li>
<li><a href="">铜梁</a></li>
<li><a href="">潼南</a></li>
<li><a href="">巫山</a></li>
<li><a href="">武隆</a></li>
<li><a href="">秀山</a></li>
<li><a href="">永川</a></li>
<li><a href="">酉阳</a></li>
</ul>
</div>
</div>
<div class="mapTipText mapTipText17">
<div class="mapTipImg">
<img src="e/ld/ditu/images/Sichuan.jpg" alt="" />
</div>
<div class="mapTipList">
<h2>
<a href="">四川<span>Sichuan</span></a>
</h2>
<ul>
<li><a href="">资中</a></li>
<li><a href="">安岳</a></li>
<li><a href="">崇州</a></li>
<li><a href="">大竹</a></li>
<li><a href="">都江堰</a></li>
<li><a href="">峨眉山</a></li>
<li><a href="">广安</a></li>
<li><a href="">广元</a></li>
<li><a href="">华蓥</a></li>
<li><a href="">简阳</a></li>
<li><a href="">江油</a></li>
<li><a href="">开江</a></li>
<li><a href="">阆中</a></li>
<li><a href="">邻水</a></li>
<li><a href="">隆昌</a></li>
<li><a href="">南部</a></li>
<li><a href="">南充</a></li>
<li><a href="">南溪</a></li>
<li><a href="">内江</a></li>
<li><a href="">郫县</a></li>
<li><a href="">邛崃</a></li>
<li><a href="">仁寿</a></li>
<li><a href="">渠县</a></li>
<li><a href="">荣县</a></li>
<li><a href="">三台</a></li>
<li><a href="">万源</a></li>
<li><a href="">武胜</a></li>
<li><a href="">宣汉</a></li>
<li><a href="">盐亭</a></li>
<li><a href="">岳池</a></li>
<li><a href="">中江</a></li>
<li><a href="">资阳</a></li>
<li><a href="">自贡</a></li>
</ul>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0;font:normal 14px/24px 'MicroSoft YaHei';clear:both;">
<p>
.
</p>
</div>
scstjcy - 2015/8/14 10:06:57
初步判断应该是标签混乱以至于代码冲突,你这代码全部加进去的话,原来的页面会存在多个title标签、head标签、body标签,特别是body,自己把多余的删除再试吧,或者发网址出来大家看。
week921 - 2015/8/14 11:17:21
我是用的两个模块,然后再同一个页面显示。