使用 css 设置 jquery 旋转器样式答案

【问题标题】：styling a jquery rotator with css使用 css 设置 jquery 旋转器样式
【发布时间】：2014-09-12 13:17:37
【问题描述】：

我在设置 jquery 图像旋转器样式时遇到问题。我对网络还是很陌生。我让旋转器适用于两种显示器尺寸，但我无法让它适用于 320 宽的屏幕。它似乎与 .mycaption 有关，因为我在滑块顶部看到了一个奇怪的栏。

这里是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:dkolbo@dsarts.com" itemprop="email"> dkolbo@dsarts.com</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/

【问题讨论】：

一个 jsfiddle 或 plunker 在这里可能会有很大帮助。不过，感谢您发布您的代码。太多人忽略了发布代码。
我不确定我是否正确使用了 jsfiddle。 jsfiddle.net/mytaquitos/v3c9s771
我将其修复为指向循环插件的 CDN。 jsfiddle.net/v3c9s771/2
似乎工作正常。当您第一次发布时，我早些时候制作了一个 jsfiddle，它也有效。必须为我们复制您的问题：p
i.imgur.com/4hLyWIo.jpg

标签： jquery css rotator

【解决方案1】：

我发现很难解决你的问题。

根据我的研究，我认为您的图片在这个 (320 像素) 较小的设备上的尺寸很奇怪。

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

更改图像以填充父 div 可能会对您有所帮助。尽管您的小提琴对诊断没有任何帮助。

【讨论】：