html图片效果(html图片设置)

　　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)");

　　}

　　</>

　　查看演示效果

　　文章来自陈传宝博客：