<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery可多图不限图片数量焦点图代码 </title>

<link href="css/www.198zone.com.css" type="text/css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script>

(

function(d,D,v){d.fn.responsiveSlides=function(h){var b=d.extend({auto:!0,speed:1E3,timeout:7E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!1,prevText:"Previous",nextText:"Next",maxwidth:"",controls:"",namespace:"rslides",before:function(){},after:function(){}},h);return this.each(function(){v++;var e=d(this),n,p,i,k,l,m=0,f=e.children(),w=f.size(),q=parseFloat(b.speed),x=parseFloat(b.timeout),r=parseFloat(b.maxwidth),c=b.namespace,g=c+v,y=c+"_nav "+g+"_nav",s=c+"_here",j=g+"_on",z=g+"_s",

o=d("<ul class='"+c+"_tabs "+g+"_tabs' />"),A={"float":"left",position:"relative"},E={"float":"none",position:"absolute"},t=function(a){b.before();f.stop().fadeOut(q,function(){d(this).removeClass(j).css(E)}).eq(a).fadeIn(q,function(){d(this).addClass(j).css(A);b.after();m=a})};b.random&&(f.sort(function(){return Math.round(Math.random())-0.5}),e.empty().append(f));f.each(function(a){this.id=z+a});e.addClass(c+" "+g);h&&h.maxwidth&&e.css("max-width",r);f.hide().eq(0).addClass(j).css(A).show();if(1<

f.size()){if(x<q+100)return;if(b.pager){var u=[];f.each(function(a){a=a+1;u=u+("<li><a href='#' class='"+z+a+"'>"+a+"</a></li>")});o.append(u);l=o.find("a");h.controls?d(b.controls).append(o):e.after(o);n=function(a){l.closest("li").removeClass(s).eq(a).addClass(s)}}b.auto&&(p=function(){k=setInterval(function(){var a=m+1<w?m+1:0;b.pager&&n(a);t(a)},x)},p());i=function(){if(b.auto){clearInterval(k);p()}};b.pause&&e.hover(function(){clearInterval(k)},function(){i()});b.pager&&(l.bind("click",function(a){a.preventDefault();

b.pauseControls||i();a=l.index(this);if(!(m===a||d("."+j+":animated").length)){n(a);t(a)}}).eq(0).closest("li").addClass(s),b.pauseControls&&l.hover(function(){clearInterval(k)},function(){i()}));if(b.nav){c="<a href='javascript:' class='"+y+" prev'>"+b.prevText+"</a><a href='javascript:' class='"+y+" next'>"+b.nextText+"</a>";h.controls?d(b.controls).append(c):e.after(c);var c=d("."+g+"_nav"),B=d("."+g+"_nav.prev");c.bind("click",function(a){a.preventDefault();if(!d("."+j+":animated").length){var c=f.index(d("."+j)),

a=c-1,c=c+1<w?m+1:0;t(d(this)[0]===B[0]?a:c);b.pager&&n(d(this)[0]===B[0]?a:c);b.pauseControls||i()}});b.pauseControls&&c.hover(function(){clearInterval(k)},function(){i()})}}if("undefined"===typeof document.body.style.maxWidth&&h.maxwidth){var C=function(){e.css("width","100%");e.width()>r&&e.css("width",r)};C();d(D).bind("resize",function(){C()})}})}})(jQuery,this,0);

$(function() {

    $(".f426x240").responsiveSlides({

        auto: true,

        pager: true,

        nav: true,

        speed: 700

    });

    $(".f160x160").responsiveSlides({

        auto: true,

        pager: true,

        speed: 700

    });

});

</script>

<style>

