实现原理:
- 技术栈:
javascript+jQuery+html+css
- 实现步骤:
// 0. 获取元素
// 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏
// 2. 为两侧控制按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转)
实现代码
<!DOCTYPE html>
<html>
<head>
<title>旋转木马效果轮播图</title>
<meta charset=
"utf-8"
>
<style type=
"text/css"
>
*{
padding: 0;
margin: 0;
}
body{
font: 12px/1.5
"微软雅黑"
;
background-color:
#2f2f2f;
}
a{
text-decoration: none;
outline: none;
cursor: pointer;
}
.warp{
width: 1000px;
margin: 10px auto;
border: 1px solid red;
}
.slide{
height: 200px;
margin: 150px auto;
position: relative;
}
.slide li{
position: absolute;
left: 200px;
top: 0;
}
.slide li img{
width: 100%;
border: 0;
vertical-align: top;