JavaScript

$(function(){
        $("#KinSlideshow").KinSlideshow({
                moveStyle:"down",         //设置切换方向为向下 [默认向左切换]
                intervalTime:8,           //设置间隔时间为8秒  [默认为5秒]
                mouseEvent:"mouseover"        //设置鼠标事件为“鼠标滑过切换”  [默认鼠标点击时切换]
                titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px,颜色:#FF0000
        });
    })

HTML:


<div id="KinSlideshow" style="visibility:hidden;">
      <a href="javascript:void(0)"><img src="data:images/1.jpg" alt="这是标题一" /></a>
      <a href="javascript:void(0)"><img src="data:images/2.jpg" alt="这是标题二" /></a>
      <a href="javascript:void(0)"><img src="data:images/3.jpg" alt="这是标题三" /></a>
      <a href="javascript:void(0)"><img src="data:images/4.jpg" alt="这是标题四" /></a>
      <a href="javascript:void(0)"><img src="data:images/5.jpg" alt="这是标题五" /></a>
      <a href="javascript:void(0)"><img src="data:images/6.jpg" alt="这是标题六" /></a>
  </div>

小提示1: 外层div建议加上一句样式:style="visibility:hidden;" 不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子 这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML 虽然只有不到0.01秒的瞬间但用户体验不太好,所以建议加上。不加对程序也没影响!

小提示2: 想要兼容Chrome需要在img标签中写上图片的实际宽度和高度,其他浏览器不需要。

Jquery焦点图/幻灯片效果 插件 KinSlideshow的更多相关文章

  1. 9种网页Flash焦点图和jQuery焦点图幻灯片

    jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的j ...

  2. 自制jQuery焦点图切换简易插件

    首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery ...

  3. jQuery焦点图切换特效插件封装

    网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频 ...

  4. 简单的Jquery焦点图切换效果

    利用Jquery,优雅的实现焦点图切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  6. 分享8个常用的jQuery焦点图插件

    现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...

  7. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  8. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  9. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

随机推荐

  1. Spring Boot使用JavaMailSender发送邮件

    http://www.cnblogs.com/wxc-xiaohuang/p/9532631.html https://blog.csdn.net/icannotdebug/article/detai ...

  2. USACO 6.4 Wisconsin Squares

    Wisconsin Squares It's spring in Wisconsin and time to move the yearling calves to the yearling past ...

  3. 浅谈jvm

    1 .说起jvm,很多人感觉jvm离我们开发实际很远.但是,我们开发缺每时每刻都离不开jvm. a: java源码 编译后成.class字节码文件, b:根据classpath找到这个字节码文件, c ...

  4. firewalld启动问题

    问题 在查看或启动firewalld服务时,提示"Warning: firewalld.service changed on disk. Run 'systemctl daemon-relo ...

  5. Java 集合之 Collection

    集合就是一组数的集合,就像是一个容器,但是我们应该清楚的是集合中存放的都是对象的引用,而不是真正的实体.而我们常说的集合中的对象其实指的就是对象的引用. 我们可以把集合理解为一个小型数据库,用于存放数 ...

  6. Spring @RequestMapping 注解使用技巧

    @RequestMapping 是 Spring Web 应用程序中最常被用到的注解之一.这个注解会将 HTTP 请求映射到 MVC 和 REST 控制器的处理方法上. 在这篇文章中,你将会看到 @R ...

  7. Android Actionbar Tab 导航模式

    Android Actionbar Tab 下图中,红色矩形圈起来的就是我们 ActionBar Tab,下面我们将一步一步的实现下图中的效果. 初次尝试 package com.example.it ...

  8. 1014 Waiting in Line (30)(30 point(s))

    problem Suppose a bank has N windows open for service. There is a yellow line in front of the window ...

  9. [ 原创 ]学习笔记-Android中隐式Intent 的使用

    Android中Intent的使用分为显示Intent和隐式Intent 之前已经介绍过显示Intent的用法了,今天来介绍一下隐式Intent的用法. 当我们在使用一款软件时,如果需要从该软件内部开 ...

  10. Sass 基础教程

    0. Sass 文件后缀名 sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分 ...