html 部分:
<div id="banner">
</div>
<div id=daohang>
<ul>
<li onMouseover="change(1)"><a>爱上超模:高温演绎地球末日</a></li>
<li onMouseover="change(2)"><a>我不是妖怪:外星人成护妹暖男</a></li>
<li onMouseover="change(3)"><a>不良人:岐王李嗣源觐见星云</a></li>
<li onMouseover="change(4)"><a>另一个我:真人版美女与野兽</a></li>
<li onMouseover="change(5)"><a>何洁暴瘦5桶油吴莫愁喊罢录</a></li>
<li onMouseover="change(6)"><a>美人为馅:杨蓉白宇悬爱解谜</a></li>
<li onMouseover="change(7)"><a>美人为馅:杨蓉白宇悬爱解谜</a></li>
<li onMouseover="change(8)"><a>另一个我:真人版美女与野兽</a></li>
<li onMouseover="change(9)"><a>不良人:岐王李嗣源觐见星云</a></li>
<li onMouseover="change(10)"><a>爱上超模:高温演绎地球末日</a></li>
</ul>
</div>
css 样式
*{
margin:0px;
padding:0px;
}
body{
margin:0px;
}
#banner{
position:absolute;
margin:0px;
width:100%;
height:400px;
background-image:url(image/1.jpg);
}
#banner ul{ list-style:none;
}
#daohang{
width:220px;
height:350px;
position:relative;
right:-1045px;
top:35px;
background:#101314;
}
#daohang ul{
list-style:none;
width:220px;
height:350px;
}
#daohang ul li{
width:220px;
height:31px;
font-family:微软雅黑;
color:#fff;
text-align:center;
font-size:14px;
padding-top:4px;
line-height:31px;
}
#daohang ul li:hover{
background:#63B504;
}
js:
<>
function change(n){
banner.setAttribute("style","background-image:url(image/"+n+".jpg)");
}
</>
查看演示效果
文章来自陈传宝博客:
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html5自动带文字轮播图片代码的简单介绍
1 评论