<!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=gb2312" /><title>流动数据上善若水&mdash;戴尔流动数据专题</title><title>无标题文档</title>
<style type="text/css">.js {
POSITION: relative;
WIDTH: 576px;
HEIGHT: 246px;
float: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.jsNav {
BACKGROUND: url(http://www.dostor.com/subject/dell120106/images/jsNav.png) no-repeat
}
.prevBtn {
BACKGROUND: url(http://www.dostor.com/subject/dell120106/images/jsNav.png) no-repeat
}
.nextBtn {
BACKGROUND: url(http://www.dostor.com/subject/dell120106/images/jsNav.png) no-repeat
}
.imgSelected {
BACKGROUND: url(http://www.dostor.com/subject/dell120106/images/jsNav.png) no-repeat
}
.jsNav {
POSITION: absolute;
WIDTH: 150px;
BOTTOM: 10px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
HEIGHT: 30px;
RIGHT: 10px;
FONT-WEIGHT: bold
}
.jsNav A {
TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 25px; FLOAT: left; VERTICAL-ALIGN: middle
}
.prevBtn {
DISPLAY: block; BACKGROUND-POSITION: 0px -30px; HEIGHT: 30px
}
.nextBtn {
DISPLAY: block; BACKGROUND-POSITION: -100px -30px; HEIGHT: 30px
}
.imgSelected {
BACKGROUND-POSITION: 1px -60px; COLOR: #000
}</style>
</head><body><SCRIPT type=text/javascript src="http://www.dostor.com/subject/dell120106/js/jquery.js"></SCRIPT>
<script type="text/javascript">//<![CDATA[
$(function(){
(function(){
var curr = 0;
$("#jsNav .trigger").each(function(i){
$(this).click(function(){
curr = i;
$("#js img").eq(i).fadeIn("slow").siblings("img").hide();
$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
return false;
});
});

var pg = function(flag){
//flag:true表示前翻, false表示后翻
if (flag) {
if (curr == 0) {
todo = 2;
} else {
todo = (curr - 1) % 4;
}
} else {
todo = (curr + 1) % 4;
}
$("#jsNav .trigger").eq(todo).click();
};

//前翻
$("#prev").click(function(){
pg(true);
return false;
});

//后翻
$("#next").click(function(){
pg(false);
return false;
});

//自动翻
var timer = setInterval(function(){
todo = (curr + 1) % 4;
$("#jsNav .trigger").eq(todo).click();
},4000);

//鼠标悬停在触发器上时停止自动翻
$("#jsNav a").hover(function(){
clearInterval(timer);
},
function(){
timer = setInterval(function(){
todo = (curr + 1) % 4;
$("#jsNav .trigger").eq(todo).click();
},1500);
}
);
})();
});
//]]>//懒人图库 www.lanrentuku.com</script><div id="js" class="js"><img alt="" src="http://www.dostor.com/subject/dell120106/images/01.jpg" />
          <img style="DISPLAY: none" alt="" src="http://www.dostor.com/subject/dell120106/images/02.jpg" />
           <img style="DISPLAY: none" alt="" src="http://www.dostor.com/subject/dell120106/images/03.jpg" />
<img style="DISPLAY: none" alt="" src="http://www.dostor.com/subject/dell120106/images/04.jpg" />
            <div id="jsNav" class="jsNav"><a id="prev" class="prevBtn" href="javascript:void(0)"></a> <a class="trigger imgSelected" href="javascript:void(0)">1</a> <a class="trigger" href="javascript:void(0)">2</a> <a class="trigger" href="javascript:void(0)">3</a> <a class="trigger" href="javascript:void(0)">4</a> <a id="next" class="nextBtn" href="javascript:void(0)"></a></div>
          </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><a name="01shi" id="01shi">1</a>              </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><a name="02shi" id="02shi">2</a>              </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><a name="03shi" id="03shi">3</a></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p> 
              <a name="04shi" id="04shi">4</a></p>
</body>
</html>
点击轮换图片1到定位的锚记1,点击轮换图片2到定位的锚记2,点击轮换图片3到定位的锚记3,点击轮换图片4到定位的锚记4,修改$("#jsNav .trigger").each(function(i){
$(this).click(function(){
curr = i;
$("#js img").eq(i).fadeIn("slow").siblings("img").hide();
$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
这一块的$("#js img")属性,请指点!本人试了<a href="01shi">img alt="" src="http://www.dostor.com/subject/dell120106/images/01.jpg" />
          </a>图片轮换会有问题。

解决方案 »

  1.   

    你有什么问题,如果是点击a id="prev" 时不轮转最后一张图,那么把todo = 2;
    改成
    todo = 3;
      

  2.   

    JS轮换没有问题,就是在轮换的banner图片上加个瞄记连接到另外一个地址;
      

  3.   

    在$("#js img").click事件里面转跳不可以么
      

  4.   

    $("#js img.click ").eq(i).fadeIn("slow").siblings("img").hide();
    可以过去但是图片的显示会在下面一行出来,上面还有一行显示,显示错位,
      

  5.   

    我的代码COPY下来就能改,图片也能看到,都是上传到网站的地址。