$(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; //刷新子页面
}
});
}
});
// ==========================================================================//
});
原文:http://www.cnblogs.com/hgonlywj/p/4842725.html