图片自动播放js代码(js实现图片自动轮播)

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

  }

  </>

图片自动播放js代码(js实现图片自动轮播)

  查看演示效果

  文章来自陈传宝博客:

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 图片自动播放js代码(js实现图片自动轮播)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论