求网页上图片切换的js代码,只要能切换就行,越简单越好
1个回答
展开全部
<div class="rside_1" id="rside_11" style="margin-top:10px;height:310px;">
<div class="box" id="box1" style="background:rgba(0,153,204,1);">
<a href=""><img src="image/003.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box2" style="background:rgba(51,0,51,1);">
<a href=""><img src="image/005.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box3" style="background:rgba(204,51,102,1);">
<a href=""><img src="image/002.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box4" style="background:rgba(102,102,153,1);">
<a href=""><img src="image/009.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box5" style="background:rgba(102,204,51,1);" >
<a href=""><img src="image/008.jpg"/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div id="tab">
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
</div>
var t = n =0, count;
$(document).ready(function(){
count=$(".box").length;//获得.box标签的长度
$("#tab a").css({'background':'rgba(153,153,153,1)'});
$(".box .title").html($("#box1 a").find("img").attr('alt'));//用html()方法获得第一张照片的介绍放在标题位置
$(".box .title").click(function(){window.open($("#box1 a").attr('href'), "_blank")});//给第一张照片标题绑定一个点击事件
$("#tab a").click(function() {//给照片索引号绑定点击事件
var i = $(this).index();
n = i;
if (i >= count) return;
$(this).css({'background':'rgba(102,102,102,1)'});
$("#tab a").not(this).css({'background':'rgba(153,153,153,1)'});
$(".box .shew .title").html($(".box a").eq(i).find("img").attr('alt'));
$(".box .shew .title").unbind().click(function(){window.open($(".box a").eq(i).attr('href'), "_blank")})
$(".box ").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
//$('#txt p').filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$('#tab a').toggleClass("on");
$('#tab a').siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$(".box,#txt").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n >=(count -1) ?0 : ++n;
$("#tab a").eq(n).trigger('click');
}
<div class="box" id="box1" style="background:rgba(0,153,204,1);">
<a href=""><img src="image/003.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box2" style="background:rgba(51,0,51,1);">
<a href=""><img src="image/005.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box3" style="background:rgba(204,51,102,1);">
<a href=""><img src="image/002.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box4" style="background:rgba(102,102,153,1);">
<a href=""><img src="image/009.jpg" alt=""/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div class="box" id="box5" style="background:rgba(102,204,51,1);" >
<a href=""><img src="image/008.jpg"/></a>
<div class="shew"><p class="title"></p></div>
</div>
<div id="tab">
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
</div>
var t = n =0, count;
$(document).ready(function(){
count=$(".box").length;//获得.box标签的长度
$("#tab a").css({'background':'rgba(153,153,153,1)'});
$(".box .title").html($("#box1 a").find("img").attr('alt'));//用html()方法获得第一张照片的介绍放在标题位置
$(".box .title").click(function(){window.open($("#box1 a").attr('href'), "_blank")});//给第一张照片标题绑定一个点击事件
$("#tab a").click(function() {//给照片索引号绑定点击事件
var i = $(this).index();
n = i;
if (i >= count) return;
$(this).css({'background':'rgba(102,102,102,1)'});
$("#tab a").not(this).css({'background':'rgba(153,153,153,1)'});
$(".box .shew .title").html($(".box a").eq(i).find("img").attr('alt'));
$(".box .shew .title").unbind().click(function(){window.open($(".box a").eq(i).attr('href'), "_blank")})
$(".box ").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
//$('#txt p').filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$('#tab a').toggleClass("on");
$('#tab a').siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$(".box,#txt").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n >=(count -1) ?0 : ++n;
$("#tab a").eq(n).trigger('click');
}
追问
只能显示第一张图片,也不能切换
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询