xml地图|网站地图|网站标签 [设为首页] [加入收藏]

jquery首页轮播,用jQuery实现优酷首页轮播图

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:194 发布时间:2019-08-21
摘要:思路其实特别简单,正是当点击图片上边包车型大巴圆点只怕图片两侧的箭头时,让想要看到的图形走到它的职位,然后当前的图样和想要看到的图样依据二个大方向移动就可以了 ▓▓

思路其实特别简单,正是当点击图片上边包车型大巴圆点只怕图片两侧的箭头时,让想要看到的图形走到它的职位,然后当前的图样和想要看到的图样依据二个大方向移动就可以了

▓▓▓▓▓▓ 大致介绍

  观看了一个轮播图的笔触,就想的谐和动手实行一下,总体来讲用jQuery完结起来大约多了

  假使对代码中动用的不二等秘书技有问号,能够参照作者的jQuery学习之路(持续立异),里面有教学;或许你和作者一样学习jQuery不久,那您能够看看自家的jQuery小案例(持续更新),相互学习!

  预览:优酷首页轮播图

 

你大概感兴趣的稿子:

  • jquery完结左右轮播图效果
  • JQuery和html css达成带小圆点和左右按键的轮播图实例
  • jquery版轮播图效果和extend扩张
  • jQuery制作全屏宽度固定中度轮播图(实例批注)
  • jquery达成左右滑动式轮播图
  • jQuery达成三个简约的轮播图
  • jQuery按需加载轮播图(web前端质量优化)
  • jquery实现轮播图效果
  • jQuery无缝轮播图代码
  • jquery 完结轮播图详解及实例代码
  • 原生Javascript和jQuery做轮播图轻便例子
  • jQuery达成简洁的轮播图效果实例
  • jquery写出PC端轮播图实例

▓▓▓▓▓▓ 点击小圆点

  图片切换的格局都以一律的可是要小心,当点击小圆点时要精晓图片自动切换的电磁照拂计时器,在图纸切换达成后,在安装自动切换的电磁打点计时器

图片 1

 1     function lunbo(){
 2         $cir.click(function(){
 3             clearInterval(timer);
 4             var index = $(this).index();
 5 
 6             if(index > nowPic){
 7                 // 点击的值大于当前的值
 8                 $pic.eq(index).css('left',$picW);
 9                 $pic.eq(nowPic).animate({left:-$picW},400);
10             }else if(index < nowPic){
11                 // 点击的值小于当前的值
12                 $pic.eq(index).css('left',-$picW);
13                 $pic.eq(nowPic).animate({left:$picW},400);
14             }
15 
16             $pic.eq(index).animate({left:0},400,function(){
17                 timer = setInterval(function(){
18                     auto();
19                 },3000);
20             });
21             nowPic = index;
22             // 设置当前图片的圆点的样式
23             $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
24         });
25     }

View Code

 

 

下一场大家用jQuery来安装开始图片的岗位和小圆点的岗位

▓▓▓▓▓▓ 点击箭头

  当点击箭头时,我们为了防范客户数十次接连的点击,所以设置了canClick这一个全局变量,当点击了箭头时,要首先判别是还是不是有为成功的卡通即canClick是否为true,假设为true,就将canCilck设置为false,幸免重复点击箭头,然后开展图纸切换的卡通片,一样不要忘了掌握停车计时器,最终当切换图片的卡通完结时,animate()方法的回调函数实施,将canClick设置为true

图片 2

 1     // 点击左箭头
 2     $oLeft.click(function(){
 3 
 4         if(canClick){
 5             clearInterval(timer);
 6             canClick = false;
 7             var index = nowPic - 1;
 8             if(index < 0){
 9                 index = 4;
10             }else if(index > 4){
11                 index = 0;
12             }
13             $pic.eq(index).css('left',-$picW);
14             $pic.eq(nowPic).animate({left:$picW}, 400);
15             $pic.eq(index).animate({left:0}, 400,function(){
16                 canClick = true;
17                 timer = setInterval(function(){
18                     auto();
19                 },3000);
20             });
21 
22             nowPic = index;
23             // 设置当前图片的圆点的样式
24             $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
25         }
26     })

View Code 图片 3

 1     // 点击右箭头
 2     $oRight.click(function(){
 3 
 4         if(canClick){
 5             clearInterval(timer);
 6             canClick = false;
 7             var index = nowPic   1;
 8             if(index < 0){
 9                 index = 4;
10             }else if(index > 4){
11                 index = 0;
12             }
13             $pic.eq(index).css('left',$picW);
14             $pic.eq(nowPic).animate({left:-$picW}, 400);
15             $pic.eq(index).animate({left:0}, 400,function(){
16                 canClick = true;
17                 timer = setInterval(function(){
18                     auto();
19                 },3000);
20             });
21 
22             nowPic = index;
23             // 设置当前图片的圆点的样式
24             $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
25         }
26     })

