Jquery焦点图实例代码

网络编程 2024/10/6 佚名

2 0 1

金狮镖局 Design By www.egabc.com

本文实例讲述了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="/UploadFiles/2021-04-02/jquery.js"> 
<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 class="focus">
<div class="focuscon">
    <ul class="bigpic">
      <li><a href="#"><img src="/UploadFiles/2021-04-02/fbc60c3991284b6ffdb0aa11a1708c41.jpg">       <li><a href="#"><img src="3d41450340fe053008f8437011b7bcf5.jpg">       <li><a href="#"><img src="c9a787ef199d47bdb3529bbdecfc989c.jpg">       <li><a href="#"><img src="2471eddde718c56879171814c8a52153.jpg">     </ul>
</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程序设计有所帮助。

Jquery,焦点图

标签：

Jquery,焦点图

金狮镖局 Design By www.egabc.com

金狮镖局 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

金狮镖局 Design By www.egabc.com

评论“Jquery焦点图实例代码”

暂无Jquery焦点图实例代码的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年10月06日

Jquery焦点图实例代码

Jquery,焦点图

jquery中push()的用法(数组添加元素)

jQuery事件绑定和委托实例

评论“Jquery焦点图实例代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接