最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

KinSlideshow焦点图切换

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-31 07:33浏览(1526)

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

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

KinSlideshow焦点图切换
分类:图片代码 > 广告 难易:初级
查看演示

加我微信,拉你进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
        }
    });
})
参数 描述 默认值
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

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/137.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2