KinSlideshow焦点图切换

来源:https://www.sucaihuo.com/js/137.html 2015-05-31 07:33浏览(1321) 收藏

KinSlideshow自定义幻灯片切换参数效果,兼容IE6及其他主流浏览器,具有丰富的API调用。本文将演示三种不同的幻灯滚动效果。
KinSlideshow焦点图切换
分类:图片代码 > 广告 难易:初级
查看演示 下载资源 下载积分: 20 积分

HTML

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

<div id="KinSlideshow" style="visibility:hidden;padding:20px 0 0">
    <a href="http://www.sucaihuo.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
    <a href="http://www.sucaihuo.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
    <a href="http://www.sucaihuo.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
    <a href="http://www.sucaihuo.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
    <a href="http://www.sucaihuo.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
    <a href="http://www.sucaihuo.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
        }
    });
})
参数 描述 默认值
intervalTime 设置间隔时间【单位:秒】 5
moveSpeedTime 切换一张图片所需时间,【单位:毫秒】 400
moveStyle left:向左切换,right:向右切换,up:向上切换,down:向下切换 left
mouseEvent 鼠标操作按钮事件,可选值:【mouseclick | mouseover】 mouseclick
isHasTitleBar 是否显示标题背景 可选值:【 true | false 】 true
titleBar titleBar:{titleBar_height:40,titleBar_bgColor: -
isHasBtn 是否显示按钮 true

btn

titleFont

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2