KinSlideshow焦点图切换

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

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