console
<body>
<div class="wrapper">
<div class="mobile">
<input type="checkbox" id="tm" name="radiotex"/>
<input type="checkbox" id="tm2" name="radiotex"/>
<input type="checkbox" id="tm4" name="radiotex"/>
<div class="left-side">
<ul class="sidenav left-nav">
<li><a href="#"><i class="fa fa-home"></i><b>nav1</b></a></li>
<li><a href="#"><i class="fa fa-inbox"></i><b>nav2</b></a></li>
<li><a href="#"><i class="fa fa-plus-square-o"></i><b>nav3</b></a></li>
<li><a href="#"><i class="fa fa-book"></i><b>nav4</b></a></li>
<li><a href="#"><i class="fa fa-star"></i><b>nav5</b></a></li>
</ul>
</div>
<label class="label-search" for="tm4"><i class="fa fa-search"></i>Search</label>
<div class="right-side">
<ul class="sidenav right-nav">
<li><a href="#"><i class="fa fa-users"></i><b>right1</b></a></li>
<li><a href="#"><i class="fa fa-bell-o"></i><b>right2</b></a></li>
<li><a href="#"><i class="fa fa-pencil"></i><b>right3</b></a></li>
<li><a href="#"><i class="fa fa-bookmark"></i><b>right4</b></a></li>
<li><a href="#"><i class="fa fa-cog"></i><b>right5</b></a></li>
</ul>
</div>
<div class="main">
<div class="content">
<div class="header">
<label for="tm" class="label-left"><i class="fa fa-bars"></i></label>
<input type="checkbox" id="tm3"/>
<label for="tm3" class="label-logo">首页<i class="fa fa-angle-down"></i></label>
<div class="top-nav">
<ul>
<li><a href=""><i class="fa fa-bars"></i>编辑栏目分类</a></li>
<li><a href=""><i class="fa fa-bars"></i>编辑栏目分类</a></li>
<li><a href=""><i class="fa fa-bars"></i>编辑栏目分类</a></li>
</ul>
</div>
<label for="tm2" class="label-right"><i class="fa fa-user"></i></label>
</div>
<div class="list">
<div id="flash">
<ul id="pic">
<li style="display:block">
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fgzupf7r16j311y0lcq3u.jpg" alt="">
</li>
<li>
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fgzuqlrletj311y0lcqaa.jpg" alt="">
</li>
<li>
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fgzuqg7lbnj311y0lcjww.jpg" alt="">
</li>
<li>
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fgzur394zvj311y0lcdlb.jpg" alt="">
</li>
<li>
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fgzurhjtmfj311y0lcgvz.jpg" alt="">
</li>
<li>
<img src="http://ww1.sinaimg.cn/mw690/006qf0pNgy1fgzur6jxo3j311y0lcq92.jpg" alt="">
</li>
</ul>
<ol id="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<a href="javascript:;" id="left"><</a>
<a href="javascript:;" id="right">></a>
</div>
<div class="word">
<ul>
<li>
<a href="#"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgzuoufzzvj315o1p61b1.jpg" class="thumb-img"></a>
<a href="#">
<div class="entry-cont">
<h2>
这是标题
</h2>
<p>
这是正文
</p>
<div class="entry-meta">
<span class="muted"><i class="fa fa-comments-o">6</i></span>
</div>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgzuoufzzvj315o1p61b1.jpg" class="thumb-img"></a>
<a href="#">
<div class="entry-cont">
<h2>
这是标题
</h2>
<p>
这是正文
</p>
<div class="entry-meta">
<span class="muted"><i class="fa fa-comments-o">6</i></span>
</div>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgzuoufzzvj315o1p61b1.jpg" class="thumb-img"></a>
<a href="#">
<div class="entry-cont">
<h2>
这是标题
</h2>
<p>
这是正文
</p>
<div class="entry-meta">
<span class="muted"><i class="fa fa-comments-o">6</i></span>
</div>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://ww1.sinaimg.cn/large/006qf0pNgy1fgzuoufzzvj315o1p61b1.jpg" class="thumb-img"></a>
<a href="#">
<div class="entry-cont">
<h2>
这是标题
</h2>
<p>
这是正文
</p>
<div class="entry-meta">
<span class="muted"><i class="fa fa-comments-o">6</i></span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function $(id) {
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var index=0;
var timer=null;
var pic=$("pic").getElementsByTagName("li");
var num=$("num").getElementsByTagName("li");
var flash=$("flash");
var left=$("left");
var right=$("right");
left.onclick=function(){
index--;
if (index<0) {
index=num.length-1
};
changeOption(index);
}
right.onclick=function(){
index++;
if (index>=num.length) {
index=0
};
changeOption(index);
}
flash.onmouseover=function(){
clearInterval(timer);
}
flash.onmouseout=function(){
timer=setInterval(run,2000)
}
for(var i=0;i<num.length;i++){
num[i].id=i;
num[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
}
timer=setInterval(run,2000)
function run(){
index++;
if (index>=num.length) {
index=0
};
changeOption(index);
}
function changeOption(curindex){
console.log(index)
for(var j=0;j<num.length;j++){
pic[j].style.display="none";
num[j].className="";
}
pic[curindex].style.display="block";
num[curindex].className="active";
index=curindex;
}
}
</script>
</body>
body{font:14px/1.8 arial; margin:0; padding:0; max-width:1024px; margin:0 auto 20px;}
.wrapper{
width:100%;
height:100%;
}
ul,li,p,h1,section,label,a,input,div,span,h2,h3{margin:0; padding:0;}
ul li{list-style:none;}
a{text-decoration: none; color:#333;}
a:hover{text-decoration: none;}
img{max-width:100%; height:auto; border:0;}
.mobile{overflow: hidden; -webkit-box-shadow: 0 0 24px rgba(0,0,0,0.5); box-shadow: 0 0 24px rgba(0,0,0,0.5); position: relative; height:100%;}
#tm, #tm2,#tm3,#tm4{display: none;}
.left-side{position: absolute; left:0; top:0; bottom:0; padding-top:50px; width:150px; background: rgba(50,60,60,.8);}
.sidenav li {list-style-type: none;}
.sidenav a { color: white; text-decoration: none; }
.sidenav b {
font: bold 12px/48px Arial; display: block;
opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); -webkit-transition: all 0.4s; transition: all 0.4s;
}
.right-side .sidenav b{-webkit-transform:translateX(-50px);-ms-transform:translateX(-50px);transform:translateX(-50px);}
.sidenav i {
display: block; width: 50px; float: left;
font-size: 16px; line-height: 48px; text-align: center;
}
.right-side{position: absolute; right:0; top:0; bottom: 0; padding-top:50px; width:150px; background: rgb(50,60,60);}
.main{
position: relative;
width:100%;
background: #fff;
-webkit-transition:all .25s;
transition:all .25s;
min-height:300px;
}
.content{}
.header{position:relative;background: #FB4700; color:#fff; text-align: center; height:52px; z-index:2;}
.label-logo{font-size:22px; line-height:32px; cursor:pointer; display:block; padding-top:4px;}
.label-logo i{display:block; line-height:12px;-webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:all .3s; transition:all .3s}
.label-left, .label-right{position: absolute; left:10px; top:8px; cursor: pointer; border:1px solid #fff; border-radius:20px; padding:5px 5px; width:20px; height:20px; line-height:20px; font-size:18px;}
.label-right{left:auto; right:10px;}
#tm:checked ~ .main{-webkit-transform:translateX(150px);-ms-transform:translateX(150px);transform:translateX(150px);}
#tm:checked ~ .left-side li b {opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
#tm:checked ~ .left-side li:nth-child(1) b {-webkit-transition-delay: 0.08s;transition-delay: 0.08s;}
#tm:checked ~ .left-side li:nth-child(2) b {-webkit-transition-delay: 0.16s;transition-delay: 0.16s;}
#tm:checked ~ .left-side li:nth-child(3) b {-webkit-transition-delay: 0.24s;transition-delay: 0.24s;}
#tm:checked ~ .left-side li:nth-child(4) b {-webkit-transition-delay: 0.32s;transition-delay: 0.32s;}
#tm:checked ~ .left-side li:nth-child(5) b {-webkit-transition-delay: 0.40s;transition-delay: 0.40s;}
#tm:checked .left-side li:nth-child(6) b {-webkit-transition-delay: 0.48s;transition-delay: 0.48s;}
#tm2:checked ~ .main{-webkit-transform:translateX(-150px);-ms-transform:translateX(-150px);transform:translateX(-150px);}
#tm2:checked ~ .right-side .sidenav li b{opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);}
#tm2:checked ~ .right-side li:nth-child(1) b {-webkit-transition-delay: 0.08s;transition-delay: 0.08s;}
#tm2:checked ~ .right-side li:nth-child(2) b {-webkit-transition-delay: 0.16s;transition-delay: 0.16s;}
#tm2:checked ~ .right-side li:nth-child(3) b {-webkit-transition-delay: 0.24s;transition-delay: 0.24s;}
#tm2:checked ~ .right-side li:nth-child(4) b {-webkit-transition-delay: 0.32s;transition-delay: 0.32s;}
#tm2:checked ~ .right-side li:nth-child(5) b {-webkit-transition-delay: 0.40s;transition-delay: 0.40s;}
#tm2:checked ~ .right-side li:nth-child(6) b {-webkit-transition-delay: 0.48s;transition-delay: 0.48s;}
.list{background:#E9E9E9;}
.list li{padding:10px 0; border-bottom:1px solid #ddd; margin-left:10px; zoom:1;}
.list li:before, .list li:after{display:table; content:"";}
.list li:after{clear:both;}
.thumb-img{float:left; margin-right:20px;max-width:150px;max-height:150px;}
.entry-cont{overflow:hidden;}
.entry-cont h2{font-size:20px;}
.entry-meta{float:right;}
.top-nav{display:none; position:absolute; top:100%; left:0; right:0; background:rgba(0,0,0,0.3); width:100%;}
.top-nav ul{font-size:0; *word-spacing:-1px; padding:6px 4px 4px;}
.top-nav li{display:inline-block; *display:inline; *zoom:1; vertical-align:top; letter-spacing:normal; word-spacing:normal; font-size:14px; width:20%; text-align:center;}
@media screen and (-webkit-min-device-pixel-ratio:0){
.top-nav ul{letter-spacing:-5px;}
}
.top-nav li a{color:#fff; padding:0 4px; display:block;}
.top-nav li i{display:block; padding:4px; border:1px solid #fff; border-radius:15px; width:15px; height:15px; margin:0 auto 4px;}
#tm3:checked ~ .top-nav{display:block;}
#tm3:checked ~ .label-logo i{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.search{display:none;}
.label-search{position:absolute; top:20px; left:10px; color:#fff; border-bottom:1px solid #fff; display:block; width:128px; font-size:14px; line-height:1.4; cursor:pointer}
.label-search i{float:right; opacity:.6; font-weight:normal; padding-right:10px;}
.search-form{background:rgba(0,0,0,0.1); padding:10px; position:relative;}
.search-text{border:1px solid #ddd; padding:3px 6px; height:24px; width:88%; box-sizing:border-box; border-radius:8px;}
.search-btn{position:absolute; right:10px; top:10px; width:10%; min-width:44px;}
.close-left .main{-webkit-transform:translateX(0px);-ms-transform:translateX(0px);transform:translateX(0px);}
#tm4:checked ~ .main .list{display:none;z-index:1;}
#tm4:checked ~ .main .search{display:block;z-index:1;}
.word{position:relative;margin-top:2%;}
li{list-style:none;}
#flash{width:100%;height:auto;min-height:300px;margin:10px auto;position: relative;cursor: pointer;margin-bottom:1px;}
#pic li{position: absolte;top: 0;left: 0;display: none;min-height:300px;width:98%;}
#pic li img{max-height:500px;min-height:300px;width:1024px;}
#num{position:absolute;left: 40%;bottom:10%;cursor:default;margin-bottom:1%;}
#num li{float: left;width: 20px;height: 20px;border-radius: 50%;margin:10px auto;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;padding:0;}
#num li.active{background: #f00;}
.arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;background-color: rgba(0,0,0,0.3);z-index: 3;display: none;}
.arrow:hover{background: rgba(0,0,0,0.7);}
#flash:hover .arrow{display: block;}
#left{left: 2%;}
#right{right: 2%;}