基于jquery编写的横向自适应幻灯片切换特效的实例代码
<script type="text/javascript">
jQuery(".fullSlide").hover(function() {
jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
autoPage: true,
trigger: "click",
startFun: function(i) {
var curLi = jQuery(".fullSlide .bd li").eq(i);
if ( !! curLi.attr("_src")) {
curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
}
}
});
</script>
效果图如下:
相关推荐
-
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度.easing:动画效果.navigation:false是否出现导航,还支持事件Callback函数调用,onLeave.afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12.以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用. 使用方法
-
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
基于Jquery实现的一个图片滚动切换
首先还是要引用jquery框架的. 然后开始HTML代码: 复制代码 代码如下: <div id="New_zlMimgMv"> <div class="imgMvBox"> <ul id="imgMvCon"> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt
-
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['
-
基于jQuery全屏焦点图左右切换插件responsiveslides
基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览 源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,
-
一个基于jquery的图片切换效果
下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht
-
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
demo01.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht
-
基于Jquery的简单图片切换效果
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip
-
jQuery 一个图片切换的插件
以下是参数说明: 参数名称 描述 delay 图片切换速度,单位毫秒 maskOpacity 遮罩层透明度,1为不透明,0为全透明 numOpacity 数字按钮透明度,1为不透明,0为全透明 maskBgColor 遮罩层背景色 textColor 标题字体颜色 numColor 数字按钮字体颜色 numBgColor 数字按钮背景色 alterColor 数字按钮选中项字体颜色 alterBgColor 数字按钮选中项背景颜色插件代码及调用 - 插件名
-
jquery横向纵向鼠标滚轮全屏切换
本文实例为大家分享了鼠标滚轮全屏切换的jquery代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name
随机推荐
- 再谈javascript 动态添加样式规则 W3C校检
- Spring boot集成Mybatis的方法教程
- Java 大小写最快转换方式实例代码
- 在Python程序中进行文件读取和写入操作的教程
- android 设置全屏的两种方法
- 深入Android中BroadcastReceiver的两种注册方式(静态和动态)详解
- Android中使用HTTP服务的用法详解
- Bootstrap源码解读下拉菜单(4)
- golang实现简单的udp协议服务端与客户端示例
- SQL Server创建维护计划失败(SQL Server:14234 错误)的解决方法
- Android中使用Gson解析JSON数据的两种方法
- 利用谷歌地图API获取点与点的距离的js代码
- PHP从二维数组得到N层分类树的实现代码
- php一些公用函数的集合
- 基于jQuery和CSS3实现APPLE TV海报视差效果
- Ubuntu16.04.4LTS安装mininet遇到的问题及解决方案
- PHP 数组黑名单/白名单实例代码详解
- Vue实现日历小插件
- python 标准差计算的实现(std)
- SpringBoot框架RESTful接口设置跨域允许