急急，在线等，jquery问题

songweida8076 2012-01-12 11:05:24
当鼠标移动到图片上面，开始类似与幻灯片，开始一张一张图片播放，鼠标移走回复第一张图片。 我有多张图片在一个list里， 还有个恩钮，点击的时候，图片的位置开始播放MP4。球高手。。。
...全文
261 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
crgoodjob 2012-01-19
  • 打赏
  • 举报
 回复
都是神人啊，学习中·········
ycproc 2012-01-14
  • 打赏
  • 举报
 回复
http://download.csdn.net/detail/fengyarongaa/2265207

试试我做的这个Demo
shenzhenNBA 2012-01-14
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 songweida8076 的回复:]

引用 16 楼 shenzhennba 的回复:
是点播放 图片位置播放我我 数据库存的一个路径，路径是MP4文件， 就开始播放，只不过播放位置是以前图片的位置，不知道怎么实现。。


O，感觉你回答还是模棱两可的，关键的问题你还没说清？还是想如下列出来，虽然死板但清楚

问题1：
是一个图片对应一个mp4视频文件啊? 还是 所有的图片都对应一个mp4视频文件?


问题2：……

是一个图片别表，没个图片对应不同的MP4，而且MP4和图片都存在一条会记录了，直接就能取到，恩钮就在图片的下面。
[/Quote]

楼主,知道了, 看看一下微创新: 给 img 元素人为添加一个属性 videoURL 存储该图片对应的视频文件名称(含路径),这样做是在数据输出时很方便,后面的其他操作也都变得很方便,而且很方便操作; 还有个问题在mouseout里要修改,因为mouse移开要保持当前的图片才能点击播放/停止视频; 至于mp4的播放器,我网上找的, 你可以根据自己需要修改, 需要安装 Windows Media Player[version=9+]等或其他对应的播放器/插件, 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>幻灯片</title>

<style type="text/css">

*{ font-family:verdana; font-size:12px;}

</style>

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">

</script>

</head>

<body>

幻灯片/视频播放

<ul id="imageList" style="display:none;">

<li><img videoURL="xpath/mp4File01.mp4" src="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg" width="10" height="10"></li>

<li><img videoURL="xpath/mp4File02.mp4" src="http://avatar.profile.csdn.net/D/3/0/2_songweida8076.jpg" width="10" height="10"></li>

<li><img videoURL="xpath/mp4File03.mp4" src="http://avatar.profile.csdn.net/F/5/C/2_semanwmj.jpg" width="10" height="10"></li>

<li><img videoURL="xpath/mp4File04.mp4" src="http://avatar.profile.csdn.net/5/0/D/2_nibaohua.jpg" width="10" height="10"></li>

<li><img videoURL="xpath/mp4File05.mp4" src="http://avatar.profile.csdn.net/9/8/4/2_yangting_lisa.jpg" width="10" height="10"></li>

</ul>

<div id="picbox" style="border:1px solid red; text-align:center;">

<img id="showPic" src="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg" width="400" height="300">

<div id="videoBox" style="display:none;"></div>

<div id="btnBox"><br><br>

<a href="javascript:playVideo();">play Video</a> | <a href="javascript:stopVideo();">stop Video</a>

<br>

</div>

</div>

<script language="javascript" type="text/javascript">

var oConfig={

    playerID:'',	//video ID

    picList:[],		//pic list

	videoList:[],	//video list

	curVideo:'',   	//save current video URL

    i:0,

    init:function(){

        $('#imageList img').each(function(){

        oConfig.picList.push($(this).attr('src'));  

		oConfig.videoList.push($(this).attr('videoURL'));       

        });    

		oConfig.curVideo=oConfig.videoList[0];

    }

};



var changePic=function(){

    oConfig.i++;

    if(oConfig.i>=oConfig.picList.length) oConfig.i=0;

    $('#showPic').attr('src',oConfig.picList[oConfig.i]);

	$('#showPic').attr('videoURL',oConfig.videoList[oConfig.i]);

	oConfig.curVideo=oConfig.videoList[oConfig.i]

}



function playVideo(){

	var vURL=$.trim(oConfig.curVideo);

	if(vURL=='') return;

	var oPic=$('#showPic');

	var vBox=$('#videoBox');

	var strHTML="";

	

	//create video player code here,根据自己的播放代码适当在这里修改

	//需要安装 Windows Media Player[version=9+]等或其他对应的播放器/插件, 

	strHTML+='<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="mediaplayer" width="400" height="300">';

	strHTML+='<embed>';

	strHTML+='<param name="SRC" value="'+vURL+'">';

	strHTML+='</embed>';

	strHTML+='</object>';

	strHTML+='<br>video: '+vURL;

	

	vBox.html(strHTML);

	clearInterval(oConfig.playerID);

	oPic.hide();

	vBox.show();

}