body{font-family:verdana,arial,tahoma;font-size:12px;color:#333}

img{border:0}

.new_banner{width:985px;height:393px;border:1px solid #E1E1E1;position:relative; margin:0 auto; padding:9px; background:url(../images/loading.gif) no-repeat center center #fff;}

.rslides{width:100%;position:relative;list-style:none;padding:0}

.rslides_nav{ width:36px; height:36px; background-image:url(../images/banner_new.png); display:block; position:absolute;  text-indent:-10em; overflow:hidden;}

.prev{ background-position:0 0;left:-40px; top:180px;}

.prev:hover{ background-position:0 -36px;}

.next{ background-position:-36px 0;right:-40px; top:180px;}

.next:hover{ background-position:-36px -36px;}

.rslides_tabs{ position:absolute; left:450px; top:370px;clear:both;text-align:center; z-index:99999;}

.rslides_tabs li{display:inline;float:none;_float:left;*float:left;margin-right:5px}

.rslides_tabs a{ width:12px; height:12px; background:#fff;text-indent:-5em; overflow:hidden; display:block; float:left; margin-left:6px;border-radius:6px;}

.rslides_tabs .rslides_here a{ background:#D968C0;}

</style>

</head>

<body>

<div class="new_banner">

    <ul class="rslides f426x240">

        <li><a href="javascript:"><img src="data:images/01.jpg" width="985" height="393" /></a></li>

        <li><a href="javascript:"><img src="data:images/02.jpg" width="985" height="393" /></a></li>

        <li><a href="javascript:"><img src="data:images/03.jpg" width="985" height="393" /></a></li>

        <li><a href="javascript:"><img src="data:images/04.jpg" width="985" height="393" /></a></li>

        <li><a href="javascript:"><img src="data:images/05.jpg" width="985" height="393" /></a></li>

    </ul>

</div>

</body>

</html>

jquery不限图片焦点图的更多相关文章

  1. jQuery全屏图片焦点图

    在线演示 本地下载

  2. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  3. 基于jQuery的轮播焦点图图

    轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...

  4. 一款基于jQuery的全屏广告图片焦点图

    之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览   源码下载 实现 ...

  5. jQuery自动轮播图片焦点图

    在线演示 本地下载

  6. jQuery全屏动画焦点图

    效果:http://hovertree.com/texiao/jqimg/3/ 本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改. 全部版本jQuery下载:h ...

  7. jQuery插件Skippr实现焦点图

    史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调 ...

  8. jQuery鼠标滑动切换焦点图

    在线演示 本地下载

  9. jQuery垂直滑动切换焦点图

    在线演示 本地下载

随机推荐

  1. window.open() 使用详解

    Window_Open详解    引:Window_Open详解一.window.open()支持环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二. ...

  2. js基础——cssText

    以前,只知道设置css里的属性都是通过  元素.style.属性名 = 属性值  的方式,此时经常遇到的情况就是类似这样: var head= document.getElementById(&quo ...

  3. EC读书笔记系列之5：条款9、条款10

    条款9 绝不在构造和析构过程中调用virtual函数 记住: ★在构造和析构期间不要调用virtual函数,∵这类调用从不下降至derived class ---------------------- ...

  4. Tomcat启动失败的解决方法

    在使用Tomcat的时候,经常会遇到启动失败的问题:解决方法:1.检查环境变量的配置,jdk的配置2.检查端口是否被占用. 关于环境变量的配置很容易搜到,如果按照网上的教程配置好了,但是还是启动失败的 ...

  5. 关于 MyBatis MyBatis-Spring Jdbc 批量插入的各种比较分析

    因为目前SME项目中编写了一套蜘蛛爬虫程序,所以导致插入数据库的数据量剧增.就项目中使用到的3种DB插入方式进行了一个Demo分析: 具体代码如下: 1: MyBatis 开启Batch方式,最普通的 ...

  6. C语言如何定义结构体

    原文地址 1. struct与typedef struct区别 struct是结构体的关键字,用来声明结构体变量如 struct  student {   char  num[10];      ch ...

  7. 走进C标准库(3)——"stdio.h"中的getc和ungetc

    接前文. 再来看看getc和ungetc的实现.在看这两个函数的实现之前,我们先来想一想这两个函数分别需要做的工作. int getc(FILE *stream) 说明:函数getc从stream指向 ...

  8. MVC3 带查询的分页Helper

    接上篇mvc3 分页Helper. 带查询的分页Helper是在上一篇分页的基础上来的.下面看代码: 首先,在System.Web.Mvc命名空间下的自定义类HtmlPage下面添加一个用于处理“查询 ...

  9. 【Chromium中文文档】Web安全研究

    转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Extension_Sec ...

  10. matlab 相关性分析

    Pearson相关系数 考察两个事物(在数据里我们称之为变量)之间的相关程度,简单来说就是衡量两个数据集合是否在一条线上面.其计算公式为: 或或 N表示变量取值的个数. 相关系数r的值介于–1与+1之 ...