`
myfreespace
  • 浏览: 228640 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 图片切换轮播

阅读更多

/*
 * 功能:俱乐部-球迷频道js
 * 标签切换 焦点图切换
 * $Id$
 * bilibo@ifensi.com
 * 2010-09-17
 */

//标签切换 用法介绍
/*id="player_nav_1" 鼠标点击的标签 _nav_是确定的 前面的可以更改
 *id="player_block_1 要切换的内容 _block_是确定的前面的可以更改以用于不同的地方
 *$(".awards_nav a").click(function(){switchBlock(this,4);}); 绑定事件 
 */
function switchBlock(_this,count)
{
	var id=_this.id.replace(/^.+_/,"");
	var name_space=_this.id.replace(/_.+/,"");
	
	for(var i=1;i<=count;i++)
	{
		jQuery("#"+name_space+"_nav_"+i).removeAttr("class");
		document.getElementById(name_space+"_block_"+i).style.display="none";
	}
	document.getElementById(_this.id).className="current";
	document.getElementById(name_space+"_block_"+id).style.display="block";
}

//焦点图1
var cur_index=1;
var num=4; //循环的个数
var settime;
//鼠标移动上方显示
function Show_Dab(Dab_num)
{
	stopAction();
	for(var i=1;i<=4;i++)
	{
		document.getElementById("img_" + i).style.display = "none";
		document.getElementById("tdiv" + i).style.display = "none";
		document.getElementById("txt"+i).className = "";
	}
		document.getElementById("img_" + Dab_num).style.display = "block";
		document.getElementById("tdiv" + Dab_num).style.display = "block";
		document.getElementById("txt" + Dab_num).className = "dq";
}
//鼠标移除后自动循环
function Show_Begin()
{
	startAction();
	
}
//自动循环
function change_Menu()
{
	for(var i=1;i<=num;i++)
	{
		if(cur_index==i){
			jQuery("#img_"+i).show("slow");
			document.getElementById("tdiv"+i).style.display = "block";
			document.getElementById("txt"+i).className = "dq";
		}else{
			jQuery("#img_"+i).hide("slow");
			document.getElementById("tdiv" + i).style.display = "none";
			document.getElementById("txt"+i).className ="";
		}
	}
}
//初始化调用
function conAction()
{
	if(cur_index<4)
	{
	   cur_index++;
	}
	else
	{
	    cur_index=1;
	}
	change_Menu();
}

function startAction()
{
	stopAction();
	settime = setInterval(conAction,5000);
}
//停止循环
function stopAction()
{
	clearInterval(settime);
}
//焦点图2
var cur_num=1;
var total=4; //循环的个数
var timeid; 
//鼠标移动到上方显示
function Show_pic(num)
{
	stopPic();
	for(var i=1;i<=4;i++)
	{
		document.getElementById("img1_" + i).style.display = "none";
		document.getElementById("gtxt" + i).style.display = "none";
		document.getElementById("list"+i).className = "baise";
	}
		document.getElementById("img1_" + num).style.display = "block";
		document.getElementById("gtxt" + num).style.display = "block";
		document.getElementById("list" + num).className = "dangqian";
}
//自动显示
function change_pic()
{
	for(var i=1;i<=total;i++)
	{
		if(cur_num==i){
//			jQuery("#img1_"+i).show("slow");
//			jQuery("#gtxt"+i).show("slow");
			document.getElementById("img1_" + i).style.display = "block";
			document.getElementById("gtxt" + i).style.display = "block";
			document.getElementById("list"+i).className = "dangqian";
		}else{
//			jQuery("#img1_"+i).hide("slow");
//			jQuery("#gtxt"+i).hide("slow");
			document.getElementById("img1_" + i).style.display = "none";
			document.getElementById("gtxt" + i).style.display = "none";
			document.getElementById("list"+i).className ="baise";
		}
	}
}
//自动显示判断
function beginPic()
{
	if(cur_num<4)
	{
	   cur_num++;
	}
	else
	{
	    cur_num=1;
	}
	change_pic();
}
//暂停显示
function stopPic()
{
	clearInterval(timeid);
}
function startPic()
{
	stopPic();
	timeid = setInterval(beginPic,5000);
}
//鼠标移除开始滚动
function Begin_show()
{
	startPic();
	
}
//页面加载调用
window.onload=function()
{
	startAction();
	startPic();
}
//pk赞
function pkzan(voteid,teamid,nn)
{
	var uu = jQuery("#uname").text();
	
	if(uu){
		 jQuery.ajax({            

				type:'post',

				url:'/fans/fans.ajax.php?action=addvote',

				dataType:'data',

				data:'checkip=0&voteid='+voteid+'&chs='+teamid+'&uu='+uu,

				success:function(data){
				   alert(data);
				if (data =="")
				{
					var pid = "#pk"+nn;
					var num = jQuery(pid).text();
					num = parseInt(num)+1;
					jQuery(pid).text(num);
				}	


			  }

			});

			}else{

				alert('请先登录,谢谢');
			}
}

//积分榜上下滚动
var speed=30;
function Marquee(){ 
	var demo1 = jQuery("#football_block_5");
	var demo = jQuery("#contentul");
	if(demo.scrollTop()>=demo1.height())
		demo.scrollTop(0); 
	else{
		demo.scrollTop(demo.scrollTop()+90);
	}
}
function Marquee1()
{
	var demo1 = jQuery("#football_block_5");
	var demo = jQuery("#contentul");

	if(demo.scrollTop()<demo1.height())
		demo.scrollTop(0);
}
function moveup()
{
	Marquee1();
}
function movedown()
{
	Marquee();
}
 
1
2
分享到:
评论

相关推荐

    常用相册图片左右点击切换轮播js特效.rar

    常用相册图片左右点击切换轮播js特效.rar 常用相册图片左右点击切换轮播js特效.rar 常用相册图片左右点击切换轮播js特效.rar 常用相册图片左右点击切换轮播js特效.rar 常用相册图片左右点击切换轮播js特效.rar 常用...

    JavaScript 广告图片轮播 JS

    JavaScript 广告图片轮播(JS)是一种常见的网页动态效果,用于展示多个广告图片并自动进行切换,以吸引用户注意力并提升用户体验。这种技术在网站设计中被广泛应用,特别是电商平台和企业官网,如淘宝商城。以下是...

    js图片切换,轮播,带左右切换按钮,带暂停

    在JavaScript(JS)中实现图片切换和轮播功能是一项常见的前端开发任务,广泛应用于网站的头部 Banner、产品展示等场景。下面将详细讲解如何利用JavaScript实现这个功能,并结合描述中的关键词,探讨“左右切换按钮...

    纯div+css轮播图片切换图片

    下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏,实现图片的动态变化。这通常涉及到CSS的`display`属性,通过改变...

    简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图

    总之,这个项目提供了一个基本的jQuery图片轮播解决方案,结合HTML和CSS,能够实现带按钮的图片切换效果。对于初学者来说,这是一个很好的实践项目,可以学习到如何使用jQuery操作DOM,处理事件,以及实现动态效果。...

    好用的Javascript图片轮播

    JavaScript图片轮播是一种常见的网页动态效果,用于展示一组图片并以循环或定时切换的方式呈现,为网站增添互动性和视觉吸引力。在"好用的Javascript图片轮播"中,我们可以从标题和描述中提取出以下几个关键知识点:...

    轮播图片切换_JS图片轮播_

    **标题解析:** "轮播图片切换_JS图片轮播_" 这个标题表明我们要讨论的是一个使用JavaScript(JS)实现的图片轮播效果。在网页设计中,轮播图是一种常见的展示多张图片或内容的方式,它允许用户通过自动或手动切换在...

    图片切换轮播

    在IT行业中,图片切换轮播是一种常见的网页交互元素,它能够以美观且动态的方式展示一组图片,提升用户体验。本教程将深入探讨“图片切换轮播”这一主题,以jQuery-lb压缩包文件中的内容为基础,讲解如何实现无数字...

    JS倒影图片轮播

    "JS倒影图片轮播"是一种利用JavaScript实现的特效,它不仅展示了图片轮播的功能,还增加了倒影效果,使得网页更加生动和专业。这种技术主要依赖于JavaScript库和CSS3来实现,下面我们将详细讲解其工作原理和实现步骤...

    JS轮换图片,jquery轮换广告,轮播图片,轮播广告,JS图片切换,淘宝首页轮播,阿里云首页轮播广告

    1. **图片切换**:这是网页设计中常用的一种技术,通过编程方式在页面上展示一系列图片,让它们按设定的顺序或时间间隔自动切换,通常用于展示产品、广告或者信息。 2. **轮播广告**:轮播广告是一种动态的广告形式...

    js全屏图片轮播幻灯片UC浏览器官网焦点图片切换.zip

    js全屏图片轮播幻灯片UC浏览器官网焦点图片切换,通过原生javascript实现图片切换的效果,点击向左向右的箭头或者点击小图,都会使图片实现切换的效果,一般用于企业网站或者商城网站。php中文网推荐下载!

    Javascript图片自动轮播

    JavaScript图片自动轮播是一种常见的网页动态效果,常用于网站的首页展示、产品介绍或广告轮播等场景。这种技术利用JavaScript编程语言实现图片的自动切换,为用户带来更丰富的视觉体验。下面将详细介绍如何实现一个...

    js 图片自动轮播

    至此,一个简单的原生JavaScript图片轮播就实现了。这个轮播可以根据需求进行扩展,例如添加过渡效果、动态加载图片、支持键盘导航等。通过掌握这样的基础,你可以自由地定制适合项目需求的图片轮播组件,同时提高...

    图片切换,轮播图

    在网页设计和开发中,图片切换与轮播图是一种常见的元素,用于展示多张图片或内容,特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...

    网页设计-js弧形展示图片轮播切换代码

    网页设计-js弧形展示图片轮播切换代码。 代码简述:一般的首页轮播图是左右方向的走动,但是此demo独有其风格,走得是弧形路线的轮播,别具风格,分别对每个商品进行轮播,鼠标聚焦后商品有聚焦样式(点击商品跳转...

    js图片轮播、切换效果3

    综上所述,“js图片轮播、切换效果3”涵盖了JavaScript基础、DOM操作、CSS动画、事件监听等多个方面,通过学习和理解这些知识,你可以构建出更加丰富和交互性强的图片展示功能。实际应用中,可以根据需求选择合适的...

    纯javascript图片自定义轮播和图片滚动

    4. **图片切换**:切换图片时,可以使用`setTimeout`或`setInterval`函数实现自动轮播。通过改变图片的`style.display`属性,使其在指定时间间隔后自动切换。同时,确保在最后一张图片后返回到第一张,形成循环。 5...

    JS简单实现仿网页图片轮播

    至此,我们已经创建了一个基本的JavaScript图片轮播组件,具备自动切换和手动切换的功能。你可以根据实际需求调整切换时间、添加过渡效果,或者优化交互体验,如添加左右箭头控制切换,增加触摸滑动支持等。 总的来...

    ft-carousel.js图片无缝轮播切换代码

    首先,`ft-carousel.js` 插件的核心功能是提供一个平滑、动态的图片切换体验。这种无缝轮播的关键在于,当一张图片即将离开视区时,下一张图片已经在适当的位置准备就绪,使得用户感觉不到图片更换的瞬间,从而创造...

    纯js实现轮播图(3种轮播图).zip

    在前端开发中,轮播图(Carousel)是一种常见的网页元素,用于展示一组可滑动切换的图片或内容。本资源包含纯JavaScript实现的三种不同类型的轮播图,这对于熟悉JavaScript和想要提升前端技能的开发者来说,是一份...

Global site tag (gtag.js) - Google Analytics