经验分享程序开发文档资料数据资源其它资源

新浪图库JS图片播放器样式轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 新浪图库JS图片播放器样式轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

新浪图库JS图片播放器样式轮播滚动切换特效代码

HTML代码(index.html):

<!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="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为新浪图库JS图片播放器样式" />
<title>新浪图库JS图片播放器样式</title>

<style type="text/css">
<!--
/* CSS from lmy 2007-4-28*/
/*CSS for all begin*/
ul, ol, li, img {margin:0; padding:0; border:0;}

/*播放器样式 20070510 修改 lmy 开始 */
#ImgPlayer{width:682px; height:352px; overflow:hidden; border:3px #BDCBD7 solid; padding:1px 3px 0 1px;}
#ImgBlk{width:452px; height:339px; background:url(images/news_pic_ws_001.gif) no-repeat 10px 2px #E9F0F7; padding:13px 12px 0 11px; float:left;}
#ss_img_div{width:452px; height:302px; overflow:hidden;}
#ss_img_div img{border:1px #000 solid;}
#ImgNum{height:37px; overflow:hidden;}
#ImgNum ul{width:375px; padding:0 0 0 0; float:left; cursor:default;}
#ImgNum li{width:30px; height:25px; line-height:25px; overflow:hidden; padding:6px 0 0 0; text-align:center; font-family:Arial;  font-size:9px; float:left; margin-right:5px; cursor:pointer;}
#ImgNum li.itemOff{background:url(images/news_pic_ws_002.gif) no-repeat bottom; color:#000;}
#ImgNum li.itemOff:hover{color:#A80000;}
#ImgNum li.itemOn{background:url(images/news_pic_ws_003.gif) no-repeat bottom; color:#A80000; font-weight:bold; height:25px; line-height:25px; padding:6px 0 0 0;}
#ImgNum div{float:left; width:73px; text-align:left; padding:4px 0 0 0; margin:10px 0 0 0; height:15px; line-height:15px; cursor:pointer; font-size:12px; color:#7D98BF;}
#Play{background:url(images/news_pic_ws_004.gif) no-repeat bottom right;}
#Pause{background:url(images/news_pic_ws_005.gif) no-repeat bottom right;}
#TxtBlk{width:206px; float:left;}
#Txt{padding:15px 10px 0 10px; text-align:left; height:300px; border:1px #D7E5F5 solid; border-left:none; background:url(images/news_pic_ws_006.gif) repeat-x bottom;}
#Txt h2{color:#A80000; text-align:center; font-size:18px; font-family:"黑体"; font-weight:normal; padding:1px 0 5px 0; background:none;}
#Txt h2 a,#Txt h2 a:visited{color:#A80000; text-decoration:none;}
#Txt h2 a:hover,#Txt h2 a:active{color:#A80000; text-decoration:underline;}
#con{text-align:left; color:#344F71; line-height:21px;}
#date_PN{text-align:left; font-size:12px;}
#date{padding:12px 0 0 8px; color:#5C5C5C; width:200px; float:left; text-align:center}
#PN{float:left; width:100px; padding:11px 0 0 0; background:url(images/news_pic_ws_007.gif) no-repeat 50px 9px;}
#PN #pre{display:block; float:left; width:42px; padding:0 0 0 8px; background:url(images/news_pic_ws_008.gif) no-repeat 0 3px; text-decoration:none; color:#009;}
#PN #next{display:block; float:left; width:44px; padding:0 0 0 6px; background:url(images/news_pic_ws_009.gif) no-repeat 44px 3px; text-decoration:none; color:#009;}
#PN #pre:visited,#PN #next:visited{color:#009;}
#PN #pre:hover,#PN #next:hover{text-decoration:underline;}
/*播放器样式 20070510 修改 lmy 结束*/

-->
</style>
</head>

