SOURCE

var i=0;
var timer=null,timer2=null;
var ul=document.getElementsByTagName('ul')[0];
function show(i){
   ul.childNodes[i].style.opacity=1;
  getsiblings(ul.childNodes[i]).forEach(function(ele){
    ele.style.opacity=0;
  });

}
function interval(){
  timer=setInterval(function(){
      i=(i+1)%3;
  		show(i);
},1000)
  }
interval();

function getsiblings(elm){
  var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}
function left(){
  clearInterval(timer);
  i--;
  if(i==-1){i=2;}
  show(i);
  interval();
}

function turn(){
  var l=0;
  var ul2=document.getElementsByTagName('ul')[1];
  tmier2=setInterval(function(){
    l+=10;
    if(l>600){
      l=0;
    }
    ul2.style.marginLeft=-l+'px';
  },100)
}
turn();

<ul class='ul1'><li><img src="http://ok47spofd.bkt.clouddn.com/pic1.jpg"/>
  </li><li><img src="http://ok47spofd.bkt.clouddn.com/pic2.jpg"/>
  </li><li><img src="http://ok47spofd.bkt.clouddn.com/pic3.jpg"/></li>
  </ul>
<a href='javascript:left()'>left</a>
<div id='turn'>
<ul class='ul2'><li><img src="http://ok47spofd.bkt.clouddn.com/pic1.jpg"/>
  </li><li><img src="http://ok47spofd.bkt.clouddn.com/pic2.jpg"/>
  </li><li><img src="http://ok47spofd.bkt.clouddn.com/pic3.jpg"/></li><li><img src="http://ok47spofd.bkt.clouddn.com/pic1.jpg"/>
  </li><li><img src="http://ok47spofd.bkt.clouddn.com/pic2.jpg"/>
  </li><li><img src="http://ok47spofd.bkt.clouddn.com/pic3.jpg"/></li>
  </ul>

img{
  width:200px;
  height:200px;
}
.ul1 img{
  position:absolute;

}
ul{
  list-style-type:none;
}
li{
    transition:all 1s;
}
.ul2{
  margin:200px 0 0 0;
  width:1200px;
  height:200px;
  padding:0;
}
.ul2 li{
  margin:0;
  padding:0;
  width:200px;
  height:200px;
  float:left;
}
#turn{
  width:600px;
  overflow:hidden;
}