轮播器

$(function () {

//浏览器检测,判断是否是IE
	if(!+[1,])
	{
		//alert("这是ie浏览器");
		$(‘.new_Message‘).css(‘top‘, ‘14px‘);	//调整通知栏的位置
		$(‘.stuUser‘).click(function () {
			if ($(‘.stuUser_ul ‘).css(‘display‘) == ‘none‘)
			{
				$(‘.stuUser_ul ‘).css(‘display‘, ‘block‘);
			}
			else
			{
				$(‘.stuUser_ul ‘).css(‘display‘, ‘none‘);
			}
		});

	}
   else {
		//alert("这不是ie浏览器");
		$(‘.stuUser‘).hover(function () {
				$(‘.stuUser_ul ‘).css(‘background‘, ‘#0E78E7‘);
				$(‘.stuUser_ul ‘).css(‘display‘, ‘block‘);
		}, function () {

			$(‘.stuUser_ul ‘).css(‘background‘, ‘#0D5AA5‘);
			$(‘.stuUser_ul ‘).css(‘display‘, ‘none‘);
		});

	}

	$(‘.navigationStyle‘).hover(
		function(){
			var aTag = $(this).children(‘img‘);
			var src = $(aTag).attr("src");
			src = src.slice(0, src.length - 4);
			src += ‘1.jpg‘;
			//alert(src);
			$(aTag).attr("src", src);
		},
		function(){
			var aTag = $(this).children(‘img‘);
			var src = $(aTag).attr("src");
			src = src.slice(0, src.length - 5);
			src += ‘.jpg‘;
			//alert(src);
			$(aTag).attr("src", src);
	});

        //左侧选项卡
	$("#img1").click(function(){
		$(‘.showScreen .tab‘).hide();
		$(‘#showScreenTab1‘).stop(true, true).slideToggle();
	});

	$(‘#img2‘).click(function () {
		$(‘#showCourse‘).hide();
		$(‘.showClass‘).show();
		$(‘.showScreen .tab‘).hide();
		$(‘#showScreenTab2‘).stop(true, true).slideToggle();
		$(‘#info_left‘).hide();		//让导航复原
		$(‘#info_right‘).show();
		initShowImgRotatorCss();	//让5个小图复原
	});

	$(‘#img3‘).click(function () {
		$(‘.showScreen .tab‘).hide();
		$(‘#showScreenTab3‘).stop(true,true).slideToggle();
	});

	$(‘#img4‘).click(function () {
		$(‘.showScreen .tab‘).hide();
		$(‘#showScreenTab4‘).stop(true,true).slideToggle();
	});

	$(‘#img5‘).click(function () {
		$(‘.showScreen .tab‘).hide();
		$(‘#showScreenTab5‘).stop(true,true).slideToggle();
	});

	var item = $(‘.showClassImg‘);
	for (i = 0; i < item.length; i++) {
		item.eq(i).on("click", { number:(i + 1) }, picClick);
	};

	//相应点击课程事件
	function picClick(num)
	{
		$(‘#showCourse‘).show();
		$(‘.showClass‘).hide();
		// <img class="showScreenTab1_img" i="" src="/hgonlywj/Public/Index/img/home_img.jpg">
		var imgSrc = ‘/hgonlywj/Public/Index/img/class_img/class‘+ num.data.number;

		$(‘#imgShow‘).attr(‘src‘, imgSrc + ‘/1.jpg‘);
		//alert(imgSrc);
		var pptNum = 0;				        //初始化显示 为0
		initShowImgRotator(imgSrc, pptNum);		  //初始化轮播图片
		initRotatorClick(imgSrc);		      //初始化轮播器事件

	}

	//初始化滚动的课程小图, pptNum是开始显示ppt的位置
	function initShowImgRotator(imgSrc, pptNum) {
		for (var i = 1 + pptNum; i <= 5 + pptNum; i++) {
			// num = $(‘.rotatorImg‘ + i).attr(‘src‘);
			$(‘.rotatorImg‘ + (i - pptNum)).attr(‘src‘, imgSrc + ‘/loop_img/‘ + i + ".png");	//初始化轮播器的图片
			$(‘.lableImg‘ + (i - pptNum)).text(i);		//设置初始化的图片下面标号

		}
	}

	//将点击的小图显示成为中心的大图,添加事件
	function initRotatorClick (imgSrc) {
		//alert(img.data.src + img.data.nummber + ".png");
		imgSrc += "/show_img/";

		for (var i = 1; i <=5 ; i++) {
			// num = $(‘.rotatorImg‘ + i).attr(‘src‘);
			$(‘.rotatorImg‘ + i).on("click", { src:(imgSrc) , nummber:(i) }, function(img) {
				var imgdir = $(‘.rotatorImg‘ + img.data.nummber).attr(‘src‘);
				var location = imgdir.lastIndexOf("/");
				var img_num = parseInt(imgdir.slice(location + 1));		//获取点击轮播器上面图片的数字
				$(‘#imgShow‘).attr(‘src‘, img.data.src  + img_num + ".jpg");
				initShowImgRotatorCss();
				imgLightShow(img.data.nummber);			//让点击的那个高亮
			});
		}
	}

	function infoLeftOrRightAjax(rotatorImg, funName)
	{
		var courseSrc = $(rotatorImg).attr(‘src‘);
		var courseSrcNum = parseInt(courseSrc.slice(courseSrc.lastIndexOf("class") + 5));	//获取课程编号
		var pptShowNum = parseInt(courseSrc.slice(courseSrc.lastIndexOf("/") + 1));			//获取轮播器中第五个 PPT的编号.
		var showImgSrc = courseSrc.slice(0, courseSrc.lastIndexOf("class") + 6);
		//alert(showImgSrc);

		$.ajax({
				type : ‘post‘,
				url : URL + "/" + funName,
				data : {
					courseSrcNum: courseSrcNum,
					pptShowNum: pptShowNum
				},
				success : function (stat) {
					// document.location.href= URL;		//刷新子页面
					//alert(stat);
					var imgBegin = parseInt(stat);
					if (imgBegin < 0)
						imgBegin = 1;
					initShowImgRotator(showImgSrc, imgBegin);		//改变展示的小图
					isLightShow();
					$(‘#info_left‘).show();
					$(‘#info_right‘).show();

					if (‘leftRoll‘ == funName) {
						if (false == stat.slice(stat.lastIndexOf("/") + 1))		//如果返回0, 就到了第一张.左面的导航去掉
						{
							$(‘#info_left‘).hide();
						}

					}
					else if (‘rightRoll‘ == funName)
					{
						if (false == stat.slice(stat.lastIndexOf("/") + 1))		//如果返回0, 就到了最后一张.右面的导航去掉
						{
							$(‘#info_right‘).hide();
						}

					}

				},
		});
	}

	//初始化小图样式,  复原
	function initShowImgRotatorCss() {
		// alert(‘initShowImgRotatorCss‘);

		for (var i = 1 ; i <= 5; i++) {
			if ($(‘.rotatorImg‘ + i).css(‘width‘) == ‘132px‘)
			{
				var imgLable = ‘.rotatorImg‘ + i;
				// $(imgLable).css(‘width‘, 100).css(‘height‘, 80).css(‘left‘, parseInt($(imgLable).css(‘left‘)) + 13).css(‘top‘, parseInt($(imgLable).css(‘top‘)) + 12).css(‘z-index‘, 0);
				$(imgLable).css(‘width‘, 100).css(‘height‘, 80).css(‘margin‘, ‘0px‘).css(‘z-index‘, 0);
				$(‘.lableImg‘ + i).show();		//设置初始化的图片下面标号
			}
		}
	}

	//让小图高亮
	function imgLightShow(lightNum)
	{
		var imgLable = ‘.rotatorImg‘ + lightNum;
		$(imgLable).css(‘width‘, 132).css(‘height‘, 102).css(‘z-index‘, 1);
		$(imgLable).css(‘margin‘, "-7px 0 0 -13px ");

		$(‘.lableImg‘ + lightNum).hide();
		//alert(lightNum);
	}

	//判断当前图片是否在轮播器中
	function isLightShow()
	{
		var showsrc = $(‘#imgShow‘).attr(‘src‘);
		var pptShowNum = parseInt(showsrc.slice(showsrc.lastIndexOf("/") + 1));			//正在显示的图片ppt编号
		var leftNum = $(‘.lableImg1 ‘).text();
		//var pptleft = parseInt(leftsrc.slice(leftsrc.lastIndexOf("/") + 1));			//轮播器第一个
		var rightNum = $(‘.lableImg5‘).text();
		//var pptright = parseInt(rightsrc.slice(rightsrc.lastIndexOf("/") + 1));		//轮播器最后一个

		// alert(‘正在显示 ppt‘ + pptShowNum);
		// alert(‘第一个 left ‘ + leftNum);
		// alert(‘第一个 right‘ + rightNum);

		if (pptShowNum >= leftNum && pptShowNum <= rightNum)		//当前显示的图片在轮播器中
		{
			// alert(pptShowNum + "在当前轮播器中");
			imgLightShow(pptShowNum - leftNum + 1);			//让他高亮
		}
		else if (pptShowNum < leftNum || pptShowNum > rightNum)		//当前显示的图片不在轮播器中,5个图片就显示正常
		{
			initShowImgRotatorCss();
		}
	}

	//左轮播
	$(‘#info_left‘).click(function () {
		$(‘#info_right‘).show();
		// alert($(‘.rotatorImg1‘).attr(‘src‘));
		initShowImgRotatorCss();
		infoLeftOrRightAjax(‘.rotatorImg1‘, "leftRoll");
	});

	//右轮播
	$(‘#info_right‘).click(function () {
		$(‘#info_left‘).show();
		initShowImgRotatorCss();
		infoLeftOrRightAjax(‘.rotatorImg5‘, "rightRoll");
	});

	function imgProOrNext (rotatorImg, funName) {
		var courseSrc = $(rotatorImg).attr(‘src‘);
		var courseSrcNum = parseInt(courseSrc.slice(courseSrc.lastIndexOf("class") + 5));	//获取课程编号
		var pptShowNum = parseInt(courseSrc.slice(courseSrc.lastIndexOf("/") + 1));			//获取轮播器中第五个 PPT的编号.
		var showImgSrc = courseSrc.slice(0, courseSrc.lastIndexOf("class") + 6);			//地址到  Public/Index/img/class_img/class1 的路径
		//alert(showImgSrc);

		$.ajax({
				type : ‘post‘,
				url : URL + "/" + funName,
				data : {
					courseSrcNum: courseSrcNum,
					pptShowNum: pptShowNum
				},
				success : function (stat) {
					var imgShowNum = parseInt(stat);

					// initShowImgRotator(showImgSrc, imgBegin);		//改变展示的小图

					if (‘showLeftImg‘ == funName)
					{

						if (false == stat.slice(stat.lastIndexOf("/") + 1))		//如果返回0, 就到了第一张.左面的导航去掉
						{
							$(‘#info_left‘).hide();
						}
						else {													//不是第一张就改变大图,向左移一张图片

							$(‘#info_left‘).show();
							$(‘#info_right‘).show();
							$(‘#imgShow‘).attr(‘src‘, showImgSrc + "/show_img/" + imgShowNum + ".jpg");
							var pptLength = parseInt(stat.slice(stat.lastIndexOf("/") + 1));
							//alert(pptLength);
							initShowImgRotatorCss();
							isImgRotatorLeft(imgShowNum, pptLength);
						}

					}
					else if (‘showRightImg‘ == funName)
					{

						if (false == stat.slice(stat.lastIndexOf("/") + 1))		//如果返回0, 就到了最后一张.右面的导航去掉
						{
							$(‘#info_right‘).hide();
						}
						else
						{
							$(‘#info_left‘).show();
							$(‘#info_right‘).show();
							$(‘#imgShow‘).attr(‘src‘, showImgSrc + "/show_img/" + imgShowNum + ".jpg");
							initShowImgRotatorCss();
							isImgRotatorRight(imgShowNum);
						}
					}

				},
		});
	}

	function isImgRotatorLeft(imgShowNum, pptLength)
	{

		var showsrc = $(‘#imgShow‘).attr(‘src‘);
		var pptShowNum = parseInt(showsrc.slice(showsrc.lastIndexOf("/") + 1));			//正在显示的图片ppt编号
		var leftNum = $(‘.lableImg1 ‘).text();
		var rightNum = $(‘.lableImg5‘).text();
		if (pptShowNum >= leftNum && pptShowNum <= rightNum)
		{
			imgLightShow(imgShowNum - leftNum + 1);
		}
		else
		{
			if (pptLength - imgShowNum >= 5)
			{
				var imgSrc = showsrc.slice(0, showsrc.lastIndexOf("class") + 6);
				//alert(imgShowNum);
				initShowImgRotator(imgSrc, imgShowNum - 1);
				imgLightShow(1);
			}
			else
			{
				var imgSrc = showsrc.slice(0, showsrc.lastIndexOf("class") + 6);
				//alert(imgShowNum);

				initShowImgRotator(imgSrc, pptLength - 5);
				imgLightShow(5 - (pptLength - imgShowNum));
			}

		}
	}

	function isImgRotatorRight(imgShowNum)
	{

		var showsrc = $(‘#imgShow‘).attr(‘src‘);
		var pptShowNum = parseInt(showsrc.slice(showsrc.lastIndexOf("/") + 1));			//正在显示的图片ppt编号
		var leftNum = $(‘.lableImg1 ‘).text();
		var rightNum = $(‘.lableImg5‘).text();
		if (pptShowNum >= leftNum && pptShowNum <= rightNum)
		{
			imgLightShow(imgShowNum - leftNum + 1);
		}
		else
		{

			var imgSrc = showsrc.slice(0, showsrc.lastIndexOf("class") + 6);
			//alert(imgShowNum);
			if (imgShowNum - 5 > 0)
			{
				initShowImgRotator(imgSrc, imgShowNum - 5);
				imgLightShow(5);
			}
			else
			{
				initShowImgRotator(imgSrc, 0);
				imgLightShow(imgShowNum);
			}

		}
	}

	$(‘#imgShow‘).click(function(event) {
		//alert(event.clientX + "   " + event.clientY);

		var odiv=document.getElementById(‘imgShow‘);
		var showCourseLeft = odiv.getBoundingClientRect().left;
		var showCourseRight = odiv.getBoundingClientRect().right;
		var showCourseTop = odiv.getBoundingClientRect().top;
		var showCourseBottom = odiv.getBoundingClientRect().bottom;
		var showCourseWidth = showCourseRight - showCourseLeft;

		if (((event.clientX - showCourseLeft) < showCourseWidth/2) )	//向后
		{
			initShowImgRotatorCss();
			$(‘#info_right‘).show();
			imgProOrNext(‘#imgShow‘, ‘showLeftImg‘);

		}
		else if (((event.clientX - showCourseLeft) > showCourseWidth/2))	//向前
		{
			initShowImgRotatorCss();
			$(‘#info_left‘).show();
			imgProOrNext(‘#imgShow‘, ‘showRightImg‘);
		}

	});

	$(‘.messageSub‘).click(function () {
		var name = $(‘#messageName‘).val();
		var email = $(‘#messageEmail‘).val();
		var message = $(‘#messageMessage‘).val();
		var studentNun = $(‘#studentNun‘).val();
		if (message == ‘‘)
			alert(‘pleace add message‘);
		else
		{
			$.ajax({
				type : ‘post‘,
				url : URL + "/sendMessage",
				data : {
					name: name,
					email: email,
					message:message,
					stuNum:studentNun
				},
				success : function (stat) {
					if (stat == ‘true‘)
						//alert(‘success‘);
					document.location.href= URL;		//刷新子页面

				}
			});
		}
	});

// ==========================================================================//

});

  

时间: 2024-12-14 00:43:38

轮播器的相关文章

UISCrollView —— 图片轮播器封装实现(三)——(第三讲)

1.分析 利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可 2. 程序结构 3. 代码具体实现 1>  xib文件 2>  创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib 1>    (如图,设置xib与类关联) 2>  XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

UISCrollView —— 图片轮播器实现(三)——(第二讲)

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1  NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2  NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST

Android高级图片滚动控件,编写3D版的图片轮播器

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说 到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上 还增加了三维立体

ios开发图片轮播器以及定时器小问题

一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: 1 #import "ViewController.h" 2 static CGFloat const imageCount = 5; 3 @interface ViewController ()<UIScrollViewDelegate> 4 /*scrollView*/ 5 @property (nonatomic,weak)UIScrollView *scroll; 6 /*

jQyery实现轮播器

看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用<li>包着并且设置了左浮动. 那么当我们向左移动ul的时候并且移动的距离为<li>的宽度,第二个<li>不就被移动到了<div>的窗口,这样一来图片不就被一张一张显示出来了吗? 接下来我们在设置<div>的属

UIScorllView和UIPageControl的使用实现图片轮播器

首先我们要先建一个project,选择iOS下的第一个Application 中的Single View Application 开始工作已经准备完毕现在我们进入到Main.storyboard拖控件 需要用到的控件有 UIScrollView也就是滚动的那个 UIPageControl也就是图片下面那几个小点 NSTimer就是定时器让其自动换页的 第一步:拖控件连线 在Main.storyboard拖一个UIScrollView放在屏幕上,在UIScrollView下面放一个UIPageCo

图片轮播器

? 1 SB里只需要两个控件: UIScrollView UIPageControl ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 7

UI-图片轮播器

效果图 LoopView.h 1 #import <UIKit/UIKit.h> 2 3 @interface LoopView : UICollectionView 4 5 - (instancetype)initWithUrls:(NSArray <NSURL *> *)urls didSelectedIndex:(void (^)(NSInteger index))selectedIndex; 6 7 @end LoopView.m 1 #import "LoopV