一个图片轮播的JQ代码，请各位看看为什么无法实现效果，在线等！

victorcai2006 2012-05-26 06:56:24

问题：
1、为什么naviga_bgimg下的li无法实现图片轮播？
2、为什么鼠标移入naviga_icons中的图标后无法切换对应的背景图片？



<!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>

	<title> new rollimg </title>

	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

	<script type="text/javascript" src="scripts/js/jquery-1.4.1.js"></script>

</head>



<body>

	<style type="text/css">

		* { margin:0px; padding:0px; }

		#naviga_bgimg { width:900px; height:330px; position:absolute; background:#fff center center no-repeat; }

		#naviga_bgimg ul li { float:left; list-style:none; position:absolute; }

		

		#naviga_icons { position:absolute; padding-left:30px; width:870px; height:180px; top:150px; background:url("image/nav_bg.png") bottom left repeat-x; }

		#naviga_icons a { display:inline-block; width:100px; height:180px; background:url("image/icoNav_n01.png") bottom center no-repeat; }

		#naviga_icons a.icon2 { background-image:url("image/icoNav_n02.png"); }

		#naviga_icons a.icon3 { background-image:url("image/icoNav_n03.png"); }

		#naviga_icons a.icon4 { background-image:url("image/icoNav_n04.png"); }

		#naviga_icons a.icon5 { background-image:url("image/icoNav_n05.png"); }

		#naviga_icons a.icon6 { background-image:url("image/icoNav_n06.png"); }

		#naviga_icons a.icon1:hover { background-image:url("image/icoNav_c01.png"); }

		#naviga_icons a.icon2:hover { background-image:url("image/icoNav_c02.png"); }

		#naviga_icons a.icon3:hover { background-image:url("image/icoNav_c03.png"); }

		#naviga_icons a.icon4:hover { background-image:url("image/icoNav_c04.png"); }

		#naviga_icons a.icon5:hover { background-image:url("image/icoNav_c05.png"); }

		#naviga_icons a.icon6:hover { background-image:url("image/icoNav_c06.png"); }

	</style>

  

	<script type="text/javascript">

		var nav_time = "";

        var nav_index = 1;

		var $icolist=$("#naviga_icons a");

		var $imglist=$("#naviga_bgimg ul li");

		var nav_count=$icolist.length;

		

         $(function() {

             navShow(nav_index);

             //鼠标移入移出

             $icolist.hover(function () {

                clearTimeout(nav_time);

                var nav_icon=$icolist.index($(this));

                $imglist.hide().stop(true,true).eq(nav_icon-1).fadeIn("slow");

             }, function () {

			 var nav_icon=$icolist.index($(this));

                nav_index=nav_icon > nav_count ? 1 :parseInt(nav_icon)+1;

                nav_time = setTimeout("navShow(" + nav_index + ")", 4000);

             });

         });



         function navShow(num) {

             nav_index = num;

             $imglist.hide().stop(true,true).eq(nav_index-1).fadeIn("slow");

             nav_index = nav_index + 1 > nav_count ? 1 : nav_index + 1;

             nav_time = setTimeout("navShow(" + nav_index + ")", 4000);

         }

	</script>



	<div id="naviga">

		<div id="naviga_bgimg">

			<ul>

				<li><img src="image/navbg_01.jpg" /></li>

				<li><img src="image/navbg_02.jpg" /></li>

				<li><img src="image/navbg_03.jpg" /></li>

				<li><img src="image/navbg_04.jpg" /></li>

				<li><img src="image/navbg_05.jpg" /></li>

				<li><img src="image/navbg_06.jpg" /></li>

			</ul>

		</div>

		<div id="naviga_icons">

			<a class="icon1" href="#"></a>

			<a class="icon2" href="#"></a>

			<a class="icon3" href="#"></a>

			<a class="icon4" href="#"></a>

			<a class="icon5" href="#"></a>

			<a class="icon6" href="#"></a>

		</div>

	</div>

  

</body>

</html>

...全文

456 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

victorcai2006 2012-05-28

打赏
举报

发现问题的原因了，也发上来和大家分享一下，
var nav_time = "";
var nav_index = 1;
var $icolist=$("#naviga_icons a");
var $imglist=$("#naviga_bgimg ul li");
var nav_count=$icolist.length;
这些声明语句应放到$(function() { …… 里面，需要HTML代码解析后才能对对象进行操作。