zoukankan      html  css  js  c++  java
  • 幻灯片效果

    这个效果在很多的网站上都用到了,可以收藏起来

    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
    });

    });
  • 相关阅读:
    Redis主从复制及主从复制的注意事项
    Redis哨兵(Sentinel)
    Redis慢查询日志(slowlog)
    Memcached缓存雪崩现象
    PHP添加Memcached扩展
    Redis节省空间
    Memcached遇到的问题及解决办法
    C++ explicit关键字学习
    力扣:排序之topK||Kth元素的问题
    软聚类
  • 原文地址:https://www.cnblogs.com/caster/p/2269055.html
Copyright © 2011-2022 走看看