1. 首頁
  2. 問答
  3. 使用css設計jQuery旋轉器

使用css設計jQuery旋轉器

2014-09-12 32 views
1

我在設計jQuery圖像旋轉器時遇到了麻煩。我對網絡還很陌生。我得到了兩個顯示器尺寸的旋轉器，但我無法使它適用於320寬度的屏幕。這似乎與.mycaption有關，因爲我在滑塊頂部出現了一個奇怪的條。使用css設計jQuery旋轉器

這裏是html。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"> 
    <head> 
     <title>Design • Fabrication • Installation, Dallas | DSArts</title> 
     <script type="text/javascript" src="jquery-2.1.1.min.js"></script> 
     <script type="text/javascript" src="jquery.cycle.all.js"></script> 
     <script type="text/javascript"> 
      $('#slider').cycle({ 

       fx: 'fade', 
       timeout: 4000, 
       next: '#next', 
       prev: '#prev', 
       pause: 1 


      }); 

      $('#next, #prev').hover(
       function() { 
        $('#slider').cycle('pause'); 
       }, 
       function() { 
        $('#slider').cycle('resume'); 
       }); 
     </script> 

     <link href="main.css" rel="stylesheet" type="text/css" media="all"> 
     <link href="small.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1056px)"> 
     <link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)"> 
    </head> 
    <body bgcolor="#3097B9"> 
     <div class="page-wrap"> 
      <header> 
       <div id="headerwrap"> 
        <div> 
         <a href="index.html"> 
          <img src="images/logo.jpg" alt="DS Arts logo" width="529" height="143" class="headerimage" /> 
         </a> 
        </div> 
        <img src="images/Factory.png" alt="" width="400" height="136" id="buildingimg" /> 
       </div> 
      </header> 
      <div id="navwrap"> 
       <nav id="navbar"> 
        <ul> 
         <p><a href="index.html">Home</a> 
         </p> 
         <p><a href="design.html">Design</a> 
         </p> 
         <p><a href="solutions.html">Solutions</a> 
         </p> 
         <p><a href="fabrication.html">Fabrication</a> 
         </p> 
         <p><a href="installation.html">Installation</a> 
         </p> 
         <p><a href="portfolio.html">Portfolio</a> 
         </p> 
         <p><a href="clientlist.html">Client List</a> 
         </p> 
         <p><a href="contact.html" id="16">Contact</a> 
         </p> 
        </ul> 
       </nav> 
      </div> 
      <div id="wrapper"> 
       <div id="paragraph"> 
        <h1><a href="design.html">Design</a>, Display,<br> <a href="fabrication.html">Fabrication</a>,<br> <a href="installation.html">Installation</a>...</h1> 
        <p class="p">DS ARTS creates amazing environments that motivate, impress and make a statement. Through our design, production and installation expertise, we work with a wide spectrum of clients to create trade shows, special events, showrooms, restaurant and retail 
         interiors, sales and marketing centers, specialized decor and entertainment venues. Of course, everything is created with each client’s unique needs in mind. Take a look we think you’ll like what you see.</p> 
        <div class="icon"> 
         <img src="images/icon_home.png" alt="" /> 
        </div> 
       </div> 
       <div class="rotator"> 
        <div id="hero"> 
         <div id="next"> 
          <img src="images/right.png" width="50" height="50" alt="" /> 
         </div> 
         <div id="prev"> 
          <img src="images/left.png" width="50" height="50" alt="" /> 
         </div> 
         <div id="slider"> 
          <div id="slidewrap"> 
           <img src="images/conan.jpg" alt="scenic stage" /> 
           <span class="myCaption">CONAN O'BRIEN SHOW - MAJESTIC THEATER - Dallas</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/mickey.jpg" alt="display graphics" /> 
           <span class="myCaption">MATTEL - New York Toy Fair</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/Lenox square.jpg" alt="stryrofoam sculpture" /> 
           <span class="myCaption">LENOX SQUARE MALL - Atlanta</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/fisher.jpg" alt="Fisher Price" /> 
           <span class="myCaption">FISHER PRICE JPMA SHOW - Dallas</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/DSC03399.JPG" alt="lighting" /> 
           <span class="myCaption">VICTORY PARK DISCOVERY CENTER - Dallas</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/megazord.jpg" alt="styrofoam sculpture" /> 
           <span class="myCaption">BANDAI - New York Toy Fair</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/BIRD CAGES.jpg" alt="Cowboys Stadium" /> 
           <span class="myCaption">COWBOYS STADIUM - Arlington</span> 
          </div> 
          <div id="slidewrap"> 
           <img src="images/benten.jpg" alt="toy fair" /> 
           <span class="myCaption">BANDAI - New York Toy Fair</span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <footer class="site-footer"> 
      <div id="footwrap"> 
       <div itemscope="itemscope" itemtype="http://data-vocabulary.org/organization"> 
        <span itemprop="name">DS Arts</span>&nbsp;&nbsp;&nbsp;&nbsp; 
        <span itemprop="street-address">1111 South Lamar Street</span> 
        <span itemprop="locality">Dallas</span>, <span itemprop="region">TX</span> 
        <span itemprop="postal-code">75215</span> 
        <span itemprop="country-name">USA</span>&nbsp;&nbsp;&nbsp;&nbsp; 
        <p>Phone:&nbsp;<span itemprop="telephone">214-565-7858</span> &nbsp;&nbsp;&nbsp;&nbsp; 
        <p>Fax:&nbsp;<span itemprop="fax">214-565-7859</span> 
        </p>&nbsp;&nbsp;&nbsp;&nbsp; 
        <a href="mailto:[email protected]" itemprop="email"> [email protected]</a> 
       </div> 
      </div> 
     </footer> 
    </body> 
