幻灯片效果案例

这个效果在很多的网站上都用到了，可以收藏起来
HTML代码：
复制代码
<div id="kinSlideShow">
        <a href="" target="_blank"><img src="images/1.jpg" class ="photo" alt="images/1.jpg"/></a>
        <a href="" target="_blank"><img src="images/2.jpg" class ="photo" alt="images/2.jpg"/></a>
        <a href="" target="_blank"><img src="images/3.jpg" class ="photo" alt="images/3.jpg"/></a>
        <a href="" target="_blank"><img src="images/4.jpg" class ="photo" alt="images/4.jpg"/></a>
        <a href="" target="_blank"><img src="images/5.jpg" class ="photo" alt="images/5.jpg"/></a>
        <a href="" target="_blank"><img src="images/6.jpg" class ="photo" alt="images/6.jpg"/></a>
    </div>
CSS代码：
复制代码
#kinSlideShow
        {
            visibility:hidden;/*防止页面加载时看到所有的图片*/
        }
        .photo
        {
          width:600px;
          height:300px;    
        }
JS代码：
复制代码
$(document).ready(function() {
            //$("#kinSlideShow").KinSlideshow(); //默认设置效果,默认是向左切换，切换时间间隔为8s,鼠标点击按钮式切换
            //自定义切换参数
            /******************************************************
            $("#kinSlideShow").KinSlideshow({
            moveStyle:"down",//切换样式
            interverTime:8,//切换间隔时间
            mouseEvent:"mouseover",//鼠标事件
            titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}//标题样式
            });
            *******************************************************/
            //自定义外观参数
            /******************************************************
            $("#kinSlideShow").KinSlideshow({
            moveStyle: "right", //切换样式
            interverTime: 8, //切换间隔时间
            titleBar: { titleBar_height: 30, titleBar_bgColor: "#08355c", titleBar_alpha: 0.5 },
            mouseEvent: "mouseover", //鼠标事件
            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}
            });
            *******************************************************/
            //每次打开页面随机选择切换效果
            var moveStyle;
            var rand = parseInt(Math.random() * 4);
            switch (rand) {
                case 0: moveStyle = "left"; break;
                case 1: moveStyle = "right"; break;
                case 2: moveStyle = "up"; break;
                case 3: moveStyle = "down"; break;
            }
            $("#kinSlideShow").KinSlideshow({
                moveStyle:moveStyle,
                interverTime:8
            });
        });