图片
CSS
JS广告
便捷
下载
解答
截图
高清壁纸
后台模板
PS插件
网页特效
Css新闻
推荐代码
页面应用
技术文章
图片展示
广告条
广告代码
软件类
在线工具
常用信息
动画制作
图片处理
辅助小工具
转换软件
其他
软件问题
系统问题
网页问题
常识整理
互联网价值
网站
图标
APP
按钮
公告
2013网站频道新版上线,功能持续完善中……
02.17
更新
mac系统PS数位板没有压感解决方案
01.27
查看windows10系统是否激活
08.31
windows10激活失败,亲测最有效的解决方法
08.31
Mac OS 您需要安装旧 Java SE 6 运行环境才能打开
04.10
Adobe adobeau2017英文转换为中文[汉化方法]
04.01
Mac电脑系统翻墙方法
05.26
最全手机APP中的尺寸规范
05.12
中文WebFont解决方案Font-Spider
09.02
互联网
JS控件
按钮
黑色
灰色
白色
蓝色
绿色
黄色
橙色
>
广告
>
JS焦点图
jquery焦点图,可重复使用焦点图代码
上一篇
下一篇
0
作者:vip_260 来源: 日期:2013/2/17 20:17:25 人气:
标签:
<p><img src="http://img14.poco.cn/mypoco/myphoto/20130217/20/20252181201302172017332111582632621_001.jpg" align="middle" alt="" /></p><p><br /></p><p>jquery常用焦点图[Code]<br /><!DOCTYPE html PUBLIC …
jquery常用焦点图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery常用焦点图,可重复多次使用的jquery代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <h3> jquery常用焦点图,可重复多次使用的jquery代码 </h3> <style type="text/css"> *{margin:0px;padding:0px;} ul,ol{list-style:none;} img{border: 0px;} .demo{width: 600px;height: 300px;position: relative;overflow: hidden;border: #ddd 1px solid;} .num{position: absolute;right: 10px;top: 10px;z-index: 10;} .num a{width: 16px;height: 16px;display:block;text-align: center;margin: 0 3px;cursor: pointer; float:left;} .num a.cur{background: #ff6700;color: #fff;} .demo ul{position: relative;z-index: 5;} .demo ul li{position: absolute;display: none;} </style> <div class="demo"> <div class="num"> <a class="cur">1</a><a>2</a><a>3</a> </div> <ul> <li style="display: block;"><a href="http://www.funet8.com/images-xiee-a-little-wrong.html" target="_blank"> <img src="http://img13.poco.cn/mypoco/myphoto/20120531/23/37946792201205312353192382327532165_000.jpg" /></a></li> <li><a href="http://www.funet8.com/2012-nian-av-top40.html" target="_blank"> <img src="http://funet8.com/wp-content/uploads/2012/05/av.jpg" /></a></li> <li><a href="http://www.funet8.com/japan-beauty-school-uniform-beauty.html" target="_blank"> <img src="http://img170.poco.cn/mypoco/myphoto/20120424/22/37946792201204242244352295570110342_000.jpg" /></a></li> </ul> </div> <script type="text/javascript"> $(function () { var sw = 0; $(".demo .num a").mouseover(function () {//鼠标“mouseover”效果,可以换成“hover” sw = $(".num a").index(this); myShow(sw); }); function myShow(i) { $(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur"); $(".demo ul li").eq(i).stop(true, true).fadeIn(600).siblings("li").fadeOut(600); } //滑入停止动画,滑出开始动画 $(".demo").hover(function () { if (myTime) { clearInterval(myTime); } }, function () { myTime = setInterval(function () { myShow(sw) sw++; if (sw == 3) { sw = 0; } }, 3000); }); //自动开始 var myTime = setInterval(function () { myShow(sw) sw++; if (sw == 3) { sw = 0; } }, 3000); }) </script> <br /> <br /> <hr /> <h2> 提示:如果您没看到效果,请刷新 </h2> <br /> <br /> mouseover和click事件控制,自动切换焦点图jquery代码 <style type="text/css"> .demo1{width: 600px;height: 300px;position: relative;overflow: hidden;border: #ddd 1px solid;} .num1{position: absolute;right: 10px;top: 10px;z-index: 10;} .num1 a{width: 16px;height: 16px;display:block;text-align: center;margin: 0 3px;cursor: pointer; float:left;} .num1 a.cur1{background: #ff6700;color: #fff;} .demo1 ul{position: relative;z-index: 5;} .demo1 ul li{position: absolute;display: none;} </style> <div class="demo1"> <div class="num1"> <a class="cur1">1</a><a>2</a><a>3</a><a>4</a> </div> <ul> <li style="display: block;"><a href="http://www.funet8.com/browser-who-made-chrome-last-and-now.html" target="_blank"> <img src="http://img2081.poco.cn/mypoco/myphoto/20120519/22/37946792201205192230541385353539241_000.jpg" /></a></li> <li><a href="http://www.funet8.com/paly-html5-game-browser.html" target="_blank"> <img src="http://funet8.com/wp-content/uploads/2012/06/html5.jpg" /></a></li> <li><a href="http://www.funet8.com/easy-ie-html5-support.html" target="_blank"> <img src="http://img2081.poco.cn/mypoco/myphoto/20120521/13/3794679220120521131342095.jpg" /></a></li> <li><a href="http://www.funet8.com/paly-html5-game-browser.html" target="_blank"> <img src="http://funet8.com/wp-content/uploads/2012/06/html5.jpg" /></a></li> </ul> </div> <script type="text/javascript"> $(function () { var sw = 0; $(".demo1 .num1 a").click(function () {//鼠标“click”效果 sw = $(".num1 a").index(this); myShow(sw); }); function myShow(i) { $(".demo1 .num1 a").eq(i).addClass("cur1").siblings("a").removeClass("cur1"); $(".demo1 ul li").eq(i).stop(true, true).fadeIn(600).siblings("li").fadeOut(600); } //滑入停止动画,滑出开始动画 $(".demo1").hover(function () { if (myTime) { clearInterval(myTime); } }, function () { myTime = setInterval(function () { myShow(sw) sw++; if (sw == 3) { sw = 0; } }, 3000); }); //自动开始 var myTime = setInterval(function () { myShow(sw) sw++; if (sw == 3) { sw = 0; } }, 3000); }) </script> </body> </html>
提示:复制和保存代码功能在FF下无效。
纯js切换焦点图代码
<style> ul li{list-style:none;} #slide{width:600px; height:300px; overflow:hidden; position:relative; margin:0px auto;} #slide ul#show_pic{ margin:0; padding:0; height:300px; width:3050px; position:absolute;} #slide ul#show_pic li{ float:left;height:300px;} #slide ul#show_pic li img{ display:block;} #icon_num{ position:absolute; bottom:10px; right:10px;} #icon_num li{ float:left; background: #CCCCCC; color: #666666;width:15px; height:15px; text-align:center; cursor:pointer; margin-right:5px; font-size:12px; line-height:15px;} #icon_num li:hover,#icon_num li.active{ background: #FFFFFF;color:#9e0000; font-weight:bold} #slide_top{width:600px; height:300px; position:relative; overflow:hidden;} #slide_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;} #slide_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;} #slide_top ul#show_pic_top li img{ display:block;} #icon_num_top{ position:absolute; bottom:0px; right:10px;} #icon_num_top li{ float:left; width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;} #icon_num_top li:hover,#icon_num_top li.active{ color:#fff;} </style> <div id="slide"> <ul id="show_pic" style="left: 0;"> <li><a href="http://funet8.com" target="_blank"> <img src="http://img13.poco.cn/mypoco/myphoto/20120531/23/37946792201205312353192382327532165_000.jpg" width="600px" height="300px" border="0px" /></a></li> <li><a href="http://funet8.com" target="_blank"> <img src="http://img170.poco.cn/mypoco/myphoto/20120424/22/37946792201204242244352295570110342_000.jpg" width="600px" height="300px" border="0px" /></a></li> <li><a href="http://funet8.com" target="_blank"> <img src="http://funet8.com/wp-content/uploads/2012/06/html5.jpg" width="600px" height="300px" border="0px" /></a></li> </ul> <ul id="icon_num"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> </div> <script type="text/javascript"> // JavaScript Document var glide = new function () { function $id(id) { return document.getElementById(id); }; this.layerGlide = function (auto, oEventCont, oSlider, sSingleSize, second, fSpeed, point) { var oSubLi = $id(oEventCont).getElementsByTagName('li'); var interval, timeout, oslideRange; var time = 1; var speed = fSpeed var sum = oSubLi.length; var a = 0; var delay = second * 1000; var setValLeft = function (s) { return function () { oslideRange = Math.abs(parseInt($id(oSlider).style[point])); $id(oSlider).style[point] = -Math.floor(oslideRange + (parseInt(s * sSingleSize) - oslideRange) * speed) + 'px'; if (oslideRange == [(sSingleSize * s)]) { clearInterval(interval); a = s; } } }; var setValRight = function (s) { return function () { oslideRange = Math.abs(parseInt($id(oSlider).style[point])); $id(oSlider).style[point] = -Math.ceil(oslideRange + (parseInt(s * sSingleSize) - oslideRange) * speed) + 'px'; if (oslideRange == [(sSingleSize * s)]) { clearInterval(interval); a = s; } } } function autoGlide() { for (var c = 0; c < sum; c++) { oSubLi[c].className = ''; }; clearTimeout(interval); if (a == (parseInt(sum) - 1)) { for (var c = 0; c < sum; c++) { oSubLi[c].className = ''; }; a = 0; oSubLi[a].className = "active"; interval = setInterval(setValLeft(a), time); timeout = setTimeout(autoGlide, delay); } else { a++; oSubLi[a].className = "active"; interval = setInterval(setValRight(a), time); timeout = setTimeout(autoGlide, delay); } } if (auto) { timeout = setTimeout(autoGlide, delay); }; for (var i = 0; i < sum; i++) { oSubLi[i].onmouseover = (function (i) { return function () { for (var c = 0; c < sum; c++) { oSubLi[c].className = ''; }; clearTimeout(timeout); clearInterval(interval); oSubLi[i].className = "active"; if (Math.abs(parseInt($id(oSlider).style[point])) > [(sSingleSize * i)]) { interval = setInterval(setValLeft(i), time); this.onmouseout = function () { if (auto) { timeout = setTimeout(autoGlide, delay); }; }; } else if (Math.abs(parseInt($id(oSlider).style[point])) < [(sSingleSize * i)]) { interval = setInterval(setValRight(i), time); this.onmouseout = function () { if (auto) { timeout = setTimeout(autoGlide, delay); }; }; } } })(i) } } } glide.layerGlide(true, 'icon_num', 'show_pic', 600, 2, 0.1, 'left');//设定图片宽度,切换时间,过渡时间和切换模式 </script>
提示:复制和保存代码功能在FF下无效。
加关注
关于我们
帮助中心
意见反馈
设计导航
Copyright 2008
网站频道
All Rights Resverved.
提供:网页特效 JS广告 网站截图 酷站推荐 交流群:3506863
页面执行时间0.0625秒 查询数据库8次