$(document).ready(function(){ //轮播图 // window.onresize = function() { // // window.location.reload(); // console.log("1"); // }; "use strict"; window.onresize = function() { window.location.reload(); }; var slideShow = $(".slideShow"), //获取最外层框架的名称 ul = slideShow.find("ul"), showNumber = slideShow.find(".showNav span"),//获取按钮 oneWidth = slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度 // console.log(oneWidth); var timer = null; //定时器返回值,主要用于关闭定时器 var iNow = 0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0 showNumber.on("click", function () { //为每个按钮绑定一个点击事件 $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉 var index = $(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值 iNow = index; ul.animate({ // "left": -oneWidth * iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定 "left": -oneWidth * iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定 }); // console.log(iNow); // console.log(-oneWidth * iNow); }); timer = setInterval(function () { //打开定时器 iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片 if (iNow > showNumber.length - 1) { //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始 iNow = 0; } showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click }, 5000); //2000为轮播的时间 // }) $(".container_nav a").click(function(e){ e.preventDefault(); $(this).addClass("selected"); $(this).siblings().removeClass("selected"); var c = $(this).html(); // alert(a); if(c == "跟单"){ // alert("跟单"); // console.log("跟单"); $(".nav_contain>div:first-child").addClass("active"); $(".nav_contain>div:not(:first-child)").removeClass("active"); }else if(c == "工艺"){ // alert("工艺"); // console.log("工艺"); $(".nav_contain div:nth-child(2)").addClass("active"); $(".nav_contain div:not(:nth-child(2))").removeClass("active"); }else if(c == "质检"){ // alert("质检"); // console.log("质检") $(".nav_contain div:nth-child(3)").addClass("active"); $(".nav_contain div:not(:nth-child(3))").removeClass("active"); }else if(c == "加工"){ // alert("加工"); // console.log("加工") $(".nav_contain div:nth-child(4)").addClass("active"); $(".nav_contain div:not(:nth-child(4))").removeClass("active"); }else if(c == "物流"){ // alert("物流"); // console.log("物流") $(".nav_contain div:nth-child(5)").addClass("active"); $(".nav_contain div:not(:nth-child(5))").removeClass("active"); } }); //中英文之间的转化 $("#eng").click(function(){ $(".footer_title p:first-child").html("Fujian Shengteng Knltting Textlle Co.,Ltd."); $(".footer_top li:first-child").html("Contacts:LINXUEGUI (General Manager)"); $(".footer_top li:nth-child(2)").html("Tel:+86 0591-28761238"); $(".footer_top li:nth-child(3)").html("Mobile:13599097555"); $(".footer_top li:last-child").html("Fax:+86 0591-28761296"); $(".footer_bottom li:first-child").html("E-mail:fjshengteng@163.com"); $(".footer_bottom li:last-child").html("Add:shenjutengda,Songxia Town,Changle City,Fujian Province,China"); $(this).css("background","#5E97F5"); $("#chn").css("background","transparent"); }); $("#chn").click(function(){ $(".footer_title p:first-child").html("福建升腾针纺有限公司"); $(".footer_top li:first-child").html("联系人:林雪贵(总经理)"); $(".footer_top li:nth-child(2)").html("手机号码:13599097555"); $(".footer_top li:nth-child(3)").html("电话:0591-28761238"); $(".footer_top li:last-child").html("传真:0591-28761296"); $(".footer_bottom li:first-child").html("邮箱:fjshengteng@163.com"); $(".footer_bottom li:last-child").html("公司地址:福建省长乐市松下镇龙纺工业区"); $(this).css("background","#5E97F5"); $("#eng").css("background","transparent"); }); $(".swiper-slide").mouseover(function(){ //放大图片 $(this).css({"transform":"scale(1.1)","transition":"all .2s linear"}); }).mouseout(function(){ //恢复正常 $(this).css({"transform":"scale(1)","transition":"all .2s linear"}); }); var swiper = new Swiper('.swiper-container', { slidesPerView: 4.6, spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true, }, }); });