html5图片轮番播放,Jquery图片轮番播放跑马灯效果
用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。
【原理简述】
这里大概说一下整个流程:
1,将除了第一张以外的图片全部隐藏,
2,获取第一张图片的alt信息显示在信息栏,并添加点击事件
3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片
4,设置setInterval,定时执行切换函数
【代码说明】
filter(":visible") :获取所有可见的元素
unbind():从匹配的元素中删除绑定的事件
siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
例:找到每个div的所有同辈元素中带有类名为selected的元素。
Hello
Again
And
Again
执行
$("div").siblings(),结果
[
Hello
,
And
Again
]
【程序源码】
HTML部分:
id="banner_bg">
id="banner_info">
class="on">1
- 2
- 3
- 4
id="banner_list">
target="_blank">
src="imgs/p1.jpg" title="橡树小屋的blog"
alt="橡树小屋的blog"/>
target="_blank">
src="imgs/p5.jpg" title="橡树小屋的blog"
alt="橡树小屋的blog"/>
target="_blank">
src="imgs/p3.jpg" title="橡树小屋的blog"
alt="橡树小屋的blog"/>
target="_blank">
src="imgs/p4.jpg" title="橡树小屋的blog"
alt="橡树小屋的blog"/>
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
CSS部分:
#banner{position:relative;width:478px;height:286px;border:1px
solid #666;overflow:hidden;}#banner_list img{border:0px;}#banner_bg{position:absolute;bottom:0;background-color:#000;height:30px;filter:Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer;width:478px;}#banner_info{position:absolute;bottom:0;left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}#banner_text{position:absolute;width:120px;z-index:1002;right:3px;bottom:3px;}#banner ul{position:absolute;list-style-type:none;filter:Alpha(Opacity=80);opacity:0.8;border:1px
solid #fff;z-index:1002;margin:0;padding:0;bottom:3px;right:5px;}#banner ul li{padding:0px
8px;float:left;display:block;color:#FFF;border:#e5eaff
1px solid;background:#6f4f67;cursor:pointer}#banner ul li.on{background:#900}#banner_list a{position:absolute;}
JS部分:
count;
$(document).ready(function(){ count=$("#banner_list
a").length;
$("#banner_list
a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list
a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list
a:first-child").attr('href'),"_blank")});
$("#banner
li").click(function()
{vari=$(this).text()-1;//获取Li元素内的值,即1,2,3,4n=i;if(i>=count)return;
$("#banner_info").html($("#banner_list
a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list
a").eq(i).attr('href'),"_blank")})
$("#banner_list
a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementByIdx_x_x_x("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t=setInterval("showAuto()",4000);
$("#banner").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",4000);});
})functionshowAuto()
{
n=n>=(count-1)?0:++n;
$("#banner
li").eq(n).trigger('click');
}
html5图片轮番播放,Jquery图片轮番播放跑马灯效果相关推荐
- 原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
- 迷你播放器--第一阶段(2)--退出时自动最小化(不是关闭),增加当前播放曲目的跑马灯效果
迷你播放器--第一阶段(2) 退出时自动最小化(不是关闭),增加当前播放曲目的跑马灯效果 本文章为CSDN作者原创,转载请保留出处:http://blog.csdn.net/lrs0304/artic ...
- js html css 图片跑马灯效果(轮播)
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
- 视频安全之授权播放和防录屏跑马灯
阿酷TONY 2021-2-26 整理 视频安全之授权播放和防录屏跑马灯 先上效果图(视频播放时,显示学员名称和学员手机号): 屏幕录像是最难防范的一种视频盗版方式,保利威播放器提供的防录屏跑马灯功 ...
- html5视频播放器带ID跑马灯效果(视频防录屏)
通过接口配置获取观看者信息,将观看者信息随机显示于视频播放界面(可自定义位置.时间.时长.及颜色等),在不影响观看体验的同时,让视频具备指纹信息. ID跑马灯可快速追踪被盗视频出处,方便第一时间对录屏 ...
- 图片滚动插件+html5,超赞的jQuery图片滑块动画特效代码汇总
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...
- html音乐播放器自动切歌,html5和css3以及jquery实现音乐播放器
这篇文章主要讲实现音乐播放器的代码(html5+css3+jquery),需要的朋友可以参考下 看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的 在angel b ...
- jquery实现图片的跑马灯效果
样式一(无限循环,消耗内存): <!DOCTYPE html> <html><head><meta charset="utf-8" /&g ...
- vue 手写图片左右跑马灯 效果
效果图与代码贴上: 1.html部分 <template><div class="box"><Icon class="icons1 icon ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
最新文章
- Java中如何合并有个具有相同key的Map
- 大整数减法(超过整型的表示范围)
- 科技管理的作业选题 很重要
- wxWidgets:wxStringTokenizer类用法
- 操作系统实验报告3:Linux 下 x86 汇编语言2
- mysql数据库在查询的时候不能使用字段别名,字段别名只在显示的时候显示出来
- linux shell变量作用域,Shell变量的作用域:Shell全局变量、环境变量和局部变量
- Jmter安装和配置
- 详解机器学习之感知机理论与实践
- c#使用pdf控件,提示无效注册类
- android开发利器--站在巨人肩膀上前行
- guet-acm-开挂的chair
- torch.load()出现ModuleNotFoundError错误
- 最新!腾讯优图联合厦门大学发布:2021十大人工智能趋势!无监督/多模态等热点...
- Qt设置电脑桌面壁纸
- 电脑硬件升级——笔记本更换更大容量的固态硬盘,并进行系统迁移
- 黑客入侵自我保护手册
- 蓝桥杯 ADV-183 分苹果 java
- 总结两个最近遇到 校园网连不上或丢失WLAN如何解决的方案
- b500k电位器引脚接法_6脚电位器B50K,引脚怎么接呢