jquery 实现背景图片循环切换，显示隐藏div

badlearner

于 2014-09-18 17:24:11 发布

阅读量3.7k

点赞数

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/badlearner/article/details/39375975

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery来实现在页面中背景图片的循环切换效果，并展示了如何通过点击操作来显示或隐藏一个div内容。具体实现涉及到CSS样式设置，如背景图片的定位和浮动，以及jQuery事件监听和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现图片背景循环切换，显示隐藏一个div。

$(function(){
$("#table4").hide();
$(".o_record p span").toggle(function(){
$(this).addClass("o_span");
$("#table4").show();
},function(){
$(this).removeClass("o_span");
$("#table4").hide();
})
});

</script>

.o_layout .o_record p .o_span{ float:right; display:inline; width:60px; background:url(../images/20140918010340704_easyicon_net_16.png) no-repeat right;cursor:pointer;}
.o_up{ float:right; display:inline; width:60px;background:url(../images/20140918010354231_easyicon_net_16.png) no-repeat right; cursor:pointer;}
.o_layout .o_record .table4{margin-top:10px;}

</style>

<div class="o_record">
<p><i class="r_icon"></i>操作历史记录<span class="o_up">|  展开</span></p>
<div class="table4" id="table4">
<table>
<tbody>
<tr>
<th class="col_width2">操作者</th>
<th class="col_width2">操作时间</th>
<th class="col_width2">操作状态</th>
<th>备注</th>
</tr>
</tbody>
<tbody> <tr>
<th class="col_width2"></th>
<th class="col_width2"></th>
<th class="col_width2"></th>
<th></th>
</tr></tbody>
</table>
</div>
</div>