成人性生交大片免费看中国,99国产成人精品2021

本文主要講解如何使用Photoshop切片，導(dǎo)出HTML，并實現(xiàn)圖片切換效果

下圖是該教程中的圖片滑動部分的效果圖

打開PSD文件,找尋該部分的圖層，如下所示（題外話，在制作PSD的時候，合理的安排圖層的順序和分組，對后面的PSD轉(zhuǎn)HTML的工作要省心不少）

用切片工具在圖片滑動欄附近切出一個切片，在該切片上右鍵選擇編輯切片選項，在彈出的對話框中，進行如下的設(shè)置

打開圖層面板，隱藏相關(guān)的圖層，如下圖所示

點擊：文件 > 存儲為web和設(shè)備所用的格式，圖片格式選擇PNG-24，點擊存儲按鈕，在彈出的對話框中，選擇HTML和圖像

這是第一次導(dǎo)出切片，目的是獲得圖片滑動欄的背景。用PS打開剛才導(dǎo)出圖片中的背景圖片

用魔棒工具，容差設(shè)置為10，點擊當(dāng)中的背景，按Delete刪除當(dāng)中的背景。將圖片保存為frame.png

將left arrow組復(fù)制到新的文件，移到左上角，設(shè)置合理的大小

將該文件保存為left.png

類似的復(fù)制right arrow組，將文件保存為right.png

將radio buttons復(fù)制到新的文件，移到左上角，設(shè)置合理的大小，將文件分別保存為current.png和pagination.png

current.png

pagination.png

至此，圖片滑動欄的圖片就全部準(zhǔn)備好了。（本教程只實現(xiàn)圖片滑動部分）

現(xiàn)在，開始制作圖片滑動效果

在VS2010中打開剛才導(dǎo)出的網(wǎng)頁，如下圖所示：

其中03.png的部分就是剛才圖片滑動部分

按照之前的教程部分，對該網(wǎng)頁進行修改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>PSD轉(zhuǎn)HTML——SlideShow</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

   <style type="text/css">
        :focus { outline:0; }
        img {     border:none;}

        #container {   width:620px;
                            height:360px;
                            margin:0 auto;
                            position:relative;
                            z-index:0;
                        }

        #frame {        position:absolute;
                            z-index:110;
                            width:620px;
                            height:360px;
                }

        #slides {        position:absolute;
                            z-index:100;
                   }

        .slides_container {   width:600px;
                                    overflow:hidden;
                                    position:relative;
                                    left:10px;
                                    top:10px;
                                    display:none;
                                }

        .slides_container a,.slides_container a img {    width:600px;
                                                                       height:320px;
                                                                       display:block;
                                                                  }

        #slides .next,#slides .prev {    position:absolute;
                                                 top:148px;
                                                 left:-17px;
                                                 display:block;
                                                 z-index:200;
                                                }

        #slides .next { left:594px;}

        .pagination {    margin:20px auto 0px;
                             width:100px;
                        }

        .pagination li { float:left;
                             margin:0 5px;
                             list-style:none;
                        }

        .pagination li a {     display:block;
                                   width:10px;
                                   height:0px;
                                   padding-top:30px;
                                   background-image:url(images/pagination.png);
                                   float:left;
                                   overflow:hidden;
                             }

        .pagination li.current a {background-image:url(images/current.png);}

    </style>

    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" ></script>
    <script src="Scripts/slides.min.jquery.js" type="text/javascript" ></script>
    <script src="Scripts/jquery.easing.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#slides').slides({
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });

    </script>

</head>