View Code

 

 

见状了叁个轮播图的思绪,就想的亲善动手实践一下,总体来讲用jQuery完毕起来大约多了

用jQuery完毕优酷首页轮播图,jquery首页轮播

点击小圆点

▓▓▓▓▓▓ 自动轮播

  先来探问定义的全局变量

图片 4

 1     var $cir = $('.btn li');
 2     var $pic = $('.picture li');
 3     var $picW = $pic.width();
 4     var $oLeft = $('#left');
 5     var $oRight = $('#right');
 6 
 7     // 当前图片
 8     var nowPic = 0;
 9     // 防止用户连续的点击
10     var canClick = true;
11     // 定时器
12     var timer = null;

View Code

  

  设置nowPic是为着记录当前呈现的图样,因为这一个轮播图一共有三种触发图片切换的不二秘诀,所以这么些变量是八个章程要共享的

  设置canClick变量是为了防备顾客在图纸切换动画效果还未到位的时候在进展点击

 

图片 5

 1     // 设置定时器自动切换
 2     timer = setInterval(function(){
 3         auto();
 4     },2000);
 5 
 6     //自动切换 
 7     function auto(){
 8         var index = nowPic   1;
 9         if(index < 0){
10             index = 4;
11         }else if(index > 4){
12             index = 0;
13         }
14         $pic.eq(index).css('left',$picW);
15         $pic.eq(nowPic).animate({left:-$picW}, 400);
16         $pic.eq(index).animate({left:0}, 400);
17 
18         nowPic = index;
19         // 设置当前图片的圆点的样式
20         $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
21     }

View Code

 

先来看看定义的全局变量

▓▓▓▓▓▓ 基本结构与体制

  

图片 6

 1     <div class="lunbo">
 2         <div class="picture">
 3             <ul>
 4                 <li><img src="img/1.jpg"></li>
 5                 <li><img src="img/2.jpg"></li>
 6                 <li><img src="img/3.jpg"></li>
 7                 <li><img src="img/4.jpg"></li>
 8                 <li><img src="img/5.jpg"></li>
 9             </ul>
10         </div>
11         <ul class="btn">
12             <li id="active"><div></div></li>
13             <li><div></div></li>
14             <li><div></div></li>
15             <li><div></div></li>
16             <li><div></div></li>
17         </ul>
18         <div id="left"><img src="img/left.png"></div>
19         <div id="right"><img src="img/right.png"></div>
20     </div>

View Code 图片 7

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 .lunbo{
 6     width: 100%;
 7     height: 410px;
 8     position: relative;
 9     text-align: center;
10 
11 }
12 .picture{
13     width: 1190px;
14     height: 480px;
15     position: absolute;
16     top: 0;
17     left: 88px;
18     overflow: hidden;
19 }
20 .picture li{
21     width: 1190px;
22     height: 410px;
23     margin: 0 auto;
24     list-style-type: none;
25     margin-top: 70px;
26     position: absolute;
27     overflow: hidden;
28     top: ;
29     left: ;
30 
31 }
32 .picture  img{
33     cursor: pointer;
34 }
35 .btn{
36     display: block;
37     width: 150px;
38     height: 30px;
39     position: absolute;
40     top: 460px;
41     left: 130px;
42 }
43 
44 .btn li{
45     display: block;
46     width: 10px;
47     height: 10px;
48     background-color:white;
49     list-style-type: none;
50     position: absolute;
51     top: 0px;
52     left: 0px;
53     border-radius: 10px;
54     cursor: pointer;
55 }
56 #active{
57     background-color: #03A9F4;
58 }
59 .btn li:hover{
60     background-color:#9e9e9e;
61 }
62 
63 #left{
64     position: absolute;
65     top: 240px;
66     left: 90px;
67     cursor: pointer;
68 }
69 #right{
70     position: absolute;
71     top: 240px;
72     left: 1220px;
73     cursor: pointer;
74 }

View Code

 

  然后我们用jQuery来安装初叶图片的职位和小圆点的地点

图片 8

 1     function setCirPos(){
 2         // 设置圆点的位置
 3         $cir.each(function(){
 4             $(this).css({
 5                 left:$(this).index()*25   500
 6             })
 7         });
 8         // 设置刚开始不显示的图片的位置
 9         $pic.slice(1).each(function(){
10             $(this).css({
11                 left:$picW
12             })
13         })
14     }

View Code

