跪求一个轻量的图片轮播的代码

hi_hamster 2017-08-14 03:41:22
研究半天还是搞不懂,所以想要一个教科书式js模板;姑且先敲出了html部分,还有部分css也不明白需要补充
!为了支持ie8不能有css3;主要按钮只只只有左右两个箭头,基本的标题框,都是只在鼠标悬停出现;图片自动轮播鼠标悬停停止轮播,切换动画效果随意。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
p,ul,li,dl,dd,dt,form,h1,h2,h3,h4,h5,h6{ list-style:none;}

.ra{width:298px;height:200px;border:1px solid #CCCCCC;}
.ra ul{width:298px;height:200px;padding:0;margin:0;}
.ra-textbg{width:298px;height:30px;margin-top:170px;z-index:1;background:#000;opacity:0.4;position:absolute;}
.ra-text{width:220px;line-height:30px;margin-top:170px;z-index:2;padding-left:10px;text-align:left;font-size:14px;color:#fff;position:absolute;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
/*按钮的css?*/
.arrows{}
#last{}
#next{}

</style>
<body>

<div class="ra">
<ul>
<li class="ra-textbg"></li><!--标题框-->
<li class="ra-text"></li><!--标题-->
<li class="ra-content"><!--轮播内容-->
<a href="#"><img src="1.jpg" alt="" /></a>
<a href="#"><img src="2.jpg" alt="" /></a>
<a href="#"><img src="3.jpg" alt="" /></a>
</li>
</ul>
<div class="arrows"><!--切换按钮-->
<a id="last"><img src="#"/></a>
<a id="next"><img src="#"/></a>
</div>
</div>
<!--js代码?-->
<script>

</script>

</body>
</html>
...全文
301 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