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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="素材网,网页吧网,网页吧,经典素材,经典素材网,素材站,素材网,网页素材"/>
<meta name="description" content="jQuery仿迅雷,图片轮播切换经典素材网,最新;最全;最经典的素材地带!"/>
<title>jQuery仿迅雷,图片轮播切换效果-经典素材网{网页吧} </title>
<style type="text/css">
body{background:#000;}
h1 { color:#fff; margin: 5px 5px;}
*{font-size:12px; font-family:Verdana;margin:0;padding:0; color:#fff; }
#play img {border:0px}
#play {width:346px;height:214px;overflow:hidden;margin: 0 auto; border: 1px solid #fff; padding:4px;}
#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;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;display:block;color:#FFF;text-align:center;margin:1px;cursor:pointer;font-family:"微软雅黑"; font-size:9px;}
#play_list a{display:block;width:346px;height:191px;position:absolute;overflow:hidden}
</style>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

</head>

<body>
<br />

<br />
<div id="play"> 
<h1>jQuery仿迅雷,图片轮播切换效果-经典素材网{网页吧}</h1>
 <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="#" target="_blank">
  <img src="imgs/1.jpg" title="" alt="&lt;b&gt;相恋9年&lt;/b&gt;尔冬升再婚娶相恋9年女友" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/2.jpg" title="" alt="&lt;b&gt;恋情变贤&lt;/b&gt;周海媚公开6年恋情变贤妇" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/3.jpg" title="" alt="&lt;b&gt;为啥这么&lt;/b&gt;“熊猫”阿宝为啥这么红？" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/4.jpg" title="" alt="&lt;b&gt;男友被捕&lt;/b&gt;安妮-海瑟薇前男友被捕" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/5.jpg" title="" alt="&lt;b&gt;开价一亿&lt;/b&gt;天后王菲“复出”开价一亿" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/6.jpg" title="" alt="&lt;b&gt;赞郑伊健&lt;/b&gt;阿Sa赞郑伊健“保存”得好" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/7.jpg" title="" alt="&lt;b&gt;死跑龙套&lt;/b&gt;北影演员：甘当‘死跑龙套的’" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/8.jpg" title="" alt="&lt;b&gt;潘玮柏死&lt;/b&gt;潘玮柏死盯辣妹脱衣解带" />
 </a>
 <a href="#" target="_blank">
  <img src="imgs/9.jpg" title="" alt="&lt;b&gt;张曼玉分&lt;/b&gt;尔冬升深爱张曼玉分手发呆" />
 </a>
 </div>
</div>
<script type="text/javascript">
var t = n = 0, count = $("#play_list a").size();
$(function(){ 
 $("#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;
 $("#play_text li").eq(n).trigger('click');
}
</script>

</body>
</html>

jQuery仿迅雷图片轮换效果的更多相关文章

  1. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  2. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  3. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  4. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  5. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  6. JavaScript仿百度图片浏览效果（转载）

    转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...

  7. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  9. Jquery插件开发之图片放大镜效果(仿淘宝)

    原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...

随机推荐

  1. 洛谷 P1217 [USACO1.5]回文质数 Prime Palindromes【取回文数/数论/字符串】

    题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,000 ...

  2. js的DOM节点操作：创建 ，插入，删除，复制，查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  3. vue学习之组件(component)(二)

    自定义事件 父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 1. 使用 v-on 绑定自定义事件 每个vue实例都实现了事件接口 ...

  4. uni-app官方教程学习手记

    本人微信公众号:前端修炼之路,欢迎关注 背景介绍 大概在今年的十月份左右,我了解到Dcloud推出了uni-app.当时下载了一个Hbuilder X,下载了官方提供的hello示例教程.经过一番努力 ...

  5. text-align:justify在项目中碰到的问题

    最近在项目中,使用了一个新的样式属性:text-align:justigy,这个属性在使用过程中遇到了一些小异常,现在总结下.  text-align有一个属性值为justify,为对齐之意.其实现的 ...

  6. 深入理解 Node.js 进程与线程

    原文链接: https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651557398&idx=1&sn=1fb991da ...

  7. Directx11教程(32) 纹理映射(2)

    原文:Directx11教程(32) 纹理映射(2)     在写代码之前,我们先制作一个dds文件.从网上找到了一张照片,处理成为512*512,保存为jpg格式.     启动微软的directx ...

  8. sed 命令用法

    Sed:对文件进行编辑操作,对象是行.操作后在屏幕输出结果.如果要直接修改则加-i命令-f filename: 执行某文件内的sed命令-n 只显示被修改的那一行 如文件test内容:Letyou a ...

  9. Hdu 2522 hash

    题目链接 题意:输入整数n (1<= abs(n) <= 10^5) , 输出 1/n． 这题不是自己做出来的．．．看了网上的思路．这种题目都能想到用hash..反正我是没往那里想,看到循 ...

  10. Dom4j(Dom for Java) Day24

    TestDomForJava.java package com.sxt.dom4j; import java.io.File; import java.util.Iterator; import ja ...