添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 焦点图 >

jQuery100%自适应宽屏左右切换焦点图

时间:2013-11-19      来源:lanrentuku.com     
特效说明:
一款jQuery100%自适应宽屏左右切换焦点图网页特效,自动轮播及点击左按钮左右平滑切换焦点图。鼠标滑过按钮改变样式,当前图片高亮显示,上一张下一张图片透明度降低显示来达到宽屏显示。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、依次引入foucs.css、jQuery脚本库及jquery.foucs.js文件;

2、添加HTML代码:
加入<!--效果html开始-->......<!--效果html结束-->之间的html代码;放在<body></body>之间。

3、可对效果进行三项设置:
direction:图片自动滚动时的方向,默认为'left',即向左滚动,可设为'right'使其向右滚动。例 $.foucs({ direction: 'right' })
animateTime:图片滚动时需要多少毫秒,默认为500,可设为其它数值。例 $.foucs({ animateTime: 1500 })
interval:图片每隔多少毫秒滚动一次,默认为3500,可设为其它数值。例 $.foucs({ interval: 5000 })
注意:请确保 interval 的值大于 animateTime 的值

4、以上三项设置可同时出现,未设置的将使用默认值。例 $.foucs({ animateTime: 1000, direction: 'right' })
相关特效
  • HTML5移动端裁剪图片上传头像代码

    HTML5移动端裁剪图片上传头像代码

    一款HTML5移动端裁剪图片上传头像代码插件下载,该HTML5特效是一款基于jQuery+HTML5实现的图片上传裁剪生成头像特效代码。……
    2016-06-28
  • jQuery鼠标经过显示动画边框特效

    jQuery鼠标经过显示动画边框特效

    一款jQuery鼠标经过显示动画边框特效下载,该JS代码基于jQuery制作的鼠标经过图片、描述文字动画绘制边框特效,适用于图文列表展示代码。……
    2016-06-25
  • jQuery制作苹果秒表计时器代码

    jQuery制作苹果秒表计时器代码

    一款jQuery制作苹果秒表计时器代码下载,该网页特效基于jquery.js制作,可以分次记录时间,参赛计时器插件JS代码。……
    2016-06-19
  • jqbar.js制作柱状动画进度条百分比特效

    jqbar.js制作柱状动画进度条百分比特效

    jqbar.js制作柱状动画进度条百分比网页特效下载,该jQuery插件代码是一款基于jqbar.js实现的柱状图动态显示进度条特效、可以设置横向、纵向柱状图展示。……
    2016-05-22
  • 移动端整屏切换带判断横屏/竖屏状态JS代码

    移动端整屏切换带判断横屏/竖屏状态JS代码

    一款移动端整屏切换带判断横屏/竖屏状态JS代码网页特效,该JS代码带Loading加载动画,且判断设备屏幕横屏还是竖屏状态,鼠标拖动响应式全屏切换网页框架代码。……
    2015-12-09
  • 自定义百度分享URL以及图标样式JS代码

    自定义百度分享URL以及图标样式JS代码

    一款自定义百度分享URL以及图标样式JS代码网页特效,可以应用于响应式网页制作、微信网页制作分享代码。……
    2015-08-21
  • jQuery带视频播器放功能焦点图轮播特效

    jQuery带视频播器放功能焦点图轮播特效

    一款jQuery带视频播器放功能焦点图轮播特效下载,jquery+flash交互式媒体播放器是一款带左右按钮、索引按钮焦点图片点击jwplayer网页视频播放代码下载。……
    2015-08-20
  • 微信网页添加分享到朋友圈、发送好友JS代码

    微信网页添加分享到朋友圈、发送好友JS代码

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何……
    2015-08-19
  • 带动画进度自动播放图片幻灯片

    带动画进度自动播放图片幻灯片

    一款带动画进度自动播放图片幻灯片网页特效,该特效代码是图片正中间带有超大播放/暂停按钮,该按钮为圆形进度酷炫动画特效。……
    2015-03-26
  • jQuery图片标注提示插件

    jQuery图片标注提示插件

    一款jQuery图片标注提示插件网页特效,鼠标滑过提示点弹出层显示文字、连接、图片等信息,产品信息介绍必备网页特效素材。……
    2015-03-26

最新更新特效

设计分享