零基礎建站培訓教程介紹

當前位置:

自己做網站如何制作幻燈片/輪播切換圖

輪播切換圖在很多網站上都能看到,它可以自動的輪播圖片和廣告,也可以手動的去切換圖片。如下圖就是一網站上的一個輪播圖:

1

我們自己做網站時,特別是淘客網站制作過程中,怎么在我們自己的網站上制作出這樣的幻燈片/輪播切換圖呢?按照下面的方法就可以輕松的制作出與這個一毛一樣的幻燈片/輪播切換圖。

制作方法:

  1. 下載幻燈片/輪播切換圖所需要的JS文件,下載地址:https://pan.baidu.com/s/1eS2w4IA
  2. 將下載下來的JS文件夾上傳到自己的空間根目錄下(一般為web文件夾
  3. 用DW軟件打開自己需要顯示輪播切換圖的網頁,在</head>上方粘貼下面的代碼,并改成自己網站的域名。(用于調用JS文件)3
    <script type="text/javascript" src="http://你的域名/js/jquery.js"></script>
    <script type="text/javascript" src="http://你的域名/js/scripts.js"></script>
  4. 在網頁需要顯示輪播切換圖的位置粘貼下方的代碼,來顯示輪播切換圖。
    <div class="sswrap">
    <div id="slide-holder">
    <div id="slide-runner">
    <a href="/"><img id="slide-img-1" src="http://你的域名/js/images/a1.jpg" class="slide" alt="" /></a>
    <a href="/"><img id="slide-img-2" src="http://你的域名/js/images/a2.jpg" class="slide" alt="" /></a>
    <a href="/"><img id="slide-img-3" src="http://你的域名/js/images/a3.jpg" class="slide" alt="" /></a>
    <a href="/"><img id="slide-img-4" src="http://你的域名/js/images/a4.jpg" class="slide" alt="" /></a>
    <a href="/"><img id="slide-img-5" src="http://你的域名/js/images/a5.jpg" class="slide" alt="" /></a>
    <a href="/"><img id="slide-img-6" src="http://你的域名/js/images/a6.jpg" class="slide" alt="" /></a>
    <a href="/"><img id="slide-img-7" src="http://你的域名/js/images/a4.jpg" class="slide" alt="" /></a>
    <div id="slide-controls">
    <p id="slide-desc" class="text"></p>
    <p id="slide-nav"></p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"第一條的標題在這里","desc":"第一條的這里是描述信息"},{"id":"slide-img-2","client":"標題在這里","desc":"這里是描述信息"},{"id":"slide-img-3","client":"標題在這里","desc":"這里是描述信息"},{"id":"slide-img-4","client":"標題在這里","desc":"這里是描述信息"},{"id":"slide-img-5","client":"標題在這里","desc":"這里是描述信息"},{"id":"slide-img-6","client":"標題在這里","desc":"這里是描述信息"},{"id":"slide-img-7","client":"標題在這里","desc":"這里是描述信息"}];
    </script>
    </div>

    代碼里的文字和鏈接地址可以更換成你自己網站的文字和鏈接。

  5. 在自己網站的CSS文件里,再放入以下的CSS代碼來控制幻燈片/輪播切換圖。代碼里面的圖片路徑同樣要改成你網站的地址。
    /*輪播圖的樣式*/
    section#lunbotu {   box-shadow: 1px 4px 15px #A39F9F;}
    div.sswrap a {  color: #fff;}
    div#slide-holder {  width : 628px;  height : 278px;}
    div#slide-runner {  width : 628px;  height : 278px; overflow : hidden;  position : absolute;}
    div#slide-holder img {  margin : 0; display : none; position : absolute;}
    div#slide-controls {    left : 0;   bottom : 0px;   width : 628px;  height : 46px;  display : none; position : absolute;}
    div#slide-controls p.text { float : left;   color : #fff;   display : inline;   font-size : 10px;   line-height : 16px; margin : 15px 0 0 20px; text-transform : uppercase;}
    p#slide-nav {   float : right;  height : 24px;  display : inline;   margin : 11px 15px 0 0;}
    p#slide-nav a { float : left;   width : 24px;   height : 24px;  display : inline;   font-size : 11px;   margin : 0 5px 0 0; line-height : 24px; font-weight : bold; text-align : center;    text-decoration : none; background-position : 0 0;  background-repeat : no-repeat;}
    p#slide-nav a.on {  background-position : 0 -24px;}
    p#slide-nav a { background-image : url(http://你的域名/js/images/silde-nav.png);}
    #content_warp { margin-top: 20px;}
    article {   width: 628px;   display: inline-block;  vertical-align: top;}
    aside { width: 347px;   display: inline-block;  margin-left: 20px;}
    section#silid { width: 628px;   box-shadow: 1px 4px 15px #333;}
    div.newtitle {  height: 45px;   line-height: 45px;  background: url(http://你的域名/js/images/title_bg.jpg) repeat-x;   padding-left: 10px;}
    div.newtitle a {    font-weight: 400;   color: #444;    font-size: 16px;}
    #newlist ul li {    font-size: 0}
    #newlist ul li a {  display: inline-block;  vertical-align: top;    color: #fff;}
    #newlist ul li a img {  width: 315px;   height: 165px}
    #newlist ul li a.newwz {    width: 313px;   height: 165px;  background: #3598dc;    padding: 10px 15px; -moz-box-sizing: border-box;    -webkit-box-sizing: border-box; box-sizing: border-box; position: relative;}
    #newlist ul li a.newwz h3 { font-size: 18px;    height: 30px;   line-height: 30px;  border-bottom: 1px solid #FFF;}
    #newlist ul li a.newwz p {  font-size: 13px;    text-indent: 2em;   padding: 10px 0;    height: 124px;  overflow: hidden;   box-sizing: border-box;}
    .sjx {  width: 20px;    height: 20px;   position: absolute; left: -9px; top: 20px;  background: #3598dc;    transform: rotate(45deg);}
    section#hdlist_a li {   display: inline-block;  vertical-align: top;    margin-right: 9px;}
    section#hdlist_a li:img{width:150px;height:150px}
    section#hdlist_a li:last-child {    margin-right: 0;}
    section#hdlist_b {  display:inline-block;   width: 469px;   margin-right: 9px;  vertical-align:top; }
    section#hdlist_b li {   width:100%; display:inline-block;   vertical-align:bottom;  white-space:nowrap; overflow:hidden;    text-overflow: ellipsis;    counter-increment: mycounter;   margin-top:13px;}
    section#hdlist_b li:before {    content: counter(mycounter);    background: #444;   color: #FFF;    margin-right: 10px; padding:2px 7px;}
    section#hdlist_b li:nth-child(1):before,section#hdlist_b li:nth-child(2):before,section#hdlist_b li:nth-child(3):before{background:#39C}
    section#hdlist_b li:last-child:before{padding:4px;font-size:12px;}
    section#hdlist_b li a {color: #444;}
    section#hdlist_b li a:hover{text-shadow:1px 4px 9px #444;transition: text-shadow 1s linear;}
    section#hdlist_c {  display: inline-block;}
    section#hdlist_c li:first-child,section#hdlist_c li:first-child img{width:150px;height:205px;margin-bottom:10px;}
    section#hdlist_c li:last-child,section#hdlist_c li:last-child img{width:150px;height:150px;}
  6. 通過以上幾步的操作,你的網站就會顯示和上圖一樣的幻燈片/輪播切換圖了。

12條回應:“自己做網站如何制作幻燈片/輪播切換圖”

  1. 學習建網站學員 牛利超說道:

    這個圖片切換功能,當瀏覽器分辨率變大之后,也就是屏幕變大的時候,會并排顯示兩張圖片,能只顯示一張圖片嗎

    • 學做網站論壇講師 學做網站講師說道:

      可能修改CSS樣式,使用百分比來定義寬度和高度,這樣就會自適應了。

  2. 學習建網站學員 賈天天說道:

    老師:輪播圖片的描述信息中如何與后臺進行數據交互呢,

    • 學做網站論壇講師 學做網站講師說道:

      只需將以上代碼里固定的圖片地址IMG標簽,替換為我們建站課程中講的循環代碼即可。

      <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile;?>
      <?php endif; ?>
  3. 學習建網站學員 賈天天說道:

    老師:那js中的

    if(!window.slider) var slider={};slider.data=[{“id”:”slide-img-1″,”client”:”第一條的標題在這里”,”desc”:”
    html中已經獲取了圖片的地址,
    js這里如何獲取后臺的數據呢?

  4. 學習建網站學員 123321說道:

    “在自己網站的CSS文件里,再放入以下的CSS代碼來控制幻燈片/輪播切換圖。代碼里面的圖片路徑同樣要改成你網站的地址。”中
    “我自己網站的CSS文件”在哪啊?

  5. 學習建網站學員 123321說道:

    我想要把自己的圖片放進去,給的table框太小了,怎么調框的大小

    • 學做網站論壇講師 學做網站講師說道:

      修改相應的CSS文件

  6. 學習建網站學員 說道:

    為什么拷過來的js樣式鏈接到httml里,就沒有了

    • 學做網站論壇講師 學做網站講師說道:

      JS是遠程文件,不需要復制

  7. 學習建網站學員 張君甫說道:

    代碼和圖片放上去后,第二張圖片會覆蓋第一張圖一部分請問怎么改

發表評論

電子郵件地址不會被公開。 必填項已用*標注

相關教程

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图