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="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_artifice_images/1.jpg"   /></a>
	    <p> class="title">美国称将绕过联合国安理会自行惩罚叙利亚</p>

        </div>
        
        <div>
            <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_artifice_images/2.jpg"   /></a>
	    <p> class="title">西安军工企业夫妻藏匿国家机密资料被判刑</p>

        </div>

        <div>
            <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_artifice_images/3.jpg"   /></a>
	    <p> class="title">首都机场爆炸案嫌犯冀中星涉爆炸罪被公诉</p>

        </div>

        <div>
            <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_artifice_images/4.jpg"   /></a>
	    <p> class="title">美国摄影师离火山口仅1米处拍最完美喷发照</p>

        </div>

        <div>
            <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_artifice_images/5.jpg"   /></a>
	    <p> class="title">地方官员为跑批文驻北京 在部委端茶扫地打开水</p>

        </div>

        <div>
            <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_artifice_images/6.jpg"   /></a>
	    <p> class="title">经济年度人物评选启动 主题转型升级智慧与行动</p>

        </div>		
            
    </div>

</div>

CSS样式
<style type="text/css">
     /* 设置焦点图父级宽度 */    
    #show{width:600px; margin:0 auto;}
    #kinMaxShow{display:none;}
     /* 设置焦点图标题位置、样式等。标题位置、样式完全可以自定义哦 */    	
    #kinMaxShow p.title{ position:absolute; left:0; bottom:0; text-indent:10px; line-height:30px;font-family:Verdana; color:#FFF; display:block;width:100%; height:30px; font-family:14px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#aa000000,endcolorstr=#aa000000);background:rgba(0,0,0,0.5);}
	

</style>