自已動手寫的輪播圖插件，功能不斷增加中，可以下載

-Advertisement-

一：結構註意，1 必須是三張以上圖片，2 最外層carousel-wrap必須要有一個寬高二：CSS 三：JS 基於JQ，四：測試地址 http://game.feiliu.com/zk/new/plugin/default.html 五：demo源碼下載 http://files.cnblo ...

一：結構

<!-- carousel begin -->
<div class="carousel-wrap">
    <div class="carousel-main-wrap">
        <ul class="carousel-scroll-wrap">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
            <li><img src="images/7.jpg" alt=""></li>
            <li><img src="images/8.jpg" alt=""></li>
        </ul>
        <span class="carousel-left">向左</span>
        <span class="carousel-right">向右</span>
    </div>
</div>
<!-- carousel end -->

註意，1 必須是三張以上圖片，2 最外層carousel-wrap必須要有一個寬高

二：CSS

/* css reset start*/

@charset "UTF-8";
*{
    padding:0;
    margin:0;
    list-style:none;
    border:0;
}
body{
    width: 100%;
    font-family: 'SimSun', 'Microsoft YaHei', Arial;
    font-size: 14px;
    color: #fff;
}
a,a:visited{
    color: #fff;
    text-decoration: none;
}
a:hover{
   text-decoration: none;
}
img{
    display: block;
}
/* css reset end */


/* carousel start */
.carousel-wrap{
    width: 800px;
    height: 504px;
    margin: 0 auto;
    
}
.carousel-main-wrap{
    overflow: hidden;
    position: relative;
}
.carousel-scroll-wrap{
    position: relative;
}
.carousel-scroll-wrap li{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 10000px;
}
.carousel-scroll-wrap li img{
    width: 800px;
    height: 504px;
    display: block;
}
.carousel-left{
    width: 50px;
    height: 100px;
    margin-top: -50px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background-color: teal;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    cursor: pointer;
}
.carousel-right{
    width: 50px;
    height: 100px;
    margin-top: -50px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background-color: teal;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    cursor: pointer;
}
.carousel-control{
    height: 10px;
    overflow: hidden;
}
.carousel-control span{
    width: 20%;
    height: 10px;
    display: inline-block;
    background-color: orange;
    cursor: pointer;
}
.carousel-control span.cur{
    background-color: #f60;
}
/* carousel end */

三：JS

基於JQ，

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/carousel.js"></script>

carousel.js代碼如下：

function carouselPlay(config){


//設置變數預設數據
    var carouselSpeed = config.carouselSpeed || 800;
    var carouselFuncton = config.carouselFuncton || 'swing';
    var imgWidth = config.imgWidth || 400;
    var imgHeight = config.imgHeight || 304;
//以下為常量，一般不必改動
    var carouselLi = (′.carousel−scroll−wrapli′);varcontrolSpan=(′.carousel−scroll−wrapli′);varcontrolSpan=('.carousel-control span');
    var carouselCount = carouselLi.index()+1;
    var curLeft = imgWidth;
    var nextLeft = imgWidth*2;
    var prevLeft = 0;
    var outLeft = 10000;
    var curIndex = 0;
    var nextIndex = 1;
    var prevIndex = carouselCount-1;
//初始化
    var jobInite = function(){
        (′.carousel−main−wrap′).css(width:imgWidth,height:imgHeight);(′.carousel−main−wrap′).css(width:imgWidth,height:imgHeight);('.carousel-scroll-wrap').css({
            width: imgWidth*3,
            height: imgHeight,
            left: -imgWidth,
            top: 0
        });        
        carouselLi.eq(curIndex).css('left', curLeft);
        carouselLi.eq(nextIndex).css('left', nextLeft);
        carouselLi.eq(prevIndex).css('left', prevLeft);
    }
    jobInite();
//向右滾動一張的邏輯
    function rightZero(a){
        a++;
        if(a == carouselCount){
            a = 0;
        }
        return a
    }
//向左滾動一張的邏輯
    function leftZero(a){
        a--;
        if(a == -1){
            a = carouselCount-1;
        }
        return a
    }
// 小圓點控製圖片切換的邏輯，小點控制功能還未寫完，但不影響其它功能！
    function controlZero(a){
        curIndex = a;
        if(a === (carouselCount-1)){
            nextIndex = 0;
        }
        else{
            nextIndex = a+1;
        }
        if(a === 0){
            prevIndex = carouselCount;
        }
        else{
            prevIndex = a-1;
        }        
    }
//滾動函數
    function focusAnimate(carouselLi,index,left){
        carouselLi.eq(index).stop(true,true).animate({'left': left}, carouselSpeed, carouselFuncton);
    }
//處置視窗以外的圖片
    function imgOut(carouselLi, index){
        carouselLi.eq(index).css('left', outLeft);
    }
// 控制按鈕函數，功能還未寫完，但不影響其它功能！
    function controlPlay(curIndex){
        controlSpan.eq(curIndex).addClass('cur').siblings().removeClass('cur');
    }
//向右切換運動
    function rightPlay(){
        //滾動前初始化圖片索引
        jobInite();
        //向右切換
        focusAnimate(carouselLi, curIndex, prevLeft);
        focusAnimate(carouselLi, nextIndex, curLeft);
        imgOut(carouselLi, prevIndex);
        //重置索引
        curIndex         = rightZero(curIndex);
        nextIndex         = rightZero(nextIndex);
        prevIndex         = rightZero(prevIndex);
        // 控制小圓點跟隨，功能還未寫完，但不影響其它功能！
        controlPlay(curIndex);
    }

//向左切換運動
    function leftPlay(){
        //滾動前初始化圖片索引
        jobInite();
        //向左
        focusAnimate(carouselLi, curIndex, nextLeft);
        focusAnimate(carouselLi, prevIndex, curLeft);
        imgOut(carouselLi, nextIndex); 
        //重置索引
        curIndex         = leftZero(curIndex);
        nextIndex         = leftZero(nextIndex);
        prevIndex         = leftZero(prevIndex);
        // 控制小圓點跟隨，功能還未寫完，但不影響其它功能！
        controlPlay(curIndex);
    }

// 限制用戶頻繁點擊
    var datePrev = 0;
    var clickFlag = true;
    function clickCheck(minSecond){
        var nowDate = new Date();
        var dateCur = nowDate.getTime();
        var dateInterval = dateCur - datePrev;
        datePrev = dateCur;
        if(dateInterval<minSecond){
            clickFlag = false;
        }
        else{
            clickFlag = true;
        }
        return clickFlag;
    }
// 左右控制切換
    (′.carousel−right′).click(function(event)if(clickCheck(500))rightPlay(););(′.carousel−right′).click(function(event)if(clickCheck(500))rightPlay(););('.carousel-left').click(function(event) {
        if(clickCheck(500)){
            leftPlay();
        }
    });
// 小圓點控制切換，功能還未寫完，但不影響其它功能！
    controlSpan.mouseover(function(event) {
        // 計算新的當前位置索引
        curIndex = $(this).index();
        //重置索引
        controlZero(curIndex);
        // 初始化圖片位置
        jobInite();
        // 小圓點位置跟隨
        controlPlay(curIndex);
    });
}

