对于很多建站的朋友来讲，焦点图并不陌生，一般的企业站，门户站都会用到焦点图。我们平时在写html代码的时候，很多人为了省时省力，对于焦点图都是在网上下载一些人家写好的代码，直接套上去即可，很多时候我自己也是这样来的。因为一个焦点图有html布局，css样式调试和最关键的 javascript语句的编写。这些都是一个很麻烦的过程。

今天我就以实例讲解，手把手教你如何写Jquery焦点图。Jquery是js封装的框架，让js的语法变得简单，很多知名网站都在用这个框架。这里星仔为了语法的简单，让大部分网友能看懂，也引用Jquery框架。

长话短说，我直接贴出源代码，和对应的注释。如果想要体验效果可以点击文章后而给的示例连接。

代码开始------

<!DOCTYPE html>

<html>

<head>

<title>focus code powered by boyxing.com</title>

<script type="text/javascript" src="http://www.boyxing.com/skin/default/js/jquery.js"></script& gt;<!--引用Jquery框架-->

<!--css定义，可以根据需要自己定义-->

<style type="text/css">

body,ul,li{ margin:0; padding:0}

ul,li{ list-style:none;}

.focus{ margin:0 auto; height:320px; width:980px; overflow:hidden; position:relative; padding:0;}

.focus .bigpic{ position:absolute;padding:0;}

.focus .bigpic li{ width:980px;float:left;padding:0;}

.focus .btn{ overflow:hidden; height:30px;position:absolute; bottom:3px; left:50%; margin-left:-100px;}

.focus .btn li{ float:left; margin:0 10px; padding:5px; cursor:pointer; background: #fff;border:1px #900 solid;border-radius:12px; height:12px; width:12px; overflow:hidden; text-align:center; line-height:12px;opacity:0.6; float:left;}

.focus .btn li.on{ background: #990000; color:#FFFFFF;}

</style>

</head>

<body>

<!--焦点图div部分开始-->

<div class="focus">

<div class="focuscon">

<ul class="bigpic">

<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/fbc60c3991284b6ffdb0aa11a1708c41.jpg" border="0"></a></li>

<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/3d41450340fe053008f8437011b7bcf5.jpg" border="0"></a></li>

<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/c9a787ef199d47bdb3529bbdecfc989c.jpg" border="0"></a></li>

<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/2471eddde718c56879171814c8a52153.jpg" border="0"></a></li><!--焦点图个数不限-->

</ul>

</div>

</div>

<!--焦点图div部分结束-->

</body>

<script type="text/javascript">

$(document).ready(function(){

var num=$(".bigpic li").length;//获取焦点图的个数

var fwidth=$(".bigpic li").width();//获取每个焦点图的宽度

var sec=4000;//时间切换间隔

var btn = '<ul class="btn"><li class="on">1</li>';

var btnend = '</ul>';

for(i=2;i<=num;i++){btn += '<li>'+i+'</li>';};

btn += btnend;

if(num == 1){btn = null};

$(".focus").append(btn);//自动根据焦点图个数，添加切换按钮，如果只有一张图片则不显示切换按钮。

$(".bigpic").css("width",fwidth*num);//设定大图集合的宽度，也就是所有焦点图宽度的和。

$(".btn li").bind("mouseover",function(){

$(this).addClass("on").siblings().removeClass("on");

var i=$(".btn li").index(this);var marginL=fwidth*i;

$(".bigpic").animate({"left":-marginL},500);}

);//鼠标指向按钮，焦点图切换到对应位置，按钮样式改变。mouseover是鼠标经过时，这里也可以改成click，通过点击切换焦点图。

picTimer = setInterval(timeset,sec); //指定sec毫秒后执行一次timeset函数。

function timeset(){

var j = $(".btn li").index($(".on"));//取得 当前焦点图的位置，即class为on的序号。

var timew = fwidth*(j+1);

if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":0},500);}

else{$(".btn li").eq(j+1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":-timew},500);};

};

$(".focus").mouseover(function(){clearInterval(picTimer);});

$(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}

);//当鼠标指向焦点图或者是切换按钮时，定时器清除，即不在执行自动切换，鼠标离开则恢复自动切换。

})

</script>

</html>

------代码结束-------

本文出自：http://www.boyxing.com/article/136.html

Jquery焦点图实例的更多相关文章

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

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

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

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

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

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

  4. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

  5. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  6. 西山居首页jQuery焦点图代码

    西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style ...

  7. 超酷实用的jQuery焦点图赏析及源码

    焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery ...

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

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

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

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

随机推荐

  1. 关于Linux下进程间使用共享内存和信号量通信的时的编译问题

    今天在编译一个使用信号量实现进程同步时,出现了库函数不存在的问题.如下图 编译结果实际上是说,没include相应的头文件,或是头文件不存在(即系统不支持该库函数) 但我man shm_open是可以 ...

  2. Windows远程桌面连接如何直接使用剪贴板功能

    连接到Windows Server服务器时,通常使用远程桌面连接,那么如果有些时候按照习惯复制本地文件到远程服务器发现无法粘贴怎么办,这个时候稍微设置一下就OK了, 首先重新运行远程桌面连接,在登陆界 ...

  3. web开发中目录路径问题的解决

    web开发当中,目录路径的书写是再常用不过了,一般情况下不会出什么问题,但是有些时候出现了问题却一直感到奇怪,所以这里记录一下,彻底解决web开发中路径的问题,开发分为前端和服务端,那么就从这两个方面 ...

  4. codeforces 468A. 24 Game 解题报告

    题目链接:http://codeforces.com/problemset/problem/468/A 题目意思:给出一个数n,利用 1 - n 这 n 个数,每个数只能用一次,能否通过3种运算: + ...

  5. ubuntu dpkg 命令详解

    linux的包管理有多种,除了rpm,apt等还有优秀的dpkg,下面是dpkg命令的详细使用教程,希望对你有用.deb包的管理是比较优秀的包管理工具,用的linux系统有 debian ubuntu ...

  6. js简单上传进度条

    效果如下:

  7. 说说localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  8. Android之网络编程

    本文主要包括三方面内容 Httpurlconnection中doGet与doPost方法实现提交数据到服务器 HttpClient中doGet与doPost方法实现提交数据到服务器 android-a ...

  9. Solr学习笔记（一）

    最近准备为一个产品做一个站内的搜索引擎,是一个java产品.由于原来做过Lucene.net,所以自然而然的就想到了使用Lucene.在复习Lucene的过程中发现了Solr这个和Lucene绑定在一 ...

  10. Java vararg(动态参数)的应用

    可变参数在JDK 1.5添加,刚才知道的. 以下来自<Java泛型和集合>一书. 将参数打包成一个数组传入方法中是一件让人讨厌的事,在jdk1.5中加入了一个新的功能称为vararg(动态 ...