太平洋女性网焦点图的几种写法

1、有控制按钮并且自己写控制div的
<script language="javascript">
var tocs = pc.getElems('#focuspic li');
window.focusPic = new pc.tab({
 target: tocs,
 control: false,
 type: 'click',
 stay:10000,
 autoPlay:true,
 effect: 'fade',
 playTo : tocs.length -1
}); 
focusPic.next();
</script>
其实还有几个参数
effect: 'fade',
onchange: function(){
    var to = this.curPage && this.curPage - 1; //保持当前选项卡前有元素可点击
    tab0102.playTo(to);
}
2、如果焦点图还带左右翻动的箭头

<<span class="start-tag">a href="javascript:focusPic.prev()" onmouseover="focusPic.stop()" onmouseout="focusPic.play()" target="_self" class="prev" id="JPrev"><<span class="start-tag">span></<span class="end-tag">span><<span class="start-tag">i></<span class="end-tag">i></<span class="end-tag">a>
<<span class="start-tag">a href="javascript:focusPic.next()" onmouseover="focusPic.stop()" onmouseout="focusPic.play()" target="_self" class="next" id="JNext"><<span class="start-tag">span></<span class="end-tag">span><<span class="start-tag">i></<span class="end-tag">i></<span class="end-tag">a>
focusPic.next();
//下面这个函数大家可以看到是寻找i，让i滑动一定距离，其实实用性不强，主要是演示下pc框架的动画使用方法。 

var _prev = pc.getElem('#JPrev'),
_next = pc.getElem('#JNext');
pc.addEvent(_prev,'mouseenter',function(){
animateHover(this,1,50)
})
pc.addEvent(_prev,'mouseleave',function(){
animateHover(this,1,20)
})
pc.addEvent(_next,'mouseenter',function(){
animateHover(this,2,50);
})
pc.addEvent(_next,'mouseleave',function(){
animateHover(this,2,20)
})
function animateHover(obj,direct,m){
var _i = pc.getElems('i',obj)[0];
pc.end(_i);
if(direct == 1){
pc.animate(_i,{right : m},'swing',250);
}else{
pc.animate(_i,{left : m},'swing',250);
}
}



PC的切换效果开放了几个函数manSlide.play()，一个manSlide.stop()，一个javascript:manSlide.next()，一个javascript:manSlide.prev()，可以作为控制器来直接调用，不过有个条件就是我们要把new pc.tab.scroll赋值给window.manSlide变量，而不是直接用new pc.tab.scroll这样就无法用stop了

3、PC的页卡切换也很简单

用的pc.tab，而pc的焦点图用的pc.tab.scroll方法注意差别

new pc.tab({


target: pc.getElems('#links_con .contentdiv'),


control:  pc.getElems('#lumpTab .control .toc')


});

其实pc.tab也有一些常用参数
target: pc.getElems('#focusPic .slide li')

control:  pc.getElems('#focusPic .control li')

effect: 'base'

autoPlay:true

stay:3500

lazy:true

看到没，这个页卡切换也可以实现自动播放的。并且pc框架的效率还可以

4、关于onchange方法
pc的onchange方法开放出来用于用户自定义切换的效果的，如下则实现了给页卡加cur，而不是current的类

onchange: function() {
var c = this.curPage;
pc.each(tabThumbs, function(ele, inx){
if(inx == c) {
pc.addClass(ele, 'cur');
} else {
pc.removeClass(ele, 'cur');
}
});