2016-11-12 55 views
0

晚上好,我用prev和next函数使用了cycle2,但是我无法将prev和next函数居中放在图像下。 我环顾四周,我知道它会变得愚蠢,但我看不到它。 非常令人沮丧。 感谢 加里周期2上一个和下一个

<script src="../../respond.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="http://malsup.github.com/jquery.cycle2.js"></script> 
 
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
@charset "UTF-8"; 
 
/* Simple fluid media 
 
    Note: Fluid media requires that you remove the media's height and width attributes from the HTML 
 
    http://www.alistapart.com/articles/fluid-images/ 
 
*/ 
 
img, object, embed, video { 
 
\t max-width: 100%; 
 
} 
 

 
/* IE 6 does not support max-width so default to width 100% */ 
 
.ie6 img { 
 
\t width:100%; 
 
} 
 

 
/* 
 
\t Dreamweaver Fluid Grid Properties 
 
\t ---------------------------------- 
 
\t dw-num-cols-mobile: \t \t 4; 
 
\t dw-num-cols-tablet: \t \t 8; 
 
\t dw-num-cols-desktop: \t 12; 
 
\t dw-gutter-percentage: \t 25; 
 
\t 
 
\t Inspiration from "Responsive Web Design" by Ethan Marcotte 
 
\t http://www.alistapart.com/articles/responsive-web-design 
 
\t 
 
\t and Golden Grid System by Joni Korpi 
 
\t http://goldengridsystem.com/ 
 
*/ 
 

 
.fluid { 
 
\t clear: both; 
 
\t margin-left: 0; 
 
\t width: 100%; 
 
\t float: left; 
 
\t display: block; 
 
} 
 

 
.fluidList { 
 
    list-style:none; 
 
    list-style-image:none; 
 
    margin:0; 
 
    padding:0;   
 
} 
 

 
/* Mobile Layout: 480px and below. */ 
 
    
 
.gridContainer { 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t width: 86.45%; 
 
\t padding-left: 2.275%; 
 
\t padding-right: 2.275%; 
 
\t clear: none; 
 
\t float: none; 
 
} 
 
#div1 { 
 
} 
 
.gallery { 
 
} 
 
.zeroMargin_mobile { 
 
margin-left: 0; 
 
} 
 
.hide_mobile { 
 
display: none; 
 
} 
 

 
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 
 

 
@media only screen and (min-width: 481px) { 
 

 
.gridContainer { 
 
\t width: 90.675%; 
 
\t padding-left: 1.1625%; 
 
\t padding-right: 1.1625%; 
 
\t clear: none; 
 
\t float: none; 
 
\t margin-left: auto; 
 
} 
 
#div1 { 
 
} 
 
.gallery { 
 
} 
 
.hide_tablet { 
 
display: none; 
 
} 
 
.zeroMargin_tablet { 
 
margin-left: 0; 
 
} 
 
} 
 

 
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 
 

 
@media only screen and (min-width: 769px) { 
 

 
.gridContainer { 
 
\t width: 88.5%; 
 
\t max-width: 1232px; 
 
\t padding-left: 0.75%; 
 
\t padding-right: 0.75%; 
 
\t margin: auto; 
 
\t clear: none; 
 
\t float: none; 
 
\t margin-left: auto; 
 
} 
 
#div1 { 
 
} 
 
.gallery { 
 
} 
 
.zeroMargin_desktop { 
 
margin-left: 0; 
 
} 
 
.hide_desktop { 
 
display: none; 
 
}
<body> 
 
\t <div class="gridContainer clearfix"> 
 
\t \t <div id="div1" class="fluid"></div> 
 
     <div class="fluid gallery"> 
 
     <br /> 
 
<br /> 
 
<div class="cycle-slideshow" 
 
\t data-cycle-fx="scrollHorz" 
 
    data-cycle-timeout="0" 
 
    data-cycle-prev="#prev" 
 
    data-cycle-next="#next" 
 
    data-cycle-center-horz=true 
 
    data-cycle-center-vert=true 
 
> 
 
<img src="http://malsup.github.io/images/p1.jpg"> 
 
    <img src="http://malsup.github.io/images/p2.jpg"> 
 
    <img src="http://malsup.github.io/images/p3.jpg"> 
 
    <img src="http://malsup.github.io/images/p4.jpg"> 
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="center"> 
 
    <span style="text-align: center; text-decoration: none; font:open-sans; font-size:12px; color:#000000;"> 
 
    <a href=# id="prev">Prev</a> 
 
    <a href=# id="next">Next</a></span> 
 
</div> 
 
     </div> 
 
\t </div> 
 
</body>

回答

相关问题