function stopVideo(){

	var oPic=$('#showPic');

	var vBox=$('#videoBox');

	vBox.hide('');

	oPic.show();

}



$(document).ready(function(){

    oConfig.init(); 

    $('#showPic').mouseover(function(){

    oConfig.playerID=setInterval(function(){changePic();},2000);

    });

    $('#showPic').mouseout(function(){

	

    //$('#showPic').attr('src',oConfig.picList[0]);

   // oConfig.i=0;

	

    clearInterval(oConfig.playerID);

    });    	

});

</script>

</body>

</html>


LZ....分分了...
songweida8076 2012-01-14
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 shenzhennba 的回复:]
是点播放 图片位置播放我我 数据库存的一个路径，路径是MP4文件， 就开始播放，只不过播放位置是以前图片的位置，不知道怎么实现。。


O，感觉你回答还是模棱两可的，关键的问题你还没说清？还是想如下列出来，虽然死板但清楚

问题1：
是一个图片对应一个mp4视频文件啊? 还是 所有的图片都对应一个mp4视频文件?


问题2：
mp4视频文件源，即URL，放在哪里？或怎么个……
[/Quote]

是一个图片别表，没个图片对应不同的MP4，而且MP4和图片都存在一条会记录了，直接就能取到，恩钮就在图片的下面。
songweida8076 2012-01-13
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 shenzhennba 的回复:]
引用 13 楼 songweida8076 的回复:

就是点个播放摁牛。 图片位置播放mp4

这个问题还多着呢,别人不清楚你的具体情况

是一个图片对应一个mp4啊?

还是

所有的图片都对应一个mp4?

mp4的源是在哪里得到?...

下班了,LZ分分....我上面那里已经差不多了,结合上面情况自己在增加mp4播放功能即可,即mp4源和位置确定的处理
[/Quote]


放心 分还是会有的，是点播放 图片位置播放我我 数据库存的一个路径，路径是MP4文件， 就开始播放，只不过播放位置是以前图片的位置，不知道怎么实现。。
shenzhenNBA 2012-01-13
  • 打赏
  • 举报
 回复
是点播放 图片位置播放我我 数据库存的一个路径，路径是MP4文件， 就开始播放，只不过播放位置是以前图片的位置，不知道怎么实现。。


O，感觉你回答还是模棱两可的，关键的问题你还没说清？还是想如下列出来，虽然死板但清楚

问题1：
是一个图片对应一个mp4视频文件啊? 还是 所有的图片都对应一个mp4视频文件?


问题2：
mp4视频文件源，即URL，放在哪里？或怎么个方法得到？


问题3：
按钮的位置放在哪里？


赶紧回复过了明天放假就不上网了，^-^
shenzhenNBA 2012-01-12
  • 打赏
  • 举报
 回复
分分...
shenzhenNBA 2012-01-12
  • 打赏
  • 举报
 回复
[Quote=引用楼主 songweida8076 的回复:]
当鼠标移动到图片上面，开始类似与幻灯片，开始一张一张图片播放，鼠标移走回复第一张图片。 我有多张图片在一个list里， 还有个恩钮，点击的时候，图片的位置开始播放MP4。球高手。。。
[/Quote]

参考看看看....当鼠标移动到图片上面开始播放，每2秒切换图片，鼠标移走回复第一张图片，把所有的图片放到 ID=imageList 元素里面，用li列出即可，个数不限



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>幻灯片</title>

<style type="text/css">

*{ font-family:verdana; font-size:12px;}

</style>

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<script language="javascript" type="text/javascript">

</script>

</head>

<body>

幻灯片

<ul id="imageList" style="display:none;">

<li><img src="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg" width="10" height="10"></li>

<li><img src="http://avatar.profile.csdn.net/D/3/0/2_songweida8076.jpg" width="10" height="10"></li>

<li><img src="http://avatar.profile.csdn.net/F/5/C/2_semanwmj.jpg" width="10" height="10"></li>

<li><img src="http://avatar.profile.csdn.net/5/0/D/2_nibaohua.jpg" width="10" height="10"></li>

<li><img src="http://avatar.profile.csdn.net/9/8/4/2_yangting_lisa.jpg" width="10" height="10"></li>

</ul>

<div id="picbox" style="border:1px solid red; text-align:center;">

<img id="showPic" src="http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg" width="200" height="100">

</div>

<script language="javascript" type="text/javascript">

var oConfig={

	playerID:'',

	picList:[],

	i:0,

	init:function(){

		$('#imageList img').each(function(){

		oConfig.picList.push($(this).attr('src'));		

		});	

	}

};



var changePic=function(){

	oConfig.i++;

	if(oConfig.i>=oConfig.picList.length) oConfig.i=0;

	$('#showPic').attr('src',oConfig.picList[oConfig.i]);

}



