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面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Vue计算属性的使用
Aug 04 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
pygame实现打字游戏
2021/02/19 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Django之腾讯云短信的实现
2020/06/12 Python
python2和python3哪个使用率高
2020/06/23 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
上党课的心得体会
2014/09/02 职场文书
2014年药房工作总结
2014/11/22 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js