</html>

這是CSS。

@charset "utf-8"; 
* { 
    margin: 0; 
    padding: 0; 
} 
.page-wrap { 
    min-height: 100%; 
    position: relative; 
} 
body { 
    margin: 0px; 
    height: 100%; 
    width: 320px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
body header { 
    background-color: rgba(0,0,0,1.00); 
    width: 320px; 
    height: 105px; 
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
} 
.headerimage { 
    margin-top: 15px; 
    display: block; 
    margin-bottom: 16px; 
    overflow-x: visible; 
    position: relative; 
    float: left; 
    width: 260px; 
    height: auto; 
} 
.rotator { 
    float: left; 
    overflow-x: visible; 
    margin-top: 33px; 
    margin-bottom: 130px; 
    position:relative; 
} 
#hero { 
    margin: auto; 
    position: relative; 
    width:290px; 
    height:227px; 
} 
#slider { 
    position: relative; 
    width: 290px; 
    height: 227px; 
    background-color: rgba(0,0,0,1.00); 
    display: block; 
} 
#slidewrap { 
    position: fixed; 
    width:290px; 
    height:227px; 
    background-color: rgba(0,0,0,1.00); 
} 
#slidewrap img { 
    width:290px; 
    height:227px; 
} 
.myCaption { 
    color: #F6F0E2; 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    font-weight: bold; 
    font-size: x-small; 
    z-index: 99; 
    padding-left: 15px; 
    display: block; 
    width: 290px; 
} 
#next { 
    width: 5px; 
    height: 5px; 
    text-align: center; 
    line-height: 5px; 
    position: absolute; 
    top: 50px; 
    right: 0px; 
    z-index: 99; 
    cursor: pointer; 
    opacity: 0; 
    padding-right: 5px; 
    display:none; 
} 
#prev { 
    width: 5px; 
    height: 5px; 
    text-align: center; 
    line-height: 5px; 
    position: absolute; 
    top: 50px; 
    left::0px; 
    z-index: 99; 
    cursor: pointer; 
    opacity: 0; 
    padding-left: 5px; 
    display:none; 
} 
#hero:hover #next { 
    opacity: .8; 
    transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
} 
#hero:hover #prev { 
    opacity: .8; 
    transition: all .5s ease-out; 
    -webkit-transition: all .5s ease-out; 
} 
#wrapper script { 
    width: 320px; 
    height: 400px; 
    margin-right: 0px; 
    overflow-x: visible; 
    overflow-y: visible; 
} 
#wrapper { 
    width: 320px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 30px; 
    padding-right: 30px; 
    clear: left; 
    float: left; 
} 
#navwrap { 
    background-color: rgba(0,0,0,1.00); 
    height: 43px; 
    margin-top: 10px; 
    text-align: center; 
    position: relative; 
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    width: 100%; 
    min-width: 0px; 
    display:none; 
} 


#navbar { 
    width: 320px; 
    padding-top: 12px; 
    padding-left: 10px; 
    padding-right: 10px; 
    display: inline; 
} 


#navbar ul { 
    list-style-type: none; 
    font-size: small; 
    height: 50px; 
    text-transform: uppercase; 
} 

