JavaScript实现带标题的图片轮播特效
120 浏览量
2020-10-24
05:13:02
上传
评论
收藏 44KB PDF 举报
JavaScript实现带标题的图片轮播特效实现带标题的图片轮播特效
里给大家分享的是4屏带标题和文字描述的js图片轮播代码，完美兼容IE6。图片滚动切换，鼠标放到数字选项卡
即可切换图片。点击图片跳转到指定页面，有需要的小伙伴可以参考下。
图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。
如图
CSS代码：
<style type="text/css">
.body{
width:524px;
border:solid 1px #666;
margin-left:auto;
margin-right:auto;
}
.bg{
background-color:#E0E0E0;
height:20px;
border-top:solid 1px #B4B4B4;
}
.number{
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #9E2E07;
display: block;
border: 1px solid #FFF;
width:18px;
height:18px;
text-align: center;
margin-left:10px;
cursor:pointer;
float:left;
}
.numberOver{
color:#8C2806;
font-size:14px;
width:280px;
background-color:#FFF;
text-align:center;
float:left;
display: block;
margin-left:10px;
}
.main{
width:95%;
margin-left:auto;
margin-right:auto;
}
.left_indent{
padding-left:20px;
}
.red{
color:#F00;
}
</style>
HTML代码：
<div class="body"><img src="ad-01.jpg" width="524" height="190" border="0" alt="广告图片" id="Rotator">
<div class="bg">
<div class="number" id="fig_1" onclick="show(1);">1</div>
<div class="number" id="fig_2" onclick="show(2);">2</div>
<div class="number" id="fig_3" onclick="show(3);">3</div>
<div class="number" id="fig_4" onclick="show(4);">4</div>
</div>
</div>
JS代码：
资源评论
weixin_38684328
- 粉丝: 5
- 资源: 898