<body>
<div align="center">
<!-- 播放器 begin -->
<script type="text/javascript" src="js/imgplayer1.js"></script>
<script type="text/javascript" language="javascript">
			//内容部分
			ss = new slideshow("ss");

			ss.prefetch = 1;
			
			ss.sizelmt = true;
			
			ss.repeat = true;
									
				s = new slide();
	s.src = "images/U1565P1T247D4546F4939DT20070723090615.jpg";
	s.title = "热浪袭击欧洲";
	s.link = "#";
	s.con = "欧洲南部和中部一些国家连日来遭遇高温热浪袭击。截至21日，罗马尼亚、奥地利和保加利亚因持续高温造成的死亡人数已达18人。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1565P1T247D4547F4939DT20070723093347.jpg";
	s.title = "杭州出现雷暴天气";
	s.link = "#";
	s.con = "22日傍晚到夜间，杭州出现一场持续四个小时的罕见雷暴天气。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1565P1T247D4548F4939DT20070723093437.jpg";
	s.title = "女子因相貌闭门不出";
	s.link = "#";
	s.con = "7月12日，浏阳市沙市镇团农村，由于长相丑陋，陈小红常闭门不出。30多年来，被人们称为“鬼脸女”。自卑让她习惯于在黑暗中舔犊内心的忧伤。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1565P1T247D4549F4939DT20070723093650.jpg";
	s.title = "英国遭受暴雨袭击";
	s.link = "#";
	s.con = "英格兰西部、中部和南部以及威尔士的许多地区遭受暴雨袭击，成千上万的房屋被淹。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1565P1T247D4550F4939DT20070723093940.jpg";
	s.title = "青海塔尔寺晒大佛";
	s.link = "#";
	s.con = "晒大佛，在每年农历四，六月两次法会时举行。意思是为纪念释迦牟尼诞生成道。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1043P1T247D4544F4939DT20070722122754.jpg";
	s.title = "英国连遭暴雨袭击";
	s.link = "#";
	s.con = "连续两天的暴雨使英国部分地区遭遇洪灾，交通中断、房屋被淹等使救援人员疲于应付。英国首相布朗表示，需要从洪灾中“吸取教训”。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1043P1T247D4545F4939DT20070722122927.jpg";
	s.title = "云南图书馆气体泄漏";
	s.link = "#";
	s.con = "云南省图书馆保安罗军再次来到电子阅览室，准备救第二个人时，他感到头晕，摇晃了一些，因为体内吸入过多的白雾，也栽倒到电子阅览室里。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1043P1T247D4539F4939DT20070720085817.jpg";
	s.title = "女子裸体抗议KFC虐鸡";
	s.link = "#";
	s.con = "2007年7月19日，曼谷，2名裸体示威者抗议KFC虐待鸡只。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1043P1T247D4540F4939DT20070720085856.jpg";
	s.title = "新疆北屯塑钢厂起火";
	s.link = "#";
	s.con = "2007年7月19日，新疆北屯一塑钢厂发生火灾。大火烧毁了生产车间并引燃了露天堆放的发泡包装网，塑料制品燃烧产生的滚滚浓烟向大气排放了大量的污染物。";
	ss.add_slide(s);

	s = new slide();
	s.src = "images/U1043P1T247D4541F4939DT20070720090022.jpg";
	s.title = "美国举办套小牛活动";
	s.link = "#";
	s.con = "2007年7月18日，美国怀俄明州夏安边境日，套小牛活动正在进行中。";
	ss.add_slide(s);


						
			for (var i=0; i < ss.slides.length; i++) {
			
				s = ss.slides[i];
			
				s.target = "_blank";
			
			}
			//--><!]]>
			</script>
			
			<!-- 图片播放器主体 begin -->
			<div id="ImgPlayer">
				<!-- 大图 begin -->
				<div id="ImgBlk">
					<div id="ss_img_div"><a href="javascript:ss.hotlink();"><img id="ss_img" style="filter:blendTrans(Duration=1);" width="450" height="300" src="images/U1565P1T247D4546F4939DT20070723090615.jpg" alt="热浪袭击欧洲"/>
