KinSlideshow焦点图切换

KinSlideshow自定义幻灯片切换参数效果，兼容IE6及其他主流浏览器，具有丰富的API调用。本文将演示三种不同的幻灯滚动效果。

淘建站为您提供更多_图片代码_广告_焦点图_幻灯片，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们在#KinSlideshow里放置多张切换的焦点图：

<div id="KinSlideshow" style="visibility:hidden;padding:20px 0 0">
    <a href="http://www.sucaiq.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
    <a href="http://www.sucaiq.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
    <a href="http://www.sucaiq.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
    <a href="http://www.sucaiq.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
    <a href="http://www.sucaiq.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
    <a href="http://www.sucaiq.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" width="600" height="300" /></a>
</div>

演示一：默认效果

$(function() {
    $("#KinSlideshow").KinSlideshow();
})

演示二：自定义切换参数

$("#KinSlideshow").KinSlideshow({
    moveStyle: "down",
    intervalTime: 8,
    mouseEvent: "mouseover",
    titleFont: {
        TitleFont_size: 14,
        TitleFont_color: "#FF0000"
    }
});

演示三：自定义外观参数

$(function() {
    $("#KinSlideshow").KinSlideshow({
        moveStyle: "right",
        titleBar: {
            titleBar_height: 30,
            titleBar_bgColor: "#08355c",
            titleBar_alpha: 0.5
        },
        titleFont: {
            TitleFont_size: 12,
            TitleFont_color: "#FFFFFF",
            TitleFont_weight: "normal"
        },
        btn: {
            btn_bgColor: "#FFFFFF",
            btn_bgHoverColor: "#1072aa",
            btn_fontColor: "#000000",
            btn_fontHoverColor: "#FFFFFF",
            btn_borderColor: "#cccccc",
            btn_borderHoverColor: "#1188c0",
            btn_borderWidth: 1
        }
    });
})