jQuery仿迅雷图片轮换效果

最新推荐文章于 2021-05-31 18:13:19 发布
最新推荐文章于 2021-05-31 18:13:19 发布
阅读量129 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/wangxiaoy/p/10812743.html
版权

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>

转载于:https://www.cnblogs.com/wangxiaoy/p/10812743.html

weixin_33681778
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【jQuery】前端项目实践案例4——制作图片轮换效果（修改图像的src属性值）
王迪
12-10 1577
通过设置图像的 src 属性，显示不同的图片，借助循环动画实现轮播图效果。
jquery仿迅雷官方网站全屏响应式轮播图动画特效
12-11
这是一款jquery来制作的仿迅雷官方网站全屏响应式轮播图动画特效。该轮播图特效简单实用，效果时尚大方，且可以兼容ie8浏览器。
css jquery 实现图片轮换带效果，点击图片可跳网页
leigelg的博客
03-02 1374
复制代码，更改图片就可使用，需要更改div大小修改 #focus的css样式，修改图片大小更改img样式
图片轮换效果
11-20
function ou(){slideit()} var whichlink=0 var whichimage=0 function gotoshow(){ window.open(slidelinks[whichlink]); } function slideit(){ document.images.slide.style.filter=filterArray[whichimage]; //alert(document.images.slide.style.filter); pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0 //alert(pixeldelay); if (!document.images) return if (ie55) { document.images.slide.filters[0].apply(); document.images.slide.filters[0].play(); } document.images.slide.src=imageholder[whichimage].src document.getElementById("textslide").innerText=slidetext[whichimage]; document.getElementById("xiaosan1").src=slidesanjiaoimages[0]; document.getElementById("xiaosan2").src=slidesanjiaoimages[0]; document.getElementById("xiaosan3").src=slidesanjiaoimages[0]; document.getElementById("xiaosan4").src=slidesanjiaoimages[0]; document.getElementById("xiaosan5").src=slidesanjiaoimages[0]; document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1]; if (ie55) document.images.slide.filters[0].play() whichlink=whichimage whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0 setID=setTimeout("slideit()",slidespeed+pixeldelay) } slideit() function ove(n){ clearTimeout(setID) whichimage=n; document.images.slide.src=imageholder[whichimage].src document.getElementById("textslide").innerText=slidetext[whichimage]; document.getElementById("xiaosan1").src=slidesanjiaoimages[0]; document.getElementById("xiaosan2").src=slidesanjiaoimages[0]; document.getElementById("xiaosan3").src=slidesanjiaoimages[0]; document.getElementById("xiaosan4").src=slidesanjiaoimages[0]; document.getElementById("xiaosan5").src=slidesanjiaoimages[0]; document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1]; }
jquery 图片轮换效果
12-01
【jQuery 图片轮换效果详解】 在Web开发中，经常需要实现图片轮换的效果来吸引用户的注意力或展示一系列相关的图片。jQuery作为一个强大的JavaScript库，提供了简单易用的API，使得实现这种效果变得轻松。本篇文章...
Jquery 实现图片轮换
10-24
在网页设计中，图片轮换是一种...通过合理利用JQuery提供的API，我们可以创建出高效且易于维护的图片轮换效果。尽管这个示例中存在一些兼容性问题，但它提供了一个基础的实现框架，开发者可以根据需求进行优化和扩展。
JQuery分屏指示器图片轮换效果实例
10-24
主要介绍了JQuery分屏指示器图片轮换效果实现方法,实例分析了jQuery图片轮播操作的相关技巧,需要的朋友可以参考下
图片轮换特效
宋发元
04-10 788
如上图： 　　1、图片自动依次轮换，每轮换到一张图片，下面对应的小图标出现红色边框，并显示对应的图片名称 　　2、鼠标放到大图片上面的时，图片停止轮换，一直显示当前图片；鼠标移开后图片继续轮换 　　3、鼠标移到小图标上时，大图片区域会显示对应的大图；鼠标移开则从当前图片开始继续轮换 带小图标的JS图片轮换 *{
特效 jQuery 仿迅雷图片轮播切换效果
03-04
jQuery 仿迅雷图片轮播切换效果，跟flash比起来，省事多了 ^_^
全屏带动画、触摸效果的jquery图片轮播插件
08-25
此作品是一款效果非常简洁大气的Jquery插件，实现了全屏带动画、触摸效果的jquery图片轮播插件。 支持以下功能： 1、带文字标题 2、文字描述 3、详情链接 4、图片轮播 5、动画效果（包括：图片放大、图片旋转、图片淡入浅出、图片上下左右移出） 6、左右控制按钮 7、状态小图标控制按钮 8、鼠标触摸切换 注意：想要看到动画效果请使用主流的支持css3的浏览器，如谷歌、火狐等。
jQuery网站首页响应式图片轮播特效
10-08
jQuery网站首页响应式图片轮播特效　
jQuery响应式左右全屏图片轮播插件
06-10
效果描述： 基于jQuery实现的左右全屏效果，同时也是响应式效果 缺点是引入的文件比较多，注意别搞错了 使用方法： 1、将CSS中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
jQuery和CSS3响应式全屏商品介绍轮播图特效
12-10
这是一款jQuery和CSS3响应式全屏商品介绍轮播图特效。该轮播图特效适用于商城的商品介绍，它支持移动手机设备，效果非常炫酷。
meizz的图片轮换效果
08-08 773
 meizz的图片轮换效果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 name="au
特殊的图片轮换特效
aisijue2425的博客
03-30 118
特殊的图片轮换特效 一、实现效果 如上图： 　　1、图片自动依次轮换，每轮换到一张图片，下面对应的小图标出现红色边框，并显示对应的图片名称 　　2、鼠标放到大图片上面的时，图片停止轮换，一直显示当前图片；鼠标移开后图片继续轮换 　　3、鼠标移到小图标上时，大图片区域会显示对应的大图；鼠标移开则从当前图片开始继续轮换 二、代码 1 <!DOC...
html图片自动轮换效果,纯css实现轮播图banner自动轮换效果
weixin_32865081的博客
05-31 306
话不多说 直接上代码* {margin: 0;padding: 0;}.container {margin:300px auto;height: 400px;width: 1146px;overflow: hidden;}/* .wrap */.wrap {position: relative;width:10000px;left: 0px;animation: animateImg ease 5...
jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
binyao02123202的专栏
10-06 1773
jQuery很不错的JS框架,现在已经更新到 1.2.6 了,添加了很多新特性,修正了大量的BUG. 今天,借助他的威力, 用js实现迅雷首页(http://xunlei.com/)FLASH轮换的效果. 先看效果吧: http://www.koyoz.com/demo/
jquery仿盖章效果
最新发布
07-25
要实现仿盖章效果，你可以使用 jQuery 来添加动画效果。下面是一个示例代码，展示了如何使用 jQuery 来实现一个简单的盖章效果： HTML 代码： ```html <div class="seal"> <div class="inner-circle"></div> <div class="outer-circle"></div> <div class="text">公章</div> </div> <button id="stampBtn">盖章</button> ``` CSS 代码： ```css .seal { width: 200px; height: 200px; position: relative; background-color: red; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .inner-circle { width: 80px; height: 80px; background-color: white; border-radius: 50%; } .outer-circle { width: 160px; height: 160px; background-color: red; border-radius: 50%; position: absolute; } .text { color: white; font-size: 24px; } .stamp { animation: stampEffect 0.5s linear; } @keyframes stampEffect { from { transform: scale(1); opacity: 1; } to { transform: scale(0.8); opacity: 0.5; } } ``` JavaScript/jQuery 代码： ```javascript $(document).ready(function() { $('#stampBtn').click(function() { $('.seal').addClass('stamp'); setTimeout(function() { $('.seal').removeClass('stamp'); }, 500); }); }); ``` 在上述代码中，我们使用了 jQuery 的 `addClass()` 和 `removeClass()` 方法来添加和移除 `stamp` 类，这个类包含了一个盖章的动画效果。点击按钮时，通过添加和移除类来触发盖章效果。 需要注意的是，这只是一个简单的示例，实际应用中可能需要更复杂的动画效果和逻辑来实现更真实的盖章效果。可以根据具体需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值