</a></div>
					<div id="ImgNum">
						<!-- 数字 begin -->
						<ul>
							<li class="itemOff" id="imbtn0" onclick="ss.goto_slide(0)">1</li>
							<li class="itemOff" id="imbtn1" onclick="ss.goto_slide(1)">2</li>
							<li class="itemOff" id="imbtn2" onclick="ss.goto_slide(2)">3</li>
							<li class="itemOff" id="imbtn3" onclick="ss.goto_slide(3)">4</li>
							<li class="itemOff" id="imbtn4" onclick="ss.goto_slide(4)">5</li>
							<li class="itemOff" id="imbtn5" onclick="ss.goto_slide(5)">6</li>
							<li class="itemOff" id="imbtn6" onclick="ss.goto_slide(6)">7</li>
							<li class="itemOff" id="imbtn7" onclick="ss.goto_slide(7)">8</li>
							<li class="itemOff" id="imbtn8" onclick="ss.goto_slide(8)">9</li>
							<li class="itemOff" id="imbtn9" onclick="ss.goto_slide(9)">10</li>
						</ul>
						<!-- 数字 end -->
						<!-- 播放 begin -->
						<div id="Play" onclick="ss.play(); document.getElementById('Pause').style.display='block'; this.style.display='none';" onmousemove="this.style.color='#c00';" onmouseout="this.style.color='#7D98BF';" style="display:none;">自动播放</div>
						<!-- 播放 end -->
						<!-- 暂停 begin -->
						<div id="Pause" onclick="ss.pause(); document.getElementById('Play').style.display='block'; this.style.display='none';" onmousemove="this.style.color='#c00';" onmouseout="this.style.color='#7D98BF';">暂停播放</div>
						<!-- 暂停 end -->
					</div>
				</div>
				<!-- 大图 end -->
				<!-- 标题正文 begin -->
				<div id="TxtBlk">
					<!-- 内容 begin -->
					<div id="Txt">
						<h2 id="tt">热浪袭击欧洲</h2>
						<p id="con">欧洲南部和中部一些国家连日来遭遇高温热浪袭击。截至21日，罗马尼亚、奥地利和保加利亚因持续高温造成的死亡人数已达18人。</p>
					</div>
					<!-- 内容 end -->
					<!-- 日期 begin -->
					<div id="date_PN">
						<div id="date">2008年8月8日 星期五</div>
					</div>
					<!-- 日期 end -->
				</div>
				<!-- 标题正文 end -->
			</div>
			<p>
			<!-- 图片播放器主体 end -->
			<script type="text/javascript">
			<!--//--><![CDATA[//><!--
			ss.pre_update_hook = function() {
				sid = ss.current;
				title = ss.slides[sid].title;
				linkurl = ss.slides[sid].link;
				totals = ss.slides.length;
				scon = ss.slides[sid].con;
				tempid = parseInt(sid) + 1;
				document.getElementById("tt").innerHTML = '<a href="'+linkurl+'" target="_blank">'+title+'</a>';
				document.getElementById("con").innerHTML = scon;
				for (var i = 0;i < ss.slides.length;i++){
					document.getElementById("imbtn"+i).className = "itemOff";
				}
				document.getElementById("imbtn"+sid).className = "itemOn";
			  return;
			}
			if (document.images) {
				ss.image = document.images.ss_img;
				ss.update();
				ss.play();
			}
			//--><!]]>
			</script>
</div>
</body>
</html>

JS代码(imgplayer1.js):