// 点击左箭头
 $oLeft.click(function(){
 if(canClick){
  clearInterval(timer);
  canClick = false;
  var index = nowPic - 1;
  if(index < 0){
  index = 4;
  }else if(index > 4){
  index = 0;
  }
  $pic.eq(index).css('left',-$picW);
  $pic.eq(nowPic).animate({left:$picW}, 400);
  $pic.eq(index).animate({left:0}, 400,function(){
  canClick = true;
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 设置当前图片的圆点的样式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }
 })


// 点击右箭头
 $oRight.click(function(){
 if(canClick){
  clearInterval(timer);
  canClick = false;
  var index = nowPic   1;
  if(index < 0){
  index = 4;
  }else if(index > 4){
  index = 0;
  }
  $pic.eq(index).css('left',$picW);
  $pic.eq(nowPic).animate({left:-$picW}, 400);
  $pic.eq(index).animate({left:0}, 400,function(){
  canClick = true;
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 设置当前图片的圆点的样式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 }
 })

▓▓▓▓▓▓ 总结

  那些功用完毕起来很简短,正是刚起首并未想到完结的笔触(笨)。

 

▓▓▓▓▓▓ 大概 介绍 看到了贰个轮播图的思路,就想的大团结入手推行一下,总体来说用jQ...

图表切换的主意都以同一的不过要稳重,当点击小圆点时要精晓图片自动切换的沙漏,在图纸切换完毕后,在设置自动切换的机械漏刻

 

function setCirPos(){
 // 设置圆点的位置
 $cir.each(function(){
  $(this).css({
  left:$(this).index()*25   500
  })
 });
 // 设置刚开始不显示的图片的位置
 $pic.slice(1).each(function(){
  $(this).css({
  left:$picW
  })
 })
 }

▓▓▓▓▓▓ 思路

  思路其实非常轻松,正是当点击图片上边包车型客车圆点或许图片两侧的箭头时,让想要看到的图形走到它的地方,然后当前的图样和想要看到的图片依据三个大方向移动就足以了

  举个例子:我们点击第七个小圆点,让第四个图片跑到当下图片的后边,然后一并向左运动

  图片 9

   当然了,如若你想要看前边的图形,让图片先跑到近年来图片的左边手,然后和日前图片一齐向右运动

 

安装nowPic是为着记录当前显示的图片,因为那一个轮播图一共有二种触发图片切换的法子,所以这么些变量是四个情势要分享的

例如:大家点击第多少个小圆点,让第七个图片跑到如今图片的背后,然后一并向左运动

概况介绍

<div class="lunbo">
 <div class="picture">
  <ul>
  <li><img src="img/1.jpg"></li>
  <li><img src="img/2.jpg"></li>
  <li><img src="img/3.jpg"></li>
  <li><img src="img/4.jpg"></li>
  <li><img src="img/5.jpg"></li>
  </ul>
 </div>
 <ul class="btn">
  <li id="active"><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
 </ul>
 <div id="left"><img src="img/left.png"></div>
 <div id="right"><img src="img/right.png"></div>
 </div>


*{
 margin: 0;
 padding: 0;
}
.lunbo{
 width: 100%;
 height: 410px;
 position: relative;
 text-align: center;

}
.picture{
 width: 1190px;
 height: 480px;
 position: absolute;
 top: 0;
 left: 88px;
 overflow: hidden;
}
.picture li{
 width: 1190px;
 height: 410px;
 margin: 0 auto;
 list-style-type: none;
 margin-top: 70px;
 position: absolute;
 overflow: hidden;
 top: ;
 left: ;
}
.picture img{
 cursor: pointer;
}
.btn{
 display: block;
 width: 150px;
 height: 30px;
 position: absolute;
 top: 460px;
 left: 130px;
}
.btn li{
 display: block;
 width: 10px;
 height: 10px;
 background-color:white;
 list-style-type: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border-radius: 10px;
 cursor: pointer;
}
#active{
 background-color: #03A9F4;
}
.btn li:hover{
 background-color:#9e9e9e;
}
#left{
 position: absolute;
 top: 240px;
 left: 90px;
 cursor: pointer;
}
#right{
 position: absolute;
 top: 240px;
 left: 1220px;
 cursor: pointer;
}
function lunbo(){
 $cir.click(function(){
  clearInterval(timer);
  var index = $(this).index();
  if(index > nowPic){
  // 点击的值大于当前的值
  $pic.eq(index).css('left',$picW);
  $pic.eq(nowPic).animate({left:-$picW},400);
  }else if(index < nowPic){
  // 点击的值小于当前的值
  $pic.eq(index).css('left',-$picW);
  $pic.eq(nowPic).animate({left:$picW},400);
  }
  $pic.eq(index).animate({left:0},400,function(){
  timer = setInterval(function(){
   auto();
  },3000);
  });
  nowPic = index;
  // 设置当前图片的圆点的样式
  $cir.eq(nowPic).attr('id','active').siblings().attr('id','');
 });
 }

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:jquery首页轮播,用jQuery实现优酷首页轮播图

关键词: 68399皇家赌场

最火资讯