简易轮播图切换

<div class="run-info">    
<div class="topbtn"><span class="prev iconfont icon-zuohua--"></span><span class="next iconfont icon-youhua-"></span></div>    
<div class="runbox">    
<div class="overimgbox">    
<ul class="runimgbox">    
<li class="runcon show"><div class="leftcon"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/runimg1.png" alt=""/></div></li>    
<li class="runcon"><div class="leftcon"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/runimg2.png" alt=""/></div></li>    
<li class="runcon"><div class="leftcon"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/runimg3.png" alt=""/></div></li>    
<li class="runcon"><div class="leftcon"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/runimg4.png" alt=""/></div></li>      
</ul>    
</div>    
<ul class="titlebox">    
         <li class="show">    
         <p class="bigtitle">一款助你笑对”新高考”轻松选名校的免费应用</p>    
         </li>    
         <li>    
         <p class="blue">高校信息</p>    
         <p class="tip">聚合2600余所高校信息</p>    
         </li>    
     <li>    
         <p class="blue">大学专业 深度解析</p>    
         <p class="tip">近百位知名教授深度解析高校热门专业，助力考生掌握专业内涵，知晓就业前景。</p>    
         </li>    
         <li>    
         <p class="blue">升学途径 全面掌握</p>    
         <p class="tip">重点高校招生负责人视频解读自主招生、艺考等各类招生政策，给与考生官方、权威的升学指导！</p>    
         </li>    
</ul>    
<div class="codebox">    
<div class="code"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/code.jpg" alt=""/></div>    
<div class="btn">    
<p><a href="https://itunes.apple.com/cn/app/id1086459132?mt=8" target="_blank" class="downloadbtn"><i class="iconfont icon-ios"></i>IOS下载</a></p>    
<p><a href="https://apks.eol.cn/releasenew/g_lastest.apk" target="_blank" class="downloadbtn"><i class="iconfont icon-anzhuo"></i>安卓下载</a></p>    
</div>    
</div>    
</div>    
</div>    
<div class="downpoint">    
<ul>    
<li class="active"></li>    
<li></li>    
<li></li>    
<li></li> 
</ul>    
</div>    
</div>

$(function(){    
$('.runcon').eq(0).fadeIn();    
//点点关联    
function point(index){    
$('.downpoint').find('li.active').removeClass('active');    
$('.downpoint').find('li').eq(index).addClass('active');    
}    
//切换    
function tabchange(index){    
$('.runcon.show').removeClass('show');    
$('.runcon').eq(index).addClass('show');    
var num = -(index * 1024 )+'px';    
$('.runimgbox').animate({left:num},401);    
}    
var timeoutflag;    
function tabchange2(index){    
$('.titlebox li.show').removeClass('show').fadeOut();    
var newindex = index;    
clearTimeout(timeoutflag);    
timeoutflag = null;    
timeoutflag=setTimeout(function(){    
$('.titlebox li').eq(newindex).addClass('show').fadeIn();    
},401);    
}    
//右切换效果    
$('.next').on('click',function(event){    
event.preventDefault();    
var index = $('.runcon.show').index();    
index++;    
if(index!=$('.runcon').length){    
tabchange(index);    
tabchange2(index)    
point(index);    
}else{    
//alert('已经是最后一页了');    
}    
});    
//左切换效果    
$('.prev').on('click',function(event){    
event.preventDefault();    
var index = $('.runcon.show').index();    
index--;    
if(index!=-1){    
tabchange(index);    
tabchange2(index)    
point(index);    
}else{    
//alert('已经是第一页了');    
}    
});    
 $('.downpoint').on('click','li',function(){    
 var index = $(this).index();    
 tabchange(index);    
 tabchange2(index);    
 $(this).siblings('.active').removeClass('active');    
 $(this).addClass('active');    
 });    
});

详见网页https://www.eol.cn/e_gx/zhuanti/gaokao/