当前位置:首页 > 网络营销 > 正文

html中图片轮播(html图片轮播代码)

sukai 发布:2023-11-19 04:10 6568


  html 部分:

  div id="banner"

  /div

  div id=daohang

  ul

html中图片轮播(html图片轮播代码)

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

  }

  /

  查看演示效果

  文章来自陈传宝博客:

版权说明:如非注明,本站文章均为 邯郸市兰霖科技有限公司 原创,转载请注明出处和附带本文链接;

本文地址:http://www.quwujie.com/post/110271.html


分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载