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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue的mixins属性详解
Mar 14 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
PHP排序算法类实例
2015/06/17 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
常用PHP封装分页工具类
2017/01/14 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
服务员自我评价
2014/01/25 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
国庆促销活动总结
2014/08/29 职场文书
活动简报范文
2015/07/22 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python