HTML

首先我们放置轮播图片，和点击的标题：

<div id="scroll_area" class="imgfocus"> 
   <div id="bigimg_area" class="imgbox"> 
    <div class="bigimg"> 
     <a href="https://jy.tp.yuanmeng.life/"> <img src="images/1.jpg" /> </a> 
    </div> 
    <div class="bigimg"> 
     <a href="https://jy.tp.yuanmeng.life/"> <img src="images/2.jpg" /> </a> 
    </div> 
    <div class="bigimg"> 
     <a href="https://jy.tp.yuanmeng.life/"> <img src="images/3.jpg" /> </a> 
    </div> 
    <div class="bigimg"> 
     <a href="https://jy.tp.yuanmeng.life/"> <img src="images/4.jpg" /> </a> 
    </div> 
   </div> 
   <ul id="tabs" class="num_a2"> 
    <li><a href="javascript:void(0)" hidefocus="true" target="_self">杨幂</a></li> 
    <li><a href="javascript:void(0)" hidefocus="true" target="_self">范冰冰</a></li> 
    <li><a href="javascript:void(0)" hidefocus="true" target="_self">高圆圆</a></li> 
    <li><a href="javascript:void(0)" hidefocus="true" target="_self">刘诗诗</a></li> 
   </ul> 
</div>

jQuery

koala插件调用：

Qfast.add('widgets', {
    path: "js/terminator2.2.min.js",
    type: "js",
    requires: ['fx']
});
Qfast(false, 'widgets',
function() {
    K.tabs({
        id: 'scroll_area',//焦点图包裹id  
        conId: "bigimg_area",//大图域包裹id  
        tabId: "tabs",//小圆点数字提示id
        tabTn: "a",
        conCn: '.bigimg',//大图域配置class       
        auto: 1,//自动播放 1或0
        effect: 'fade',//效果配置
        eType: 'mouseover',// 鼠标事件
        pageBt: true, //是否有按钮切换页码
        bns: ['.prev', '.next'],//前后按钮配置class                          
        interval: 3000 // 停顿时间  
    })
})