Jquery焦点图实例代码


Posted in Javascript onNovember 25, 2014

本文实例讲述了Jquery焦点图实例代码。分享给大家供大家参考。具体如下:

对于很多建站的朋友来讲,焦点图并不陌生,一般的企业站,门户站都会用到焦点图。我们平时在写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="js/jquery.js"></script><!--引用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="#"><img src="fbc60c3991284b6ffdb0aa11a1708c41.jpg" border="0"></a></li>

      <li><a href="#"><img src="3d41450340fe053008f8437011b7bcf5.jpg" border="0"></a></li>

      <li><a href="#"><img src="c9a787ef199d47bdb3529bbdecfc989c.jpg" border="0"></a></li>

      <li><a href="#"><img src="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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
redux.js详解及基本使用
May 24 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
jQuery事件绑定和委托实例
Nov 25 #Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 #Javascript
JS跨域问题详解
Nov 25 #Javascript
javascript 中__proto__和prototype详解
Nov 25 #Javascript
js 加密压缩出现bug解决方案
Nov 25 #Javascript
js Object2String方便查看js对象内容
Nov 24 #Javascript
js的[defer]和[async]属性
Nov 24 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
react路由配置方式详解
2017/08/07 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python类型转换的魔术方法详解
2020/12/23 Python
python 批量将中文名转换为拼音
2021/02/07 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
校园之声广播稿
2014/01/31 职场文书
小学老师寄语大全
2014/04/04 职场文书
保护环境建议书100字
2014/05/13 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android