banner手動切換效果

阿新 • • 發佈：2018-12-21

自動切換的還不會做。至於兩邊放一個按鈕點選就上一張/下一張的相對簡單，我用了兩種辦法來做這個效果。我的感覺就是學了js以後把簡單的事情搞得更復雜了。灑淚~~灑淚~~~

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
      * {
          margin: 0;
          padding: 0;
      }
      /*banner star*/
    #banner {
        height: 620px;
        background: url(banner01.jpg) no 
-repeat top center;
        position: relative;
    }
    #banner div{
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -74px;
    }
    #banner input {
        height: 15px;
        width: 15px;
        border-radius: 50%;
        border: 1px solid white;
        background: rgba( 
255, 255, 255, 0);
        cursor: pointer;
    }
  </style>

  <script>
        window.onload=function(){
            
            //****************************************************************
            //****************************************************************
            /*
             * 這是第一種方法。也是以前玩指令碼的時候常用的手法。那時候還沒開始學js連語法都是網上查的
             * 只是看到有人做這個。我就根據他的做法。跟我自己的想法結合了一下
             * 
              
*///****************************************************************
            //****************************************************************
            //****************************************************************
            var n=1;
            var newBtn;
            var newbtn1;
            click(); //預設顯示第一張，所以n=1，並且呼叫一次函式；
            function click(){
                var banner=document.getElementById('banner');
                for (var i=1;i<=4;i++ ){
                    newBtn=('btn'+i);//獲取id的值
                    newbtn1=document.getElementById(newBtn);
                    newbtn1.style.background='rgba(255,255,255,0)';//全部透明度改為全透明
                    if (i==n){
                        newbtn1.style.background='rgba(255,255,255,1)';
                        banner.style.background='url(banner0'+i+'.jpg) no-repeat top center';
                    };
                };
            };
            btn1.onclick=function(){
                n=1;
                click();
            }
            btn2.onclick=function(){
                n=2;
                click();
            }
            btn3.onclick=function(){
                n=3;
                click();
            }
            btn4.onclick=function(){
                n=4;
                click();
            }
            
            //****************************************************************
            //****************************************************************
            /*
             * 這是第二種方法。剛學到了函式。今天沒事幹就回來改了一下
             * 
             *///****************************************************************
            //****************************************************************
            //****************************************************************
            var input=document.getElementsByTagName('input');
            var banner1=document.getElementById('banner');
            //預設選中1
            input[0].style.background='red';
            for(var i=0;i<input.length;i++){
                input[i].onclick=function(){    //給每個input新增點選事件
                    this.style.background='red';    //此時的this指的是點選的物件。點選誰this就是誰
                    /*
                     * 上面的效果是點選了誰誰的背景顏色就會變為紅色
                     * 下面要把上一個點選物件的背景色設為空
                     * 
                     * 難點：
                     *     1.怎麼找到上一個點選的物件
                     *           因為上一個物件是隨機的。所以我們把this以外的都改一遍
                     *     2.怎麼找到相應的對應的背景圖片名字呢
                     * 
                     */
                    for(var j=0;j<input.length;j++){
                        if(input[j]!=input[this.id]){    //把未點選的btn背景改為空。那麼不走這裡的j就是點選的btn對應的下標值：j
                            input[j].style.background='';
                        }else{
                            //改變相應的banner圖片
                            banner1.style.background='url(banner0'+(j+1)+'.jpg) no-repeat top center';
                        };
                    };
                };
            };
        };
  </script>
  <title>Document</title>
 </head>
 <body>
    <!--banner-->
    <div id="banner">
        <div>
            <input type="button" id="btn1" />
            <input type="button" id="btn2" />
            <input type="button" id="btn3" />
            <input type="button" id="btn4" />
        </div>
    </div>

 </body>
</html>

banner手動切換效果

