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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
javascript操作cookie
Jan 17 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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框架Symfony2经典入门教程
2014/07/08 PHP
yii操作cookie实例简介
2014/07/09 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
文员求职信
2014/07/15 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2014企业年终工作总结
2014/12/23 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年中秋寄语
2015/07/31 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
基于docker安装zabbix的详细教程
2022/06/05 Servers