|
@@ -2,97 +2,8 @@ import '../css/bootstrap.less';
|
|
|
import 'bootstrap/dist/js/bootstrap.js';
|
|
|
import '../css/public.css';
|
|
|
import '../css/service.css';
|
|
|
-import './public.js'
|
|
|
-(function(){
|
|
|
-
|
|
|
- var $imgBig=$('.ct-img-big'),
|
|
|
- $btnNext=$('.btn-next'),
|
|
|
- $btnPre=$('.btn-pre'),
|
|
|
- $CT = $('.carouselt'),
|
|
|
- $imgSmall=$('.ct-img-small');
|
|
|
- var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
|
|
|
- var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
|
|
|
- // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
|
|
|
- var $firstImg=$imgBig.find('li').first(),
|
|
|
- $lastImg=$imgBig.find('li').last();
|
|
|
- $imgBig.prepend($lastImg.clone());
|
|
|
- $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
|
|
|
- $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
|
|
|
- $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
|
|
|
- var pageIndex = 0 ; //img的下标;
|
|
|
- var isAnimate = false//防止重复点击 上锁
|
|
|
-
|
|
|
- $btnNext.on('click',function(e){
|
|
|
- e.preventDefault();
|
|
|
- playNext();
|
|
|
- setTimeout(function(){
|
|
|
-
|
|
|
- },1500)
|
|
|
- });
|
|
|
- $btnPre.on('click',function(e){
|
|
|
- e.preventDefault();
|
|
|
- playPre();
|
|
|
- setTimeout(function(){
|
|
|
-
|
|
|
- },1500)
|
|
|
- });
|
|
|
-
|
|
|
- $imgSmall.find('li').on('click',function(){
|
|
|
- var smallIdx= $(this).index();
|
|
|
- if(smallIdx>pageIndex){
|
|
|
- playNext(smallIdx-pageIndex)
|
|
|
- }
|
|
|
- else if(smallIdx<pageIndex){
|
|
|
- playPre(pageIndex-smallIdx)
|
|
|
- }
|
|
|
- });
|
|
|
- function playNext(n){
|
|
|
- var idx = n ||1;
|
|
|
- if(isAnimate) return;
|
|
|
- isAnimate = true;
|
|
|
- $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
|
|
|
- //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
|
|
|
- pageIndex = pageIndex+idx;
|
|
|
- if( pageIndex ===$imgLength ){
|
|
|
- $imgBig.css({'left':'-'+$imgWidth+'px'})
|
|
|
- pageIndex = 0;
|
|
|
- }
|
|
|
- isAnimate = false;
|
|
|
- smallImg()
|
|
|
- })
|
|
|
- }
|
|
|
- function playPre(n){
|
|
|
- var idx = n ||1;
|
|
|
- if(isAnimate) return;
|
|
|
- isAnimate = true;
|
|
|
- $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
|
|
|
- pageIndex=pageIndex-idx;
|
|
|
- if(pageIndex<0){
|
|
|
- $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
|
|
|
- pageIndex = $imgLength-1;
|
|
|
- }
|
|
|
- isAnimate = false;
|
|
|
- smallImg()
|
|
|
- })
|
|
|
- }
|
|
|
- //设置小图的class
|
|
|
- function smallImg(){
|
|
|
- $imgSmall.children()
|
|
|
- .removeClass('active')
|
|
|
- .eq(pageIndex) .addClass('active')
|
|
|
- }
|
|
|
- //自动轮播 鼠标进入鼠标离开
|
|
|
- var timer =setInterval(function(){
|
|
|
- playNext()
|
|
|
- },2000);
|
|
|
- $CT.hover(function(){
|
|
|
- clearInterval(timer)
|
|
|
- },function(){
|
|
|
- timer =setInterval( function(){
|
|
|
- playNext()
|
|
|
- },2000)
|
|
|
- });
|
|
|
-})();
|
|
|
+import './public.js';
|
|
|
+import './main_public.js'
|
|
|
|
|
|
|
|
|
|