案例總結：基本的焦點輪播效果
HTML：
解析：javascript
一.樣式要點
（1）父元素須要加上overflow:hidden;這樣超出圖片才能不顯現
（2）父元素須要加上position:relative;圖片列表加上position:absolute;讓圖片列表的定位基於父元素
（3）圖片列表的z-index:1;箭頭和按鈕的z-index:2;這樣箭頭和按鈕就會覆蓋在圖片列表上面
（4）箭頭初始是不顯示的，鼠標移進去，箭頭才顯示
/* 默認隱藏箭頭 */ .arrow {display: none;} /* 鼠標移入輪播組件時，顯示箭頭 */ #container:hover .arrow { display: block;}
（5）鼠標移到箭頭上透明度發生變化
.arrow { cursor: pointer; background-color: RGBA(0,0,0,.3); color: #fff;} .arrow:hover { background-color: RGBA(0,0,0,.7);}css
二．js分析
原理：
父元素設置overflow：hidden；讓他超出部分隱藏，再經過設置圖片列表的left值來顯示對應位置的圖片
無限滾動的技巧：滾動到最後1張圖時，向後滾動，立馬把圖片列表拉回第一張圖的位置，在第一張圖往前滾，立馬把圖片列表拉回最後一張圖的位置html
1．封裝函數
這樣的話，
document.getElementById('container');
就能夠寫成$('container');java
2.動態生成按鈕圓點
3.左右箭頭切換
思路：
1）向左，向右切換，每次的差值是一個圖片的寬度，傳參數爲正負一個圖片的寬度
功能類似，能夠封裝成一個函數
2.）問題是咱們怎麼才能判斷咱們當前的圖片是第幾張呢，咱們能夠設定指針爲當前圖片current=1,左擊當current=1時current=slideNum;不然current-1; 右擊當current=slideNum時current=1;
jquery
3.無限滾動效果
原理：每次點擊都要作個判斷，把它拉到正確位置。
切換圖片函數
思路：1.圖片切換，好比從第一張切換到第二張，要把left值變爲-初始left值一張圖片的寬度，
思路：2.圖片切換方向分爲向左和向右，方向不一樣符號相反,向右的話爲負，向左的話爲正;這樣能夠傳入一個參數值
思路：3.向左，向右切換，每次的差值是一個圖片的寬度，傳參數爲正負一個圖片的寬度
思路：4.設定圖片的列表的初始left值爲0，而當圖片在最後一張圖片時向右切換，圖片應該切換到第一張圖片上，當圖片在第一張圖片時向左切換，圖片應該切換到最後一張圖片上，這是固定的，與傳入的參數無關，咱們能夠寫在圖片切換函數裏，圖片切換看的是位置的變化，判斷位置臨界點0和-listimgwidth(slideNum-1)，newleft>0,處於第一張圖上，newleft<-listimgwidth(slideNum-1),處於最後一張圖上
app
4.按鈕高亮函數
（1） 須要提早設置按鈕第一個圓點初始高亮，當前圖片序號對應的小圓點高亮
（2） 對應的按鈕圓點高亮以前，咱們須要把其餘的按鈕按鈕圓點關掉
思路：經過一個for循環去查找lunbo_button下的按鈕，將他的每個元素class爲空
ide
5.按鈕切換圖片
思路：咱們以前箭頭切換圖片是一張一張的切換的，每一張圖片都比前一張圖片的偏移量加了一張圖片的寬度，
咱們首先肯定的是知道當前高亮的圖片的指針，點擊按鈕切換圖片時咱們能夠獲取按鈕的索引值，而後要計算偏移量（指針差*一張圖片）
關鍵點：（1）獲取按鈕的索引值，切換圖片以後不要忘了更新圖片的當前指針
函數
6.自動循環播放
每一個3s切換一次：
能夠設置個定時器，讓它每隔3s運行下右箭頭點擊事件。
鼠標移到圖片上，圖片再也不自動輪播。鼠標從圖片上移除，圖片繼續自動輪播。
寫兩個函數，運行定時器和清除定時器。
當鼠標移到圖片上，清除定時器。
定時器函數。鼠標從圖片上移除，運行定時器函數。
拓展：
問：
這兩個截圖的代碼有什麼區別？
第一張圖的代碼，onmouseover跟onmouseout函數均可以執行（onmouseout函數是圖片自動輪播，onmouseover是鼠標放上去以後中止輪播。）；
第二張圖的代碼，圖片能夠自動輪播，可是鼠標放上去以後，圖片沒有中止輪播。
autoplay（）跟autoplay有什麼區別？
答：
1）若是直接autoplay (); 像下圖
表示的是當即執行，無論你前面的條件有沒有被觸發。
2）可是若是寫成function () { autoplay ();}，
就表示，你前面的條件執行了， 就開始執行函數， 函數就是裏面的autoplay ();
3） 只用autoplay，
相似指針，指向的是autoplay ();這個函數， 就是知足條件下會運行函數。動畫
關鍵點：
把函數名寫全了， 就變成了當即執行
條件式的， 前面都要加function(){你要加的函數}， 或者只寫一個函數名， 後面不要括號（前提是， 你的函數裏面沒有參數）ui
講到這裏這個基本的輪播圖就寫得差很少了，若是想效果好一點，能夠在輪播圖的基礎上加些效果。好比：淡入淡出效果，滑動動畫效果，百葉窗效果，破碎玻璃等等.提示下：把這些效果作成函數，須要時直接調用函數會不會方便點…….
三.附錄
附1(js代碼）：
<script type="text/javascript">
//效果：左右圖片切換，按鈕高亮，點擊按鈕切換
window.onload = function () {
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
var container =$('container');
var list = $('list');
var listimg = $('list').getElementsByTagName('img');
var listimgwidth = listimg[0].offsetWidth;
var slideNum = listimg.length;
var prev = $('prev');
var next = $('next');
var current = 1; //當前圖片指針（從1開始）
list.style.left=0;
//js動態添加按鈕圓點
var dot=document.createElement("ul")
dot.setAttribute("id","lunbo_button");
dot.setAttribute("class","lunbo_button");
for(i=0;i<slideNum;i++){
var dotli=document.createElement("li");
//dotspan.innerText=i+1;//帶數字的按鈕
dot.appendChild(dotli);
}
container.appendChild(dot);
//圖片高亮函數
var buttons= $('lunbo_button').getElementsByTagName('li');
buttons[0].className = 'on';
//小圓點高亮函數,須要注意的是咱們須要先取消全部按鈕的高亮，再讓當前圖片序號對應的小圓點高亮
function showButton() {
for (var i = 0; i < slideNum ; i++) {
buttons[i].className = '';
}
buttons[current-1].className = 'on';
}
//思路：向左，向右切換，每次的差值是一個圖片的寬度，傳參數爲正負一個圖片的寬度
prev.onclick=function(){
if(current==1){//重要重要！！！！！判斷語句裏的等於要寫成==
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
}
//向右切換
next.onclick=function(){
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
}
//切換圖片函數
function switchpic(offset){
var newleft=parseInt(list.style.left)+offset;
list.style.left=newleft+"px";
if(newleft>0){
list.style.left=-listimgwidth*(slideNum-1)+"px";
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.style.left=0;
}
}
//按鈕切換代碼
for(i=0;i<slideNum;i++){
buttons[i].index = i;
buttons[i].onclick=function(){
if(this.className == 'on'){//按下的按鈕高亮，代碼不繼續運行
return;
}
var j = this.index;
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//圖片切換以後調用小圓點高亮函數
}
};
//自動循環播放代碼
timer=0;
function autoplay(){
clearInterval(timer);//開定時器前先清除定時器
timer=setInterval(function(){
next.onclick();
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.onmouseover=stopplay;
container.onmouseout=autoplay;
}
</script>
附2(同一思路的jquery代碼）：
<script type="text/javascript">
$(document).ready(function(){
var container =$(".container");
var list = $(".list");
var listimg = $(".list").find("img");
var listimgwidth = listimg.eq(0).width();//獲取輪播圖片的寬度
var slideNum = listimg.length;
var prev = $(".prev");
var next = $(".next");
var current = 1;
list.css("left",0);
//jquery動態添加按鈕圓點
var ulstart = '<ul class="lunbo_button">',
ulcontent = '',
ulend = '</ul>';
for(i=0;i<slideNum;i++){
ulcontent += '<li>' + '</li>';
//ulcontent += '<li>' + (i+1) + '</li>';//帶數字的按鈕
}
container.append(ulstart+ulcontent+ulend);
//圖片高亮函數
var buttons= $(".lunbo_button").find("li");
buttons.eq(0).attr("class", "on");
function showButton() {
buttons.eq(current-1).addClass("on")
.siblings().removeClass("on");
}
//向左
prev.on("click", function() {
if(current==1){
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
});
//思路：向右切換
next.on("click", function() {
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
});
//切換圖片函數
function switchpic(offset){
var newleft=parseInt(list.css("left"))+offset;
list.css("left",newleft);
if(newleft>0){
list.css("left",-listimgwidth*(slideNum-1));
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.css("left",0);
}
}
//按鈕切換代碼
buttons.each(function () {
$(this).on("click", function() {
var j = $(this).index();
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//圖片切換以後調用小圓點高亮函數
});
});
//自動循環播放代碼
timer=0;
function autoplay(){
clearInterval(timer);//開定時器前先清除定時器
timer=setInterval(function(){
next.trigger('click');//！！！！！注意此處寫法
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.hover(stopplay, autoplay);
});
</script>
備註知識點：
1）獲取或設置元素的寬度
Js
某個元素的寬度：obj.offsetWidth;
某個元素的高度：obj.offsetHeight;
可是要注意的是offsetWidth;取得值是width + padding+border
Jquery
獲取或設置元素的寬度：$(obj).width();
獲取或設置元素的高度：$(obj).height();
獲取或設置元素的寬度：$(obj).innerWidth();(width + padding)
獲取或設置元素的高度：$(obj).innerHeight(); (height + padding)
獲取或設置元素的寬度：$(obj).outerWidth();(width + padding + border)
獲取或設置元素的高度：$(obj).outerHeight(); (height + padding + border)
獲取或設置元素的寬度：$(obj).outerWidth(true); (width + padding + border + margin)
獲取或設置元素的高度：$(obj).outerHeight(true); (height + padding + border + margin)
注意：可獲取和設置元素的寬度和高度。獲取時，返回number類型；設置時，給方法傳入數值類型的參數便可。具體用法：
$(element).width(); //獲取元素寬度 $(element).width(200); //設置元素寬度
innerWidth()、innerHight()方法：只能獲取，不能設置。
可獲取第一個匹配元素的內部寬度和高度，例如獲取元素內部寬度時，包括width+padding,不包括border。
outerWidth()、outerHight()方法：只能獲取，不能設置。
可獲取第一個匹配元素的外部寬度和高度，有兩種狀況: （用獲取元素外部寬度來舉例）
一、當方法內部不指定參數或者參數爲false時，包括width+padding+margin;
二、當方法內部參數爲true時，包括width+padding+border+margin；
css()方法：既可獲取，也可設置。
可 以獲取和設置元素的寬高（固然也可獲取和設置其餘css屬性，這裏只是爲了與其餘幾種設置獲取元素寬高的方法作對比），當獲取元素的寬高時，返回一個單位 爲px的string字符串；當設置元素寬高時，給css()方法傳入對象，對象裏面包含width\height屬性；具體用法：
$(element).css('width'); //獲取元素寬度
$(element).css({width:'200px',height:'300px'});//設置元素的寬度和高度，也能夠不要引號和單位
2）某個元素的上邊界到body最頂部的距離
js
某個元素的上邊界到body最頂部的距離： obj.offsetTop;(在元素的包含元素不含滾動條的狀況下)
某個元素的左邊界到body最左邊的距離： obj.offsetLeft;(在元素的包含元素不含滾動條的狀況下)
jquery
3）scrollLeft，scrollTop，scrollWidth ，scrollHeight
scrollLeft //元素最左端到窗口最左端的距離 scrollTop //元素最頂端到窗口最頂端的距離 scrollWidth //元素的滾動寬度 scrollHeight //元素的滾動高度
本文爲原創，如需轉載請註明轉載地址，謝謝合做！
本文地址：http://www.cnblogs.com/wanghuih/p/6365085.html
- 1. 焦點輪播圖效果實現
- 2. 實踐 - 焦點輪播圖效果
- 3. 關於焦點輪播圖的總結
- 4. jQuery案例demo -- 輪播圖效果
- 5. 【學習總結】js-輪播效果
- 6. 焦點輪播圖
- 7. 基於jQuery的輪播焦點圖圖
- 8. 輪播效果
- 9. JS、JQ實現焦點圖輪播效果
- 10. 案例總結：基本的選項卡效果
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • Lua 基本語法 - Lua 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 焦點輪播圖效果實現
- 2. 實踐 - 焦點輪播圖效果
- 3. 關於焦點輪播圖的總結
- 4. jQuery案例demo -- 輪播圖效果
- 5. 【學習總結】js-輪播效果
- 6. 焦點輪播圖
- 7. 基於jQuery的輪播焦點圖圖
- 8. 輪播效果
- 9. JS、JQ實現焦點圖輪播效果
- 10. 案例總結：基本的選項卡效果