propertyRight.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. $('.propery_imgs ul li').eq(olt).fadeIn(1000).siblings().fadeOut(1000);
  13. })
  14. //倒计时
  15. function GetRTime(){
  16. var EndTime= new Date('2017/09/20 00:00:00');
  17. var NowTime = new Date();
  18. var t =EndTime.getTime() - NowTime.getTime();
  19. var d=Math.floor(t/1000/60/60/24);
  20. var s=Math.floor(t/1000%60);
  21. document.getElementById("t_d").innerHTML = d + "天";
  22. //document.getElementById("t_d").innerHTML = s ;
  23. var timet=$('#t_d').text();
  24. if(timet<0){
  25. alert(0)
  26. clearInterval(times)
  27. $('#t_d').text('已结束');
  28. $('#t_d').css({"fontSize":"50px","color":"#cccccc","top":"220px","left":"120px"})
  29. }
  30. }
  31. var times = setInterval(GetRTime,0);
  32. var htmlwidth=$(document).width();
  33. $(".btn_div>div").width((htmlwidth-1200)/2);
  34. $(".leftdiv").css({"left":-(htmlwidth-1200)/2});
  35. $(".rightdiv").css({"right":-(htmlwidth-1200)/2});
  36. var $imgBig=$('.ct_img_big'),
  37. $btnNext=$('.btn_next1'),
  38. $btnPre=$('.btn_pre1'),
  39. $CT = $('.carousel'),
  40. $imgSmall=$('.ct_img_small');
  41. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  42. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  43. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  44. var $firstImg=$imgBig.find('li'),
  45. $lastImg=$imgBig.find('li');
  46. $imgBig.prepend($lastImg.clone());
  47. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  48. $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
  49. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  50. var pageIndex = 0 ; //img的下标;
  51. var isAnimate = false//防止重复点击 上锁
  52. $btnNext.on('click',function(e){
  53. e.preventDefault();
  54. playNext();
  55. setTimeout(function(){
  56. },1500)
  57. });
  58. $btnPre.on('click',function(e){
  59. e.preventDefault()
  60. playPre();
  61. setTimeout(function(){
  62. },1500)
  63. });
  64. $imgSmall.find('li').on('click',function(){
  65. var smallIdx= $(this).index();
  66. if(smallIdx>pageIndex){
  67. playNext(smallIdx-pageIndex)
  68. }
  69. else if(smallIdx<pageIndex){
  70. playPre(pageIndex-smallIdx)
  71. }
  72. });
  73. function playNext(n){
  74. var idx = n ||1;
  75. if(isAnimate) return;
  76. isAnimate = true;
  77. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
  78. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  79. pageIndex = pageIndex+idx;
  80. if( pageIndex ===$imgLength ){
  81. $imgBig.css({'left':'-'+$imgWidth+'px'})
  82. pageIndex = 0;
  83. }
  84. isAnimate = false;
  85. smallImg()
  86. })
  87. }
  88. function playPre(n){
  89. var idx = n ||1;
  90. if(isAnimate) return;
  91. isAnimate = true;
  92. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
  93. pageIndex=pageIndex-idx;
  94. if(pageIndex<0){
  95. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  96. pageIndex = $imgLength-1;
  97. }
  98. isAnimate = false;
  99. smallImg()
  100. })
  101. }
  102. //设置小图的class
  103. function smallImg(){
  104. $imgSmall.children()
  105. .removeClass('active')
  106. .eq(pageIndex) .addClass('active')
  107. }
  108. })