#navbar a { 
    text-align: center; 
    overflow-x: no-content; 
    width: 12.5%; 
    float: left; 
    display: inline; 
    height: 50px; 
} 
a:link { 
    text-decoration: none; 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    font-weight: bold; 
    color: #f6f0e2; 
} 
a:visited { 
    color: rgba(246,240,226,1.00); 

} 
a:hover , a:active, a:focus{ 
    color: #bf301a; 
} 
.p { 
    display: inline-block; 
    float: left; 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    color: #f6f0e2; 
    font-weight: bold; 
    width: 300px; 
} 
html, body { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    overflow-x: scroll; 
} 
#paragraph { 
    padding-top: 25px; 
    float: left; 
    clear: left; 
    width: 290px; 
} 
#paragraph .p { 
    display: inline; 
    padding-top: 15px; 
    font-size: 14px; 
    width: 270px; 
    line-height: 17px; 

} 
h1 { 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    color: #F6F0E2; 
    font-size: x-large; 
    text-transform: uppercase; 
    float: left; 
    line-height: 28px; 
    width: 320px; 

} 
#headerwrap { 
    width: 320px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 30px; 
    padding-right: 30px; 
} 
#map { 
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    margin-bottom: 80px; 
    float: left; 
    position: relative; 
    overflow-x: hidden; 
    line-height: normal; 
    white-space: nowrap; 
    margin-top: 30px; 
    display: block; 
} 
#columnwrap { 
    margin-left: auto; 
    margin-right: auto; 
    width: 320px; 
    padding-left: 30px; 
    padding-right: 30px; 
} 
#columnwrap p { 
    width: 44%; 
    float: left; 
    color: rgba(246,240,226,1.00); 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    font-weight: bold; 
    font-size: medium; 
    margin-top: 30px; 
    display: block; 
    margin-bottom: 70px; 
} 
#buildingimg { 
    margin-top: 40px; 
    display: none; 
    float: right; 
} 

.site-footer { 
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    box-shadow: 1px 1px 10px rgba(0,0,0,1.00); 
    width: 100%; 
    height: 60px; 
    position: relative; 
    background-color: rgba(0,0,0,1.00); 
    float: left; 
    margin-top: -60px; 
    clear: both; 
} 
#footwrap { 
    width: 320px; 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    clear: left; 
} 

#footwrap div { 
    color: #F6F0E2; 
    text-align: center; 
    font-weight: bold; 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    padding-top: 5px; 
    font-size: 11px; 
} 
#footwrap div p { 
    display: inline; 
} 

#portfoliowrapsmall { 
    margin-top: 33px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 70px; 
    -webkit-box-shadow: 3px 3px 20px rgba(0,0,0,1.00); 
    box-shadow: 3px 3px 20px rgba(0,0,0,1.00); 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    overflow-x: visible; 
    width: 960px; 
    float: left; 
    display: none; 
} 

#portfoliowrap { 
    margin-top: 33px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 70px; 
    -webkit-box-shadow: 1px 1px 20px rgba(0,0,0,1.00); 
    box-shadow: 1px 1px 20px rgba(0,0,0,1.00); 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    overflow-x: visible; 
    width: 960px; 
    float: left; 
    display: none; 
} 
#contactinfo { 
    float: left; 
    padding-top: 35px; 
    margin-left: 30px; 
} 
.icon { 
    clear: left; 
    padding-top: 20px; 
    position: relative; 
    -webkit-box-shadow: 0 0; 
    box-shadow: 0 0; 
} 
.icon img { 
    height: 180px; 
    width: 180px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 1px 1px 10px #000000; 
    box-shadow: 1px 1px 10px #000000; 
    border-radius: 125px; 
    border-collapse: collapse; 

}

我一直在努力工作一段時間。就像我說的，我在教自己，我不確定有時候從哪裏開始。我非常感謝我能得到的任何幫助。

下面的代碼的的jsfiddle：http://jsfiddle.net/v3c9s771/2/

來源

2014-09-12 mytaquitos

+2

一個jsfiddle或plunker可能會幫助很多。不過，感謝您發佈您的代碼。太多人忽視發佈代碼。 – 2014-09-12 15:11:40

+0

我不確定我是否正確使用jsfiddle。 http://jsfiddle.net/mytaquitos/v3c9s771/ – mytaquitos 2014-09-12 18:11:21

+0

我將其修復爲指向循環插件的CDN。 http://jsfiddle.net/v3c9s771/2/ – 2014-09-12 18:18:57

回答

0

我很難發現它鍛鍊你的問題。

從我的工作出發，我假設你的圖像在這個（320px）較小的設備上奇怪地大小。

#slidewrap img { 
    width:100%; 
    height:auto; 
}

更改圖像以填充父div可能會幫助你。儘管你的小提琴沒有幫助診斷。

來源

2014-09-14 18:49:52

相關問題

 相關問題