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

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>