Html
    Css
    Js

    
                        
@charset "utf-8";
	/* 	@功能:重设浏览器默认样式 */
/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;
	padding:0;
}
/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
	font:12px/1.5 "微软雅黑";
}
input,select,textarea {
	font-size:100%;
}
/* 去掉各Table  cell 的边距并让其边重合 */
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* IE bug fixed:th 不继承 text-align*/
th {
	text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
	border:0;
}
/* ie6 7 8(q) bug 显示为行内表现 */ {
	display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
	border:0;
	font-variant:normal;
}
/* 一致的 del 样式 */
del {
	text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:500;
}
/* 去掉列表前的标识,li 会继承 */
ol,ul {
	list-style:none;
}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th {
	text-align:left;
}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:500;
}
q:before,q:after {
	content:'';
}
/* 统一上标和下标 */
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sup {
	top:-0.5em;
}
sub {
	bottom:-0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
	text-decoration:underline;
}
/* 默认不显示下划线,保持页面简洁 */
ins,a {
	text-decoration:none;
}
/* 清理浮动 */
.fn-clear:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.fn-clear {
	zoom:1;
	/* for IE6 IE7 */
}
#box29Main {
	width:800px;
	height:234px;
	margin:0 auto;
	position:relative;
}
#box29Main li {
	position:absolute;
	left:200px;
	top:0;
}
#box29Main li img {
	width:100%;
	height:100%;
}
#box29Main .box29-clt {
	opacity:0;
}
#box29Main .box29-clt-prev {
	position:absolute;
	top:50%;
	left:20px;
	margin-top:-36px;
	width:72px;
	height:72px;
	line-height:72px;
	cursor:pointer;
	font-size:70px;
	color:#80848f;
	text-align:center;
	z-index:10;
}
#box29Main .box29-clt-next {
	position:absolute;
	top:50%;
	right:20px;
	margin-top:-36px;
	width:72px;
	height:72px;
	line-height:72px;
	font-size:70px;
	color:#80848f;
	text-align:center;
	cursor:pointer;
	z-index:10;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生JS旋转轮播图

1、获取需要的标签

2、鼠标移入盒子显示左右箭头

3、利用数组方法完成左右切换

0