自動切換的還不會做。至於兩邊放一個按鈕點選就上一張/下一張的相對簡單，我用了兩種辦法來做這個效果。我的感覺就是學了js以後把簡單的事情搞得更復雜了。灑淚~~灑淚~~~ <!doctype html> <html lang="en"> <head>

jQuery自動與手動圖片切換效果下載

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Hovertree

製作banner切換效果

這邊首先上圖：、要製作上面的切換banner效果，可以使用background-position加padding來實現，挺有意思的css2的功能，這階段在製作手機版的幫助系統以及專題大量用到，當然是參考了很多其他的外掛來完成，先上css樣式： /* Used

tab切換效果

this width har head -c otto itl int ide <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

圖片旋轉切換效果

borde css屬性 1.7 absolute fadein width jpg left mar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

Android實戰簡易教程-第二十六槍（基於ViewPager實現微信頁面切換效果）

stat addview data android tid des viewpage 聊天 == 1.頭部布局文件top.xml:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

linux下，手動切換jdk

nat ati span current ren linu color pat choice 1、首先將自定義的jdk目錄安裝到alternatives中 [email protected]/* */:~/srcAndroid/src4.4.4_r1$ s

JQuery——banner旋轉木馬效果

pict bsp 比例 index containe flag ttr nbsp alt 博主在瀏覽網頁時無意間發現了一種banner圖的輪播方式——像旋轉木馬一樣的輪播方式，博主感覺非常新穎獨特，經過查閱資料，觀看某課網教程總算搞了出來的，其原理主要利用了JQuery代碼

JS之輪播圖自動切換效果

poi 自動切換 relative amp index 點擊 mouseover 更新 adding 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=

無縫切換效果

lan sheet div tel com blog hidden view auto <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

[轉]SpringMVC+ Mybatis 配置多數據源 + 手動切換數據源

cat ons 接口 data ppi 研究 www contex ans 正確可行的解決方法：使用Spring提供的AbstractRoutingDataSource類來根據請求路由到不同的數據源。具體做法是先設置兩個不同的dataSource代表不同的數據源，再建一個總

vue-router transition 路由切換效果

link form turn data bic auto router mar all 所需更改文件 App.vue template結構： <template> <div id="app"> <div id="nav">

Tab選項卡自動切換效果js實現

one asc hidden abs 公告 turn get 實現 pla try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

Tab選項卡延遲切換效果js實現

ext 0ms 分享規則 .get 內容 char out try try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t

MUI底部導航欄切換效果

自定義事件 home nvi tlist -a person def fault nis 首先是html代碼： <nav class="mui-bar mui-bar-tab"> <a href="view

使用javascript實現圖片上下切換效果並且實現順序循環播放

Unity3D 2D Sprite描邊效果Shader，可手動調整效果適配

light position step oat fde text 等等 blog tin 　　最近兩個月學了很多Shader的知識，現在也算入點門了。現在網上有很多2D描邊的Shader，說實話大多數很差勁。有些多余的條件判斷影響效率，提供的參數也不夠適配所有圖片。因為美術

redis主從配置及手動切換遇到的問題

redis解析我做redis主從遇到的問題：redis只要下載好壓縮包後解壓縮然後make就可以直接使用了，啟動服務是：/usr/local/src/redis/src/redis-server然後進入交互界面是：/usr/lcoal/src/redis/src/reids-cli假如沒有更改port那麽默認

【jQuery Demo】圖片切換效果整理

ges 比較 nta containe 水平滾動 :hover 實現 small vertica 圖片的切換效果有很多，比較常見的有水平滾動、垂直滾動、淡入淡出等。我們接下來一一實現這些效果。 1.水平滾動 1）我們先來實現HTML頁面，代碼很簡單： &l

Xamarin.android Activity動畫切換效果實現

omx over tails detail ons too ide xamarin Coding http://blog.csdn.net/esunshine1985/article/details/44302903 1.在Resources——values下新建sty

banner手動切換效果

相關推薦