1

我将从淡入效果开始，其中触摸完美，图像在滑动时响应变化 - 但是 - 我有我的网站的 div 容器被发送到背景而不是图像前面。

我正在尝试将 flexslider 用作带触摸的全屏背景滑块。这是我的代码，如果有人愿意伸出援助之手。

问候， G

HTML 代码：

<div class="flexslider">
<ul class="slides">
<li>
  <img src="images/b3.jpg" />
</li>
<li>
  <img src="images/b4.jpg" />
</li>
<li>
  <img src="images/b6.jpg" />
</li>
</ul>
</div>

<div id="mainContainer2">

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT.

</div>
</body>

CSS 代码：

/* CSS Document */
*{margin:0;paddding:0}

html, body {
font-size: 12px;
margin:0;
paddding:0;
}

#mainContainer2 {
margin: auto;
width: 1000px;
height: 655px;
position:relative;
}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider { width:100%; height: 100%; margin: 0; padding: 0; position:absolute;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide     the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}

    html .slides {height: 1%;}

/* No JavaScript Fallback /
/ If you are not using another script, such as Modernizr, make sure you

    include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; position:absolute; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block;     background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30);     cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
4

0 回答 0