*{ padding:0px; border:0px; margin:0px; } ul { list-style:none; } .slideBox { margin:50px auto; width:300px; height:480px; box-shadow:2px 2px 10px #C38DD4; border-radius:20px; position:relative; overflow:hidden; } .slideBox ul { position:relative; width:2000px;} .slideBox ul li { float:left; width:300px; height:480px; position:relative; } .spanBox { position:absolute; width:300px; height:20px; bottom:10px; left:80px; } .spanBox span { width:18px; height:18px; margin-left:5px; background-color:rgba(201,178,207,1.00); float:left; line-height:16px; text-align:center; text-shadow:2px 2px 2px #C5EBF0; font-family:cabin-sketch; font-size:15px; } .slideBox .spanBox .active { background-color:rgba(155,83,244,0.79); border:solid 1px #BEEBEC; border-radius:4px; } .prev { font-size: 38px; position:absolute; left:0px; top:320px; float:left; border-left:solid 1px rgba(251,245,246,1.00); opacity:0.5; } .next { font-size: 38px; width:15px; height:50px; position:absolute; right:0px; top:320px; float:right; border-right:solid 1px rgba(245,237,237,1.00); opacity:0.5 }
html代码,代码的结构比较简单,这里解释一下,ul标签是要左右移动的,所以怎么设置position属性?,然后span标签是提供索引和下标控制符,绑定动画的。prev和next类名的div标签是提供左右按钮,电机可以实现左右滑动。
链接的外部css文件,然后请注意一下各种属性和值。电脑端的话,html是相当于文本结构常说的dom,解码的时候配合css属性进行渲染,具体的属性请大家自己测试,在四种常用的浏览器测试一下css属性,我这里就偷懒了没有加上-webkit-,-moz-等等,大家如果需要用可以hack。
在代码中也分为几个部分,让大家清晰明了。其实很简单就是几个参数,几个函数,整个过程就click事件,hover时间,animate方法,setinterval()就可以轻松搞定。