kinMaxShow 技巧效果演示

kinMaxShow 说是全屏焦点图插件(满屏自适应)，但是通过一定技巧设置就可以变成一个可控制的焦点图。kinMaxShow宽度默认是自适应100%比例。这时只要给他加个父级 并且控制了父级的宽度 这样kinMaxShow就会变成一个普通定宽的焦点图了。 如上例中， 代码如下：

javascript 代码

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.kinMaxShow-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	
    $("#kinMaxShow").kinMaxShow({
	//设置焦点图高度(单位:像素) 必须设置 否则使用默认值 500    
        height:300,
	//设置焦点图 按钮效果
        button:{
	    //设置焦点图切换方式为mouseover 鼠标经过按钮切换图片, 默认为 click， 可选 click[鼠标点击切换]或mouseover[鼠标滑过切换]        
            switchEvent:'mouseover',
	    //设置显示 索引数字  true 显示， 默认为 false 不显示            
            showIndex:true,
            //按钮常规下 样式设置 ，css写法，类似jQuery的 $('xxx').css({key:value,……})中css写法。            
            //【友情提示：可以设置透明度哦 不用区分浏览器 统一为 opacity，CSS3属性也支持哦 如：设置按钮圆角、投影等，只不过IE8及以下不支持】            
            normal:{width:'18px',height:'18px',lineHeight:'18px',left:'16px',bottom:'16px',fontSize:'12px',opacity:0.8,background:"#666666",border:"1px solid #999999",color:"#CCCCCC",marginRight:'6px'},
            //当前焦点图按钮样式 设置，写法同上            
            focus:{background:"#CC0000",border:"1px solid #FF0000",color:"#000000"}
            }			
    });


});

</script>


HTML 代码

<!--这是焦点图父级容器 设置他的宽度即可控制焦点图宽度-->
<div id="show">

     <!--焦点图HTML 结构-->
    <div id="kinMaxShow">
    
        <div>
            <a href="http://www.qq.com" target="_blank"><img src="images/demo_artifice_images/1.jpg"   /></a>
        </div>
        
        <div>
            <a href="http://www.qq.com" target="_blank"><img src="images/demo_artifice_images/2.jpg"  /></a>
        </div>
        
        <div>
            <a href="http://www.qq.com" target="_blank"><img src="images/demo_artifice_images/3.jpg"   /></a>
        </div>
        
        <div>
            <a href="http://www.qq.com" target="_blank"><img src="images/demo_artifice_images/4.jpg"   /></a>
        </div>

        <div>
            <a href="http://www.qq.com" target="_blank"><img src="images/demo_artifice_images/5.jpg"   /></a>
        </div>

        <div>
            <a href="http://www.qq.com" target="_blank"><img src="images/demo_artifice_images/6.jpg"   /></a>
        </div>		
            
    </div>

</div>

CSS样式

<style type="text/css">
     /* 设置焦点图父级宽度 */    
    #show{width:600px; margin:0 auto;}
    #kinMaxShow{display:none;}

</style>