1.輪播的實現原理是怎樣的（jquery）？
20170330_160448.gif
- 先簡單想想要實現上面的效果html是應該如何寫：
<div class="carousel">//容器就是看到的可視區域的大小
<ul class="ct-img-big clear">//用li包裹好圖片
<li data-index=0 ><a href=""></a></li>//舉例下面五個li都一樣
<li data-index=1 ></li>
<li data-index=2 ></li>
<li data-index=3 ></li>
<li data-index=4 ></li>
<li data-index=5 ></li>
</ul>
<a class="btn btn-next" href="">></a> //倆個按鈕
<a class="btn btn-pre" href=""><</a>
<ul class="ct-img-small clear">可視區里的小圖片用li包裹好img
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
- 寫完html在想想css如何實現一個靜態的滾動（主要部分）：
.carousel{
position:relative;//可視區相對定位；
overflow: hidden;//因為下面的li浮動到一排，要把可視區的外的圖片隱藏（重點）
}
.ct-img-big{
position:absolute;//大圖的位置相對可視區絕對定位
}
.ct-img-big li{
float: left;//圖片排在一排（別忘了清浮動）
}
.btn{
position: absolute;//根據可視區去調整按鈕的位置
}
.ct-img-small{
position:absolute; //跟大圖類似但要把小圖都放在可視區里
}
.ct-img-small li{
float: left;
}
寫完html跟css得到了如下的狀態；
QQ截圖20170330161752.jpg
-
想想圖片是如何跟動起來的
QQ截圖20170327193441.jpg
簡單敘述上面的圖片的意思：
1.當點擊的下一張圖片時通過改變ul的容器的left位置切換下一張圖片；比如上圖剛開始可視區看到的時1，點擊按鈕下一張改變ul的位置（圖片的大小為200px）,left:-200px;可視區變成第2張;
2.問題來了當可視區為第四張圖片時再點下一張時沒有圖片了可視區顯示白；而我們想顯示的時第一張圖；怎么辦？
3.所以我們在后面添加第一張圖；當點擊下一張時，就會顯示第一張圖；這時在改變ul的left的位置，把這個ul原始的第一張圖展示在可視區里；這樣每次到第四張圖時再點擊就會通過ul的left重新回到第一張圖；
4：點擊上一張圖道理也是一樣給第一張圖前面添加最后一張圖；再次不在墜述；
- 看下js怎么寫：
var $imgBig=$('.ct-img-big'),
$btnNext=$('.btn-next'),
$btnPre=$('.btn-pre'),
$CT = $('.carousel'),
$imgSmall=$('.ct-img-small');
$imgWidth=$imgBig.find('li').width();//獲取圖片的寬度；
$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()
})
$btnPre.on('click',function(e){
e.preventDefault()
playPre()
})
$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)
})
代碼中要注意幾個地方：
1.防止重復點擊；要設置lock;
2.改變的left的大小要算好；
3.點擊小圖要跟大圖的下標同步；
2. 再看下怎么實現漸變的輪播：
20170330_164542.gif
- 首先也得先寫好一個靜態的漸變的輪播
跟無縫滾動差不多，只是大圖圖片不用并列排成一排；而是要重疊的放在一起；通過改變的display的顯示出來
.ct-img-big{
position:relative;
}
.ct-img-big li{
position:absolute;
display: none;//都重合在一起并且隱藏起來；
}
如何淡入淡出？
利用.fadeOut()淡出，.fadeIn()淡入
參考fadeOut如何確定播放那張圖
next: (pageIndex+1)% $imgLength
pre: (pageIndex+$imgLength-1)%$imgLength)
- 來看下js代碼
<script>
var $imgBig=$('.ct-img-big'),
$btnNext=$('.btn-next'),
$btnPre=$('.btn-pre'),
$imgSmall=$('.ct-img-small'),
$imgs=$imgBig.children(),
$CT = $('.carousel'),
$imgLength=$imgBig.children().length;//獲取圖片的長度；
var pageIndex = 0 ; //img的下標；
var isAnimate = false//防止重復點擊 上鎖
$btnNext.on('click',function(e){
e.preventDefault();//阻止默認事件刷新
playNext()
})
$btnPre.on('click',function(e){
e.preventDefault()
playPre()
})
$imgSmall.find('li').on('click',function(){
var idx= $(this).index();
Play(idx)
})
Play(0);//執行函數時可視區顯示為第一張圖；
function Play(idx){//執行函數時可視區顯示為第一張圖；
if(isAnimate) return;
isAnimate = true;
$imgs.eq(pageIndex).fadeOut(400);
$imgs.eq(idx).fadeIn(400,function(){
isAnimate = false;
})
pageIndex = idx;//0
smallImg()
}
function playNext(){
Play((pageIndex+1)% $imgLength)//帶個數試試~ 當點擊按鈕下一張時為play(1)
}
function playPre(){
Play((pageIndex+$imgLength-1)%$imgLength)
}
//設置小圖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)
})
</script>
3.看下css怎么實現輪播？
20170330_172208.gif
- 重點1：
.ct-img-big li
{
width:400px;
height: 200px;
float: left; //把圖片橫排排列起來；
}
.wrap
{
width: 400px;
height: 200px;
overflow: hidden;//隱藏可視區外的圖片
border:1px solid;
margin: 0 auto;
}
- 重點2：
關鍵幀的使用：
@keyframes animation/*關鍵幀*/
{
0%{left:0px;}
20%{left:-400px;}
40%{left:-800px;}
60%{left:-1200px;}
80%{left:-1600px;}
100%{left:-2000px;}
}
.ct-img-big
{
width: 2400px;
height: 200px;
position: relative;
left:0px;
animation-name:animation;/*指定由@keyframes描述的關鍵幀名稱。*/
animation-iteration-count:infinite;/*置動畫重復次數， 可以指定infinite無限次重復動畫*/
animation-duration: 18s;/*設置動畫一個周期的時長。*/
animation-direction:alternate;/*設置動畫在每次運行完后是反向運行還是重新回到開始位置重復運行。normal | reverse | alternate | alternate-reverse*/
}
- 代碼如下：
<body>
<style>
ul,li{
padding:0px;
margin: 0px;
list-style: none;
}
.wrap
{
width: 400px;
height: 200px;
overflow: hidden;
border:1px solid;
margin: 0 auto;
}
.ct-img-big
{
width: 2400px;
height: 200px;
position: relative;
left:0px;
animation-name:animation;/*指定由@keyframes描述的關鍵幀名稱。*/
animation-iteration-count:infinite;/*置動畫重復次數， 可以指定infinite無限次重復動畫*/
animation-duration: 18s;/*設置動畫一個周期的時長。*/
animation-direction:alternate;/*設置動畫在每次運行完后是反向運行還是重新回到開始位置重復運行。normal | reverse | alternate | alternate-reverse*/
}
.ct-img-big li
{
width:400px;
height: 200px;
float: left;
}
@keyframes animation/*關鍵幀*/
{
0%{left:0px;}
20%{left:-400px;}
40%{left:-800px;}
60%{left:-1200px;}
80%{left:-1600px;}
100%{left:-2000px;}
}
</style>
</head>
<body>
<div class="wrap">
<ul class="ct-img-big clear">
<li data-index=0 ><a href=""></a></li>
<li data-index=1 ><a href=""></a></li>
<li data-index=2 ><a href=""></a></li>
<li data-index=3 ><a href=""></a></li>
<li data-index=4 ><a href=""></a></li>
<li data-index=5 ><a href=""></a></li>
</ul>
</div>
</body>
</html>
4. 看看原生js怎么實現無縫滾動
20170330_233937.gif
- 重點1：
大圖使用的定位重疊在一起；通過運動框架改變的高度和z-index;來實現大圖切換的；
#yd{
overflow:hidden;
}
.big{
position:relative；
}
.big li{
position:absolute;
top:0px;
left:0px;
overflow:hidden;
}
- 重點2 ：
小圖是浮動；改變li中的left距離實現小圖切換；
.small li{
float:left;
}
- 難點1:
運動框架
function Move(obj,attr,iTarget)
{
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var cur=0
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100)
}else
{
cur=parseInt(getStyle(obj,attr))
}
var speed =(iTarget-cur)/6
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(cur==iTarget)
{
clearInterval(obj.timer)
}else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity=(cur+speed)/100
}else{
obj.style[attr]=cur+speed+'px'
}
}
},30)
}
- 難點2:
注意大小圖的位置，小圖顯示不僅要跟大圖相對應；還要在中間顯示；
所以要通過判斷去改變小圖left的大小；下一張時，在倒數第2個圖片是距離不一樣；在上一張時，倒數第2張又跟其他的一樣；所以注意left的距離設定
if(now==0)//根據大圖位置改變小圖位置；
{
Move(oUlSmall,'left',0)
}else if(now==aLiSmall.length-1)
{
Move(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth)
}else{
Move(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth)
}
- js全代碼
//封裝了一個運動框架 和一個getStyle函數
<script>
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name]
}else
{
return getComputedStyle(obj,false)[name]
}
}
function Move(obj,attr,iTarget)
{
clearInterval(obj.timer)
obj.timer=setInterval(function(){
var cur=0
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100)
}else
{
cur=parseInt(getStyle(obj,attr))
}
var speed =(iTarget-cur)/6
speed=speed>0?Math.ceil(speed):Math.floor(speed)
if(cur==iTarget)
{
clearInterval(obj.timer)
}else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')'
obj.style.opacity=(cur+speed)/100
}else{
obj.style[attr]=cur+speed+'px'
}
}
},30)
}
var oDiv = document.getElementById('yd')
var oBtnPrev =document.getElementsByClassName('prev')[0]
var oBtnNext =document.getElementsByClassName('next')[0]
var oLeft =document.getElementsByClassName('left')[0]
var oRight =document.getElementsByClassName('right')[0]
var oSmall=document.getElementsByClassName('small')[0]
var oUlSmall=oSmall.getElementsByTagName('ul')[0]
var aLiSmall=oSmall.getElementsByTagName('li')//小圖li
var oBig=document.getElementsByClassName('big')[0]
var aLiBig=oBig.getElementsByTagName('li')//大圖li
var nowZIndex=2;
var now=0
oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+300+'px'//小圖容器寬度；
//左右按鈕
oLeft.onmouseover = oBtnPrev.onmouseover = function()
{
Move(oBtnPrev,'opacity',100)
}
oLeft.onmouseout=oBtnPrev.onmouseout = function()
{
Move(oBtnPrev,'opacity',0)
}
oRight.onmouseover= oBtnNext.onmouseover = function()
{
Move(oBtnNext,'opacity',100)
}
oRight.onmouseout=oBtnNext.onmouseout = function()
{
Move(oBtnNext,'opacity',0)
}
//小圖切換
for(var i=0;i<aLiSmall.length;i++)
{
aLiSmall[i].index=i
aLiSmall[i].onclick=function()
{
if(this.index==now)return;
now=this.index
Tab()
}
if(this.index!=now)
{
Move(this,'opacity',60)
}
}
function Tab()//圖片切換函數；
{
aLiBig[now].style.zIndex=nowZIndex++;//改變大圖的z-index的大小切換圖片；
for(var i=0;i<aLiSmall.length;i++)
{
Move(aLiSmall[i],'opacity',60)
}
Move(aLiSmall[now],'opacity',100)
aLiBig[now].style.height=0
Move(aLiBig[now],'height','500')//改變高度實現切換；高度0-500；
if(now==0)//根據大圖位置改變小圖位置；
{
Move(oUlSmall,'left',0)
}else if(now==aLiSmall.length-1)
{
Move(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth)
}else{
Move(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth)
}
}
//對于兩個邊界進行設定
oBtnPrev.onclick= function()
{
now--;
if(now==-1)
{
now=aLiSmall.length-1
}
Tab()
}
oBtnNext.onclick = function()
{
now++;
if(now==aLiSmall.length)
{
now=0
}
Tab()
}
var timer=setInterval(oBtnNext.onclick,2000)
oDiv.onmouseover= function()
{
clearInterval(timer)
}
oDiv.onmouseout= function()
{
timer=setInterval(oBtnNext.onclick,2000)
}
</script>
附上以上4個輪播的github地址
jquery輪播
jquery淡入淡出錄播
css輪播
原生js輪播
希望對各位朋友對輪播這塊有所幫助~~~
版權歸饑人谷__楠柒所有，如要轉載請請注明出處~
