基于jQuery全屏焦点图左右切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头，索引按钮的自动轮播切换特效下载。

效果图如下：

在线预览    源码下载

html代码：

<script type="text/javascript">
$(function () {
 // Slideshow
 $("#slider").responsiveSlides({
  auto: true,
  pager: false,
  nav: true,
  speed: 500,
  timeout:4000,
  pager: true,
  pauseControls: true,
  namespace: "callbacks"
 });
});
</script>
</head>
<body>
<!-- Slideshow -->
<div class="callbacks_container">
 <ul class="rslides" id="slider">
  <li><a href="http://sc.chinaz.com/"><img src="images/1.jpg" alt=""></a></li>
  <li><a href="http://sc.chinaz.com/"><img src="images/2.jpg" alt=""></a></li>
  <li><a href="http://sc.chinaz.com/"><img src="images/1.jpg" alt=""></a></li>
  <li><a href="http://sc.chinaz.com/"><img src="images/2.jpg" alt=""></a></li>
 </ul>
</div>
</body>
赞 (0)

相关推荐

  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度.easing:动画效果.navigation:false是否出现导航,还支持事件Callback函数调用,onLeave.afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12.以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用. 使用方法

  • 一个基于jquery的图片切换效果

    一个基于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的简单图片切换效果

    复制代码 代码如下: <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实现的一个图片滚动切换

    首先还是要引用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横向纵向鼠标滚轮全屏切换

    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

  • jQuery 一个图片切换的插件

    jQuery 一个图片切换的插件

    以下是参数说明:  参数名称  描述  delay  图片切换速度,单位毫秒  maskOpacity  遮罩层透明度,1为不透明,0为全透明  numOpacity  数字按钮透明度,1为不透明,0为全透明  maskBgColor  遮罩层背景色  textColor  标题字体颜色  numColor  数字按钮字体颜色  numBgColor  数字按钮背景色  alterColor  数字按钮选中项字体颜色  alterBgColor  数字按钮选中项背景颜色插件代码及调用 - 插件名

  • 基于jquery编写的横向自适应幻灯片切换特效的实例代码

    基于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&q

  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    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实现仿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

随机推荐