- 浏览: 108359 次
- 性别:
- 来自: 江西
文章分类
最新评论
-
antsshadow:
如何在IE6、IE7、IE8中使用HTML5 canvas -
fei_6666:
请问 $('#livemargins_contro' ).bg ...
jquery.bgiframe.js解决下拉列表框被遮盖(iE 6下存在的情况) -
geliyang:
function(value,element)这里的value ...
Jquery Validator 的addMethod用法備忘
用jQuery实现迅雷首页(http://xunlei.com/)FLASH 轮换的效果.
先看效果吧: http://www.koyoz.com/demo/html/autoplay_xunlei/play.html
特点:
- 与迅雷首页FLASH动画相似度达到99%
- 不使用FLASH, 完全由javascript实现控制
- 完美的图片渐变过渡效果(为兼容浏览器,未使用IE强大滤镜)
- 完整的控制逻辑,自动轮播,图片不足9张自动跳过,亦支持鼠标手动切换等
- 多浏览器兼容,IE6+,FireFox1.5+,Opera8.5+,Safari暂时未测试,相信问题不大
- HTML与javascript 代码分离,有易于SEO, 代码更清晰, 更容易控制.
代码片段(HTML结构部分):
XML/HTML代码
- <div id="play">
- <div id="play_bg"></div>
- <div id="play_info"></div>
- <div id="play_text">
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- <li>9</li>
- </ul>
- </div>
- <div id="play_list">
- <a href="http://koyoz.com/1.jpg" target="_blank">
- <img src="./imgs/1.jpg" title="" alt="<b>相恋9年</b>尔冬升再婚娶相恋9年女友" />
- </a>
- <a href="http://koyoz.com/2.jpg" target="_blank">
- <img src="./imgs/2.jpg" title="" alt="<b>恋情变贤</b>周海媚公开6年恋情变贤妇" />
- </a>
- <a href="http://koyoz.com/3.jpg" target="_blank">
- <img src="./imgs/3.jpg" title="" alt="<b>为啥这么</b>“熊猫”阿宝为啥这么红?" />
- </a>
- <a href="http://koyoz.com/4.jpg" target="_blank">
- <img src="./imgs/4.jpg" title="" alt="<b>男友被捕</b>安妮-海瑟薇前男友被捕" />
- </a>
- <a href="http://koyoz.com/5.jpg" target="_blank">
- <img src="./imgs/5.jpg" title="" alt="<b>开价一亿</b>天后王菲“复出”开价一亿" />
- </a>
- <a href="http://koyoz.com/6.jpg" target="_blank">
- <img src="./imgs/6.jpg" title="" alt="<b>赞郑伊健</b>阿Sa赞郑伊健“保存”得好" />
- </a>
- <a href="http://koyoz.com/7.jpg" target="_blank">
- <img src="./imgs/7.jpg" title="" alt="<b>死跑龙套</b>北影演员:甘当‘死跑龙套的’" />
- </a>
- <a href="http://koyoz.com/8.jpg" target="_blank">
- <img src="./imgs/8.jpg" title="" alt="<b>潘玮柏死</b>潘玮柏死盯辣妹脱衣解带" />
- </a>
- <a href="http://koyoz.com/9.jpg" target="_blank">
- <img src="./imgs/9.jpg" title="" alt="<b>张曼玉分</b>尔冬升深爱张曼玉分手发呆" />
- </a>
- </div>
- </div>
代码片段(JS实现部分):
JavaScript代码
- <script type="text/javascript">
- var t = n = count = 0;
- $(function(){
- count = $("#play_list a").size();
- $("#play_list a:not(:first-child)").hide();
- $("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
- $("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
- $("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")});
- $("#play_text li").click(function() {
- var i = $(this).text() - 1;
- n = i;
- if (i >= count) return;
- $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
- $("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")})
- $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
- $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
- });
- t = setInterval("showAuto()", 2000);
- $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
- })
- function showAuto()
- {
- n = n >= (count - 1) ? 0 : n + 1;
- $("#play_text li").eq(n).trigger('click');
- }
- </script>
代码片段(CSS渲染部分):
CSS代码
- <style type="text/css">
- *{font-size:12px; font-family:Verdana;margin:0;padding:0}
- #play img {border:0px}
- #play {width:346px;height:191px;overflow:hidden;margin:50px 0 0 50px;}
- #play_info{position:absolute;margin-top:141px;padding:8px 0 0 20px;height:42px;width:270px;color:#fff;z-index:1001;cursor:pointer}
- #play_info b{font-size:14px;display:block}
- #play_bg {position:absolute;background-color:#000;margin-top:141px;height:50px;width:346px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}
- #play_text {position:absolute;margin:141px 0 0 296px;height:50px;width:60px;z-index:1002}
- #play_text ul {list-style-type:none; width:60px;height:50px;display:block;padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}
- #play_text ul li {width:14px;height:14px;float:left;background-color:#000;display:block;color:#FFF;text-align:center;margin:1px;cursor:pointer;font-family:"Courier New";}
- #play_list a{display:block;width:346px;height:191px;position:absolute;overflow:hidden}
- </style>
发表评论
-
在js文件中显示jquery的智能提示VS2010
2012-05-25 15:30 0///<reference path="jqu ... -
关于浏览器内核的一些概念
2011-12-14 11:37 834什么是浏览器内核 要想搞清楚浏览器内核是什么, ... -
将手机网站做成手机应用的JS框架
2011-11-30 14:26 937将手机网站做成手机应用的JS框架 发表于 2010年09月1日 ... -
jquery实现无缝图片滚动
2011-10-24 13:58 919<!DOCTYPE HTML> <html& ... -
JS变量的作用域
2011-10-18 14:53 740JavaScript中变量的作用域非常奇特,如果不仔细研究,一 ... -
图片延迟加载之随滚动条显示
2011-10-18 14:38 1415经常上tudou网,发现tudou首页加载图片的功能很有意思, ... -
jquery实现tab选项卡
2011-09-08 10:36 1103<section class="recomme ... -
常用JS代码大全
2011-09-07 18:42 2122事件源对象 event.srcElement ... -
jquery实现自定义select表单
2011-09-06 19:09 886<!DOCTYPE html PUBLIC " ... -
jquery实现图片幻灯片切换代码
2011-09-01 19:20 631<!DOCTYPE html PUBLIC " ... -
js控制图片自动等比例缩放
2011-08-29 16:17 852function imgfix(){ var maxw ... -
json返回数组的处理。
2011-08-16 12:28 1283后台返回json的格式为“{'name':'woe','age ... -
50个jQuery代码段帮你成为更好的JavaScript开发者
2011-08-16 12:26 11011. 如何创建嵌套的过滤器: -
javascript基础知识大集锦(2)
2011-08-15 12:44 633本期主题:正则表达式 call(),apply(),calle ... -
javascript基础知识大集锦(1)
2011-08-15 12:42 770主要知识点:js数组,数字函数,字符串函数,表单验证,hash ... -
用 Javascript 实现检测、添加、移除样式(className)
2011-08-12 16:36 901前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时 ... -
iframe自适应高度
2011-08-08 17:45 665父页: <script type="text ... -
jQuery插件通用的框架
2011-06-07 12:05 852/* * tableUI 0.1 * ... -
jQuery图片切换,轮播效果
2011-05-26 18:06 2551<!DOCTYPE html PUBLIC " ... -
(function($){}) 和$(function(){}) 和$(function($){}) 区别
2011-04-18 15:51 891一、先看 jQuery(function(){ } ...
相关推荐
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
代码简介:jQuery图片相册轮播切换代码,功能强大,兼容性好,支持全屏轮播效果。
JQuery代码实现图片切换轮播效果源码免费下载
Jquery图片切换插件制作3种常用网站图片轮播切换效果代码
jquery图片轮播切换效果代码
jQuery百叶窗图片切换轮播效果代码基于allinone_thumbnailsBanner.js、jquery.min.js和jquery-ui.min.js制作,带进度条,进度条走完图片自动播放下张图片,大图附带文字显示,带左右播放按钮。
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
1、jq+swiper轮播图 2、支持下方小图切换 3、支持左右箭头切换
简单的jquery层叠图片滚动轮播切换效果代码
基于jQuery carousel图片叠加旋转木马轮播切换效果,只要引入就可以 使用非常简单,基于jQuery carousel图片叠加旋转木马轮播切换效果,只要引入就可以 使用非常简单,
jquery焦点图片轮播滚动
jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码。
一款支持多达12种特效,22个自定义参数的多种切换效果jQuery焦点图片轮播插件,网页幻灯片自动切换特效。
一款支持左右按钮控制的jQuery图片循环轮播代码,还带缩略图,焦点图无限循环左右滚动切换效果。
最好看的jquery 图片轮播图片切换特效,不管你信不信,反正我是信了。
jQuery手机图片全屏滑动轮播效果代码是一款基于jquery.event.drag-1.5.min.js、 jquery.touchSlider.js和jquery-1.7.1.min.js等插件制作的图片轮播特效代码,兼容PC端和手机移动端,全屏宽屏 显示,支持鼠标点击切换...
jQuery图片分页切换效果代码基于jPages.js和jquery-1.8.3.min.js制作,点击页码进行图片切换。
一款支持多达12种特效,22个自定义参数的多种切换效果jQuery焦点图片轮播插件,网页幻灯片自动切换特效。 <title>多种切换效果jQuery焦点图片轮播插件</title> <!--[if lt IE 9]>[removed]...