圖片上下帕识、左右輪播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片上下輪播 插件</title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <style type="text/css">
        /* 設(shè)置一些基本樣式 */
        /* 很多小的位置問(wèn)題都在style里設(shè)置 */
        #xc-banner{
            position: relative;
            margin: 0 auto;
        }
        #xc-banner img{
            float: left;
        }
        #xc-banner ul li{
            overflow: hidden;
        }
        #xc-banner .hor{
            position: absolute;
            left: 50%;
            bottom: 15px;
            margin-left: -52px;
        }
        #xc-banner .hor li{
            width: 15px;
            height: 15px;
            background-color: #fff;
            float: left;
            border-radius: 15px;
            margin: 0 3px;
            cursor: pointer;
        }
        #xc-banner .hor li.active{
            background-color: #f60;
        }
        #xc-banner .ver{
            position: absolute;
            right: 20px;
            top: 20px;
            width: 20px;
        }
        #xc-banner .ver li{
            width: 15px;
            height: 15px;
            background-color: #fff;
            float: left;
            margin: 3px 0px;
            cursor: pointer;
        }
        #xc-banner .ver li.active{
            background-color: #f60;
        }
        .xc-banner a{
            position: absolute;
            width: 40px;
            height: 40px;
            display: inline-block;
            background-color: red;
            top: 50%;
            margin-top: -20px;
        }
        .xc-banner .left {
            left: 20px;
        }
        .xc-banner .right {
            right: 20px;
        }
        #xc-banner1{
            position: relative;
            margin: 0 auto;
        }
        #xc-banner1 img{
            float: left;
        }
        #xc-banner1 ul li{
            overflow: hidden;
        }
        #xc-banner1 .hor{
            position: absolute;
            left: 50%;
            bottom: 15px;
            margin-left: -52px;
        }
        #xc-banner1 .hor li{
            width: 15px;
            height: 15px;
            background-color: #fff;
            float: left;
            border-radius: 15px;
            margin: 0 3px;
            cursor: pointer;
        }
        #xc-banner1 .hor li.active{
            background-color: #f60;
        }
        #xc-banner1 .ver{
            position: absolute;
            right: 20px;
            top: 20px;
            width: 20px;
        }
        #xc-banner1 .ver li{
            width: 15px;
            height: 15px;
            background-color: #fff;
            float: left;
            margin: 3px 0px;
            cursor: pointer;
        }
        #xc-banner1 .ver li.active{
            background-color: #f60;
        }
        .xc-banner1 a{
            position: absolute;
            width: 40px;
            height: 40px;
            display: inline-block;
            background-color: red;
            top: 50%;
            margin-top: -20px;
        }
        .xc-banner1 .left {
            left: 20px;
        }
        .xc-banner1 .right {
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="xc-banner">
        <ul>
            <li>
                <a href="#"><img src="images/11.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/12.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/13.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/14.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/15.jpg"></a>
            </li>
        </ul>
    </div>
    <div id="xc-banner1">
        <ul>
            <li>
                <a href="#"><img src="images/11.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/12.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/13.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/14.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="images/15.jpg"></a>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var bannerGroup = {
            arr : [], //創(chuàng)建數(shù)組
            // 初始化參數(shù)
            init : function (ops){
                this.arr[ops.id] = {
                    id:ops.id,
                    direction : ops.direction || "hor",// 方向 默認(rèn)hor
                    button : ops.button||'true',// 按鈕 默認(rèn)為true
                    index : 0,
                    isTime : ops.isTime || 'true',
                    time : ops.time || 3000
                }
                this.show(this.arr[ops.id]);
            },

            show : function(obj){
                var that = this;
                obj.banner = document.getElementById(obj.id);
                obj.banner.onmouseover = function (){
                    clearInterval(obj.timer);
                }
                obj.banner.onmouseout = function (){
                    that.setTime(obj);
                }
                obj.banner.style.overflow = "hidden";
                obj.ul = obj.banner.getElementsByTagName("ul")[0];
                obj.list  = obj.ul.getElementsByTagName("li");
                obj.img = obj.banner.getElementsByTagName("img");
                obj.maxlength = obj.list.length;
                // 設(shè)置寬度高度 
                obj.banner.style.width = obj.img[0].offsetWidth + "px";
                obj.banner.style.height = obj.img[0].offsetHeight + "px";
                // 橫向怎么辦
                if (obj.direction == "hor") {
                    obj.ul.style.width = obj.img[0].offsetWidth * obj.img.length + "px";
                    for( var i = 0 ; i < obj.list.length ; i ++ ){
                        obj.list[i].style.float = "left";
                    }
                    // 橫向且 button 為true 創(chuàng)建button
                    if (obj.button == "true") {
                        this.createButtons(obj);
                    }
                }
                this.createList(obj);
                this.bgclick(obj);
                if (obj.isTime == "true") {
                    this.setTime(obj);
                }
            },
            // 創(chuàng)建小導(dǎo)航 classname 為 id
            createList : function (obj){
                obj.listUl = document.createElement("ul");
                obj.listUl.className = obj.direction;
                for( var i = 0 ; i < obj.maxlength ; i ++　){
                    var li = document.createElement("li");
                    obj.listUl.appendChild(li);
                }
                obj.banner.appendChild(obj.listUl);
                this.changeIndex(obj);
            },
            // 左右按鈕 創(chuàng)建
            createButtons : function (obj){
                var div = document.createElement("div");
                div.className = obj.id;
                var a1 = document.createElement("a");
                a1.className = "left";
                var a2 = document.createElement("a");
                a2.className = "right";
                div.appendChild(a1);
                div.appendChild(a2);
                obj.buttons = div;
                obj.banner.appendChild(obj.buttons);
                this.btnclick(obj);
            },
            // 左右按鈕事件綁定
            btnclick : function (obj){
                var that = this;
                var a = obj.buttons.getElementsByTagName("a");
                console.log(a);
                a[0].onclick = function (){
                    obj.index -- ;
                    if (obj.index < 0 ) {
                        obj.index = obj.maxlength - 1;
                    }
                    that.changeIndex(obj);
                }
                a[1].onclick = function (){
                    obj.index ++ ;
                    if (obj.index >= obj.maxlength) {
                        obj.index = 0;
                    }
                    that.changeIndex(obj);
                }
            },
            // 改變位置
            changeIndex : function (obj){
                var list = obj.listUl.getElementsByTagName("li");
                for ( var i = 0 ; i < list.length ; i ++ ){
                    list[i].className = "";
                }
                list[obj.index].className = "active";
                this.changeMargin(obj);
            },
            // 小導(dǎo)航點(diǎn)擊事件綁定
            bgclick : function (obj){
                var that = this;
                var list = obj.listUl.getElementsByTagName("li");
                for ( var i = 0 ; i < list.length ; i ++ ){
                    list[i].index = i ;
                    list[i].onclick = function (){
                        obj.index = this.index;
                        that.changeIndex(obj);
                    }
                }
            },
            // 改變位置 hor 改變 marginLeft  其他改變 marginTtop
            changeMargin : function (obj){
                clearInterval(obj.listTimer);
                var target = obj.direction == "hor"?- obj.img[0].offsetWidth * obj.index:- obj.img[0].offsetHeight * obj.index;
                obj.listTimer = setInterval(function (){
                    var speed = obj.direction == "hor"?(target - obj.ul.offsetLeft)/8:(target - obj.ul.offsetTop)/8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (obj.direction == "hor") {
                        obj.ul.style.marginLeft = obj.ul.offsetLeft + speed + "px";
                        if (obj.ul.offsetLeft == target) {
                            clearInterval(obj.listTimer);
                        }
                    }else{
                        obj.ul.style.marginTop = obj.ul.offsetTop + speed + "px";
                        if (obj.ul.offsetTop == target) {
                            clearInterval(obj.listTimer);
                        }
                    }
                },30)
            },
            // 定時(shí)器 默認(rèn)的是3000
            setTime : function (obj){
                var that = this;
                obj.timer = setInterval(function(){
                    obj.index ++;
                    if (obj.index >= obj.maxlength) {
                        obj.index = 0;
                    }
                    that.changeIndex(obj);
                },obj.time)
            }
        }
        window.onload = function (){
            // 使用方法
            // id 為必傳, 簡(jiǎn)單設(shè)置一下style 即可使用
            //direction 兩個(gè)參數(shù) hor 為橫向 ver 為縱向 
            // isTime 和button 分別有兩個(gè)參數(shù) 'true' 、'false' 意思是 開(kāi)啟定時(shí)器 和 創(chuàng)建左右按鈕胰柑，其中 direction 為hor 不能創(chuàng)建按鈕 默認(rèn)值都為true
            // time 時(shí)間 單位毫秒截亦，默認(rèn)值為3000  與isTime 配合使用 
            bannerGroup.init({id:"xc-banner",direction :"ver",time:1000});
            bannerGroup.init({id:"xc-banner1",direction :"hor",button:'true',isTime : "false"});
        }
    </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市柬讨，隨后出現(xiàn)的幾起案子崩瓤，更是在濱河造成了極大的恐慌，老刑警劉巖踩官，帶你破解...
    沈念sama閱讀 216,544評(píng)論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件谷遂，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡卖鲤，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門畴嘶，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蛋逾，“玉大人，你說(shuō)我怎么就攤上這事窗悯∏唬” “怎么了？”我有些...
    開(kāi)封第一講書人閱讀 162,764評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蒋院，是天一觀的道長(zhǎng)亏钩。 經(jīng)常有香客問(wèn)我，道長(zhǎng)欺旧，這世上最難降的妖魔是什么姑丑？ 我笑而不...
    開(kāi)封第一講書人閱讀 58,193評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮辞友，結(jié)果婚禮上栅哀，老公的妹妹穿的比我還像新娘震肮。我一直安慰自己，他們只是感情好留拾，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布戳晌。 她就那樣靜靜地躺著，像睡著了一般痴柔。 火紅的嫁衣襯著肌膚如雪沦偎。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書人閱讀 51,182評(píng)論 1贊 299
  • 城市分裂傳說(shuō)
    那天咳蔚，我揣著相機(jī)與錄音豪嚎，去河邊找鬼。 笑死屹篓，一個(gè)胖子當(dāng)著我的面吹牛疙渣，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播堆巧，決...
    沈念sama閱讀 40,063評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼妄荔，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了谍肤？” 一聲冷哼從身側(cè)響起啦租，我...
    開(kāi)封第一講書人閱讀 38,917評(píng)論 0贊 274
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎荒揣，沒(méi)想到半個(gè)月后篷角，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡系任，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年恳蹲，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俩滥。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡嘉蕾，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出霜旧，到底是詐尸還是另有隱情错忱，我是刑警寧澤，帶...
    沈念sama閱讀 35,425評(píng)論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布挂据，位于F島的核電站以清，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏崎逃。R本人自食惡果不足惜掷倔，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3贊 326
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望个绍。 院中可真熱鬧今魔，春花似錦勺像、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,671評(píng)論 0贊 22
  • 一樁弒父案吟宦，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至涩维，卻和暖如春殃姓，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背瓦阐。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,825評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工蜗侈， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人睡蟋。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2贊 368
  • 代替公主和親
    正文 我出身青樓踏幻，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親戳杀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子该面，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2贊 353

推薦閱讀更多精彩內(nèi)容