$(document).ready(function(){

	oConfig.init();

	$('#showPic').mouseover(function(){

	oConfig.playerID=setInterval(function(){changePic();},2000);

	});

	$('#showPic').mouseout(function(){

	$('#showPic').attr('src',oConfig.picList[0]);

	oConfig.i=0;

	clearInterval(oConfig.playerID);

	});	

});

</script>

</body>

</html>
songweida8076 2012-01-12
  • 打赏
  • 举报
 回复
幻灯片代码，求网址。。。找半天没找个靠谱的
小笨熊 2012-01-12
  • 打赏
  • 举报
 回复
恩，就是那样的，里面加自己的代码就行，用hover方法
songweida8076 2012-01-12
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 yangting_lisa 的回复:]
mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。
$('p').mouseleaver(functio……
[/Quote]

求幻灯片代码，我是freemarker里有个list 是存 img的
$('p').hover(function(){
alert('mouseenter function is running !');
、里面是鼠标移动进去的操作？
},function(){
alert('mouseleaver function is running !');
里面是鼠标离开的操作？

});


小笨熊 2012-01-12
  • 打赏
  • 举报
 回复
mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
这两个事件一般连起来使用，在jQuery中可以使用hover这个函数来代替这两个函数。
$('p').hover(function(){
alert('mouseenter function is running !');
},function(){
alert('mouseleaver function is running !');
});
小笨熊 2012-01-12
  • 打赏
  • 举报
 回复
$(imgObj).mouseover(function(){
//code
});
imgObj就是那个图片的对象，code部分就是调用的幻灯片播放的代码
songweida8076 2012-01-12
  • 打赏
  • 举报
 回复
http://www.saksfifthavenue.com/search/EndecaSearch.jsp?Ntk=Entire+Site?FOLDER%3C%3Efolder_id&SECSLOT=LN-SALE&Ntx=mode%2Bmatchpartialmax&bmUID=jhVkFA0&Ns=P_brandname||P_product_code&N=306418075+1553


类似与这网站，的效果。
doctor_ni 2012-01-12
  • 打赏
  • 举报
 回复
描述的再清楚点吧，
KeenWon 2012-01-12
  • 打赏
  • 举报
 回复
这个。。。
shenzhenNBA 2012-01-12
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 songweida8076 的回复:]

就是点个播放摁牛。 图片位置播放mp4
[/Quote]
这个问题还多着呢,别人不清楚你的具体情况

是一个图片对应一个mp4啊?

还是

所有的图片都对应一个mp4?

mp4的源是在哪里得到?...

下班了,LZ分分....我上面那里已经差不多了,结合上面情况自己在增加mp4播放功能即可,即mp4源和位置确定的处理
songweida8076 2012-01-12
  • 打赏
  • 举报
 回复
就是点个播放摁牛。 图片位置播放mp4
shenzhenNBA 2012-01-12
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 songweida8076 的回复:]

还有个恩钮，点击的时候，图片的位置开始播放MP4。。。。

有个链接。点完图片的位置播放mp4如何做
[/Quote]

不够清楚,按钮/连接在放哪里? 点击时,mp4播放在哪个位置?在图片的位置可以,但比较麻烦点哦,放在旁边什么的比较好
songweida8076 2012-01-12
  • 打赏
  • 举报
 回复
有个链接。点完图片的位置播放mp4如何做
JQuery第一章入门
1:什么是jQuery? 它通过封装原生的 JavaScript 函数得到一整套定义好的方法 2：jQuery的作用？ 1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画...
哪位大哥帮个忙，求一个用jquery实现1：1中国农业银行下的关于农行的一个页面急急急
哪位大哥帮个忙，求一个用jquery实现1：1中国农业银行下的关于农行的一个页面急急急
文件管理系统(JQuery插件+Ajax)
文件管理系统(JQuery插件+Ajax) 简介: 主要是文件的一个管理系统,页面脚本是由JQuery (V1.3.1)插件的方式编写,所有功能都是通过Ajax和... 希望大家喜欢(做完就急急忙忙发布了,没有写太多注释,希望大家多多包涵)...
jquery核心函数
$()的参数 $():表示调用jQuery的核心函数 （1）接收一个函数 ...急急急</p>') //将在dom树上创建结点p,通过append方法挂载到父元素上 （3）接收一个DOM元素 将DOM元素转换为jQuery对象 ...
jQuery的todolist案例实现
想必大家都需要记录一些小事情，类似于记录生活，以后还能翻出来看看，本次就可以用jQuery来实现一下。下面就给出代码相关分析，相关样式资源可以私下找我（QQ3534912941）获取，这里不太好上传。对于本案例其实也不...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章