function slide(src,link,text,target,attr,desc){
	this.desc = desc this.src = src;
	this.link = link;
	this.text = text;
	this.target = target;
	this.attr = attr;
	if (document.images){
	this.image = new Image();
}
this.loaded = false;
	this.load = function(){
	if (!document.images){
	return;
}
if (!this.loaded){
	this.image.src = this.src;
	this.loaded = true;
}
}
this.hotlink = function(){
	var mywindow;
	if (!this.link) return;
	if (this.target){
	if (this.attr){
	mywindow = window.open(this.link,this.target,this.attr);
}
else{
	mywindow = window.open(this.link,this.target);
}
if (mywindow && mywindow.focus) mywindow.focus();
}
else{
	location.href = this.link;
}
}
}
function slideshow( slideshowname ){
	this.name = slideshowname;
	this.repeat = true;
	this.prefetch = -1;
	this.image;
	this.textid;
	this.textarea;
	this.timeout = 5000;
	this.slides = new Array();
	this.current = 0;
	this.timeoutid = 0;
	this.add_slide = function(slide){
	var i = this.slides.length;
	if (this.prefetch == -1){
	slide.load();
}
this.slides[i] = slide;
}
this.play = function(timeout){
	this.pause();
	if (timeout){
	this.timeout = timeout;
}
if (typeof this.slides[ this.current ].timeout != 'undefined'){
	timeout = this.slides[ this.current ].timeout;
}
else{
	timeout = this.timeout;
}
this.timeoutid = setTimeout( this.name + ".loop()",timeout);
}
this.pause = function(){
	if (this.timeoutid != 0){
	clearTimeout(this.timeoutid);
	this.timeoutid = 0;
}
}
this.update = function(){
	if (! this.valid_image()){
	return;
}
if (typeof this.pre_update_hook == 'function'){
	this.pre_update_hook();
}
var slide = this.slides[ this.current ];
	var dofilter = false;
	if (this.image && typeof this.image.filters != 'undefined' && typeof this.image.filters[0] != 'undefined'){
	dofilter = true;
}
slide.load();
	if (dofilter){
	if (slide.filter && this.image.style && this.image.style.filter){
	this.image.style.filter = slide.filter;
}
this.image.filters[0].Apply();
}
this.image.src = slide.image.src;
	if (dofilter){
	this.image.filters[0].Play();
}
this.display_text();
	if (typeof this.post_update_hook == 'function'){
	this.post_update_hook();
}
if (this.prefetch > 0){
	var next,prev,count;
	next = this.current;
	prev = this.current;
	count = 0;
	do{
	if (++next >= this.slides.length) next = 0;
	if (--prev < 0) prev = this.slides.length - 1;
	this.slides[next].load();
	this.slides[prev].load();
}
while (++count < this.prefetch);
}
}
this.goto_slide = function(n){
	if (n == -1){
	n = this.slides.length - 1;
}
if (n < this.slides.length && n >= 0){
	this.current = n;
}
this.update();
}
this.goto_random_slide = function(include_current){
	var i;
	if (this.slides.length > 1){
	do{
	i = Math.floor(Math.random()*this.slides.length);
}
while (i == this.current);
	this.goto_slide(i);
}
}
this.next = function(){
	if (this.current < this.slides.length - 1){
	this.current++;
}
else if (this.repeat){
	this.current = 0;
}
this.update();
}
this.previous = function(){
	if (this.current > 0){
	this.current--;
}
else if (this.repeat){
	this.current = this.slides.length - 1;
}
this.update();
}
this.shuffle = function(){
	var i,i2,slides_copy,slides_randomized;
	slides_copy = new Array();
	for (i = 0;
	i < this.slides.length;
	i++){
	slides_copy[i] = this.slides[i];
}
slides_randomized = new Array();
	do{
	i = Math.floor(Math.random()*slides_copy.length);
	slides_randomized[ slides_randomized.length ] = slides_copy[i];
	for (i2 = i + 1;
	i2 < slides_copy.length;
	i2++){
	slides_copy[i2 - 1] = slides_copy[i2];
}
slides_copy.length--;
}
while (slides_copy.length);
	this.slides = slides_randomized;
}
this.get_text = function(){
	return(this.slides[ this.current ].text);
}
this.get_all_text = function(before_slide,after_slide){
	all_text = "";
	for (i=0;
	i < this.slides.length;
	i++){
	slide = this.slides[i];
	if (slide.text){
	all_text += before_slide + slide.text + after_slide;
}
}
return(all_text);
}
this.display_text = function(text){
	if (!text){
	text = this.slides[ this.current ].text;
}
if (this.textarea && typeof this.textarea.value != 'undefined'){
	this.textarea.value = text;
}
if (this.textid){
	r = this.getElementById(this.textid);
	if (!r){
	return false;
}
if (typeof r.innerHTML == 'undefined'){
	return false;
}
r.innerHTML = text;
}
}
this.hotlink = function(){
	this.slides[ this.current ].hotlink();
}
this.save_position = function(cookiename){
	if (!cookiename){
	cookiename = this.name + '_slideshow';
}
document.cookie = cookiename + '=' + this.current;
}
this.restore_position = function(cookiename){
	if (!cookiename){
	cookiename = this.name + '_slideshow';
}
var search = cookiename + "=";
	if (document.cookie.length > 0){
	offset = document.cookie.indexOf(search);
	if (offset != -1){
	offset += search.length;
	end = document.cookie.indexOf(";
	",offset);
	if (end == -1) end = document.cookie.length;
	this.current = parseInt(unescape(document.cookie.substring(offset,end)));
}
}
}
this.noscript = function(){
	$html = "\n";
	for (i=0;
	i < this.slides.length;
	i++){
	slide = this.slides[i];
	$html += '<P>';
	if (slide.link){
	$html += '<a href="' + slide.link + '">';
}
$html += '<img src="' + slide.src + '" ALT="slideshow image">';
	if (slide.link){
	$html += "<\/a>";
}
if (slide.text){
	$html += "<BR>\n" + slide.text;
}
$html += "<\/P>" + "\n\n";
}
$html = $html.replace(/\&/g,"&amp;
	" );
	$html = $html.replace(/</g,"&lt;
	" );
	$html = $html.replace(/>/g,"&gt;
	" );
	return('<pre>' + $html + '</pre>');
}
this.loop = function(){
	if (this.current < this.slides.length - 1){
	next_slide = this.slides[this.current + 1];
	if (next_slide.image.complete == null || next_slide.image.complete){
	this.next();
}
}
else{
	this.next();
}
this.play( );
}
this.valid_image = function(){
	if (!this.image){
	return false;
}
else{
	return true;
}
}
this.getElementById = function(element_id){
	if (document.getElementById){
	return document.getElementById(element_id);
}
else if (document.all){
	return document.all[element_id];
}
else if (document.layers){
	return document.layers[element_id];
}
else{
	return undefined;
}
}
this.set_image = function(imageobject){
	if (!document.images) return;
	this.image = imageobject;
}
this.set_textarea = function(textareaobject){
	this.textarea = textareaobject;
	this.display_text();
}
this.set_textid = function(textidstr){
	this.textid = textidstr;
	this.display_text();
}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
639.24 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
639.24 KB
立即下载
赖悦月
了解
打赏作者 鼓励作者
Html 焦点滚动特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章