propertyRight.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import '../../css/bootstrap.less';
  2. import 'bootstrap/dist/js/bootstrap.js';
  3. import '../../css/public.css';
  4. import '../../css/main_banner.css';
  5. import '../../js/public.js';
  6. import '../../js/main_banner.js';
  7. import '../../css/service/propertyRight.css';
  8. $(function(){
  9. $('.propery_imgs ul li').eq(0).show().siblings().hide();
  10. $('.propery_list ol li').click(function(){
  11. var olt=$(this).index();
  12. $(this).addClass('that').siblings().removeClass('that');
  13. $('.propery_imgs ul li').eq(olt).fadeIn(500).siblings().fadeOut(500);
  14. })
  15. //倒计时
  16. function GetRTime(){
  17. var EndTime= new Date('2017/10/01 00:00:00');
  18. var NowTime = new Date();
  19. var t =EndTime.getTime() - NowTime.getTime();
  20. var d=Math.floor(t/1000/60/60/24);
  21. var s=Math.floor(t/1000%60);
  22. document.getElementById("t_d").innerHTML = d;
  23. //document.getElementById("t_d").innerHTML = s ;
  24. var timet=$('#t_d').text();
  25. if(timet>=10){
  26. $('#t_d').css({"fontSize":"170px","top":"150px","left":"90px"})
  27. }
  28. if(timet<0){
  29. clearInterval(times);
  30. $('#t_d').text('已结束');
  31. $('#t_d').css({"fontSize":"50px","color":"#cccccc","top":"220px","left":"120px"})
  32. }
  33. }
  34. var times = setInterval(GetRTime,0);
  35. //软著动态上下滚动
  36. var speed=40;
  37. var slide=document.getElementById("slide");
  38. var slide2=document.getElementById("slide2");
  39. var slide1=document.getElementById("slide1");
  40. slide2.innerHTML=slide1.innerHTML;
  41. function Marquee(){
  42. if(slide2.offsetTop-slide.scrollTop<=0)
  43. slide.scrollTop-=slide1.offsetHeight;
  44. else{
  45. slide.scrollTop++;
  46. }
  47. }
  48. var MyMar=setInterval(Marquee,speed)
  49. slide.onmouseover=function(){clearInterval(MyMar)}
  50. slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
  51. //logo轮播
  52. var htmlwidth=$(document).width();
  53. $(".btn_div>div").width((htmlwidth-1200)/2);
  54. $(".leftdiv").css({"left":-(htmlwidth-1200)/2});
  55. $(".rightdiv").css({"right":-(htmlwidth-1200)/2});
  56. var $imgBig=$('.ct_img_big'),
  57. $btnNext=$('.btn_next1'),
  58. $btnPre=$('.btn_pre1'),
  59. $CT = $('.carousel'),
  60. $imgSmall=$('.ct_img_small');
  61. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  62. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  63. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  64. var $firstImg=$imgBig.find('li'),
  65. $lastImg=$imgBig.find('li');
  66. $imgBig.prepend($lastImg.clone());
  67. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  68. $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
  69. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  70. var pageIndex = 0 ; //img的下标;
  71. var isAnimate = false//防止重复点击 上锁
  72. $btnNext.on('click',function(e){
  73. e.preventDefault();
  74. playNext();
  75. setTimeout(function(){
  76. },1500)
  77. });
  78. $btnPre.on('click',function(e){
  79. e.preventDefault()
  80. playPre();
  81. setTimeout(function(){
  82. },1500)
  83. });
  84. $imgSmall.find('li').on('click',function(){
  85. var smallIdx= $(this).index();
  86. if(smallIdx>pageIndex){
  87. playNext(smallIdx-pageIndex)
  88. }
  89. else if(smallIdx<pageIndex){
  90. playPre(pageIndex-smallIdx)
  91. }
  92. });
  93. function playNext(n){
  94. var idx = n ||1;
  95. if(isAnimate) return;
  96. isAnimate = true;
  97. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
  98. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  99. pageIndex = pageIndex+idx;
  100. if( pageIndex ===$imgLength ){
  101. $imgBig.css({'left':'-'+$imgWidth+'px'})
  102. pageIndex = 0;
  103. }
  104. isAnimate = false;
  105. smallImg()
  106. })
  107. }
  108. function playPre(n){
  109. var idx = n ||1;
  110. if(isAnimate) return;
  111. isAnimate = true;
  112. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
  113. pageIndex=pageIndex-idx;
  114. if(pageIndex<0){
  115. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  116. pageIndex = $imgLength-1;
  117. }
  118. isAnimate = false;
  119. smallImg()
  120. })
  121. }
  122. //设置小图的class
  123. function smallImg(){
  124. $imgSmall.children()
  125. .removeClass('active')
  126. .eq(pageIndex) .addClass('active')
  127. }
  128. })