四：在頁面中調用

<script type="text/javascript">
$(function(){
//配製變數
var config = {
    'carouselSpeed': 800,
    'carouselFuncton': 'swing',
    'imgWidth': 800,
    'imgHeight': 504
}
//輪播圖的執行
var main = carouselPlay;
main(config);
})

//更多調用可參考demo
</script>

四：測試地址

http://game.feiliu.com/zk/new/plugin/default.html

五：demo源碼下載

http://files.cnblogs.com/files/zk995/demo.rar

六：後續慢慢再增加完成各種功能，還要更新完整

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

泛型簡介，泛型類及使用

如果我們需要產生多個對象，每個對象的邏輯完全一樣，只是對象內的成員變數的類型不同。那麼我們該如何去做？ ① 創建多個類文件，給每個類中的成員變數設置指定的數據類型; 1 public class Demo1{ 2 public static void main(String []args){ 3 M ...
mac PHP配置

apache預設路徑配置方法 apache的配置 apache已經自帶了，只需如下三個命令就可以了。開啟apache服務 sudo apachectl start 停止apache服務 sudo apachectl stop 重啟服務 sudo apachectl restart 查看版本 htt ...
在spring中使用webservice（Restful風格）

我們一般都會用webservice來做遠程調用，大概有兩種方式，其中一種方式rest風格的簡單明瞭。記錄下來作為筆記：開發服務端: 具體的語法就不講什麼了，這個網上太多了，而且只要看一下代碼基本上都懂,下麵是直接貼代碼: 這個風格和springmvc實在太像了，所以一看基本上就懂了。下麵是配置 ...
c語言之fopen參數（r+，w+，a+）

經查找一些資料，並且親自實驗之後得出： r+：打開已存在的文件時，游標位於開頭，文件可讀，可寫，寫數據時，由於游標位於開頭，所以會覆蓋原有數據 w+：打開的文件已存在時，將覆蓋原文件 a+：打開已存在的文件時，游標位於文件尾，文件可讀，可寫讀數據時，游標會回到開頭 ...
阿花寶寶 Java基礎筆記之集合框架

基本介面：Collection 介面： List 實現類：ArrayList LinkedList 介面：Set(唯一，無序) 實現類：HashSet(哈希) TreeSetMap介面:Map 實現類：HashMap ArrayList類特點：長度可變，連續空間，任意類型，類型相同適用情況：適合多次 ...
LB 負載均衡的層次結構

作為後端應用的開發者，我們經常開發、調試、測試完我們的應用併發布到生產環境，用戶就可以直接訪問到我們的應用了。但對於互聯網應用，在你的應用和用戶之間還隔著一層低調的或厚或薄的負載均衡層軟體，它們不顯山不露水默默的發揮著重要的作用，以至於我們經常忽略了它們的存在。因為負載均衡層通常不在一般開發人員的問 ...
html5網頁編碼

你是如何指定一個頁面的編碼的呢？你知道瀏覽器是怎麼識別編碼的嗎？首先，一個很簡單的例子，用遇簡的HTML頁面來看看各瀏覽器下有什麼不同：最簡HTML，<head>和<body>都沒有內容，伺服器也不給出具體的編碼聲明，直接從本地打開，各個瀏覽器下查看頁面的編碼：從表格中可以看出，對於沒有使用任 ...
jQuery操作<input type="checkbox">

<input type="checkbox">: 1 2 3 4 5 2012歐洲杯"死亡之組"小組出線的國家隊是：<br> <input type="checkbox" name="nation" value="Germany">德國 <input type="checkbox" name="na ...