描述： 我的平面设计师为我的网站设计了一种非常优雅的风格，但复制起来却很棘手。所以，我确实完美地复制了它，但我留下了一个结构，我无法弄清楚如何使用 javascript 进行转换。我什至不要求脚本，只是方法。
问题： 如何使用 javascript 使这个 html/css 结构平滑过渡？如果您认为结构根本不会转换，请提供帮助我清理后端的答案。
这看起来像什么的图像：
JFiddle 为此：http: //jsfiddle.net/YEeec/2/
如果您将查看器放宽，画廊将正确显示。它旨在顺利支持 950px 宽及以上。
测试： 铬
正是我正在尝试的转换： 我想将元素转换为在循环中从一个位置滑动到下一个位置。那是我最初的想法。但是，只需将图像从一个位置更改为下一个位置也可以
此元素的 HTML：
<div class="body-3"><!-- begin body 3 :: This area will hold the scroll gallery -->
<div class="body-3-upper-text center">
<p>A&G - Making Technology Easy</p>
Technology is meant to make your life easier, not harder. That's why at A&G, we work to ensure that your devices and systems work for you exactly as they should. Ask us about a budget-friendly solution for your technology needs.
</div>
<div class="body-3-slider-box">
<ul>
<!-- the idea behind this slider setup is for image1 - image7 (or unlimited image count) will be able to be rotated through the selection seamlessly. -->
<!-- when image3 is moved to the position of image4 (when the slider-selected class is moved to image3 and image4 recieves the slider-right-1 class), image2 moves to the position of image3 (image2 recieves the slider-left-1 class), and the same happens with image1, and then image7 rotates into the position of image1 by recieving the slider-left-3 class -->
<div class="slider-left-set">
<div id="slider-set-width-ext">
<!-- notice that technically, the slider-left set is listed backwards. This is because these elements need to float right, causing the first Item to be listed from the right side instead of listing left to right -->
<li class="slider-left-1" id="left-1"><img src="images/slider_3.png"><p class="front">Product 3 Title</p><span class="front">Product 3 Description</span><img id="reflection" src="images/slider_3.png"><div id="fade"></div></li>
<li class="slider-left-2" id="left-2"><img src="images/slider_2.png"><p class="front">Product 2 Title</p><span class="front">Product 2 Description</span><img id="reflection" src="images/slider_2.png"><div id="fade"></div></li>
<li class="slider-left-3" id="left-3"><img src="images/slider_1.png"><p class="front">Product 1 Title</p><span class="front">Product 1 Description</span><img id="reflection" src="images/slider_1.png"><div id="fade"></div></li>
</div>
</div>
<div class="slider-center-set">
<li class="slider-selected" id="slider-selected"><img src="images/slider_4.png"><p class="front">Managed Services</p><span class="front">Get protected by A&G today</span><img id="reflection" src="images/slider_4.png"><div id="fade"></div></li>
</div>
<div class="slider-right-set">
<div id="slider-set-width-ext">
<li class="slider-right-1" id="right-1"><img src="images/slider_5.png"><p class="front">Product 4 Title</p><span class="front">Product 5 Description</span><img id="reflection" src="images/slider_5.png"><div id="fade"></div></li>
<li class="slider-right-2" id="right-2"><img src="images/slider_6.png"><p class="front">Product 5 Title</p><span class="front">Product 6 Description</span><img id="reflection" src="images/slider_6.png"><div id="fade"></div></li>
<li class="slider-right-3" id="right-3"><img src="images/slider_7.png"><p class="front">Product 6 Title</p><span class="front">Product 7 Description</span><img id="reflection" src="images/slider_7.png"><div id="fade"></div></li>
</div>
</div>
</ul>
<div class="body-3-control-bar">
<img class="center-link" src="images/link.png">
<div id="transition-left"></div>
<div id="transition-right"></div>
</div>
</div>
</div><!-- end body 3 -->
这个特定元素的 CSS：
/*slider-selected class should set the centered list item to show the title and description. Otherwise, the default classes will not render.*/
.body-3-slider-box .slider-selected
{
pointer-events:auto;
}
/*this is to control the span section*/
.body-3-slider-box .slider-selected img
{
background-color:#252525;
}
.body-3-slider-box .slider-selected span
{
opacity:1;
}
/*this is to control the paragraph*/
.body-3-slider-box .slider-selected p
{
opacity:1;
}
/*this defines the text area above the sliders*/
.body-3-upper-text
{
width:80%;
font-size:16px;
color:#7f7f7f;
text-align:center;
}
/*this controls the style of the header of the upper text section above the sliders*/
.body-3-upper-text p
{
text-align:center;
font-size:20px;
margin-bottom:10px;
color:black;
}
.body-3-slider-box
{
margin-top:0px;
padding-top:50px;
width:100%;
height:430px;
overflow:hidden;
}
.body-3-slider-box ul
{
width:100%;
height:230px;
list-style:none;
}
.body-3-slider-box li
{
margin:0px 0px 0px 0px;
width:310px;
text-align:center;
opacity:0.7;
transition:opacity 0.2s;
}
.body-3-slider-box li p
{
margin-top:15px;
pointer-events:none;
font-size:18px;
font-weight:bold;
opacity:0;
}
.body-3-slider-box li img
{
width:300px;
height:170px;
background-color:#adadad;
margin-left:auto;
margin-right:auto;
}
.body-3-slider-box li:hover
{
opacity:1;
}
.body-3-slider-box li span
{
pointer-events:none;
opacity:0;
color:#7f7f7f;
}
.body-3-control-bar
{
margin-top:0px;
width:100%;
height:50px;
background-color:none;
z-index:2;
position:absolute;
}
.body-3-control-bar #transition-left
{
float:left;
margin-left:30%;
margin-top:-65px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
border-style:solid;
border-color:#7f7f7f;
border-width:0px 0px 1px 1px;
width:35px;
height:35px;
}
.body-3-control-bar #transition-right
{
float:right;
margin-right:30%;
margin-top:-65px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
border-style:solid;
border-color:#7f7f7f;
border-width:1px 1px 0px 0px;
width:35px;
height:35px;
}
.body-3-control-bar #transition-left:hover
{
border-width:0px 0px 2px 2px;
}
.body-3-control-bar #transition-right:hover
{
border-width:2px 2px 0px 0px;
}
.center-link
{
margin-left:49%;
margin-top:20px;
}
.slider-left-3
{
float:right;
}
.slider-left-2
{
float:right;
}
.slider-left-1
{
float:right;
}
.body-3-slider-box .slider-selected
{
opacity:1;
/* margin-left:auto;
margin-right:auto; */
}
.slider-right-1
{
float:left;
}
.slider-right-2
{
float:left;
}
.slider-right-3
{
float:left;
}
.slider-left-set
{
float:left;
height:170px;
width:33.33%;
}
.slider-center-set
{
float:left;
width:33.33%;
height:170px;
}
.slider-center-set li
{
margin-left:auto;
margin-right:auto;
}
.slider-center-set li img
{
transition:margin-top 0.5s ease-out, margin-bottom 0.5s ease-out;
}
.slider-center-set li img:hover
{
margin-top:-10px;
margin-bottom:20px;
}
.slider-center-set li:hover #reflection
{
opacity:0.3;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
}
.slider-right-set
{
float:left;
width:33.33%;
height:170px;
}
.slider-left-set #slider-set-width-ext
{
width:350%;
margin-left:-250%;
}
.slider-right-set #slider-set-width-ext
{
width:350%;
margin-right:-250%;
}
#reflection
{
position:relative;
z-index:1;
margin-top:-119px;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
opacity:0.9;
box-shadow: 0px 0px 900px 30px white;
transition:opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
#fade
{
position:relative;
z-index:2;
margin-top:-175px;
width:302px;
height:175px;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0.3) 89%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,0.7)), color-stop(89%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0.3) 89%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
margin-left:auto;
margin-right:auto;
-webkit-transform:rotateX(70deg) rotateZ(180deg) rotateY(180deg);
}
.front
{
position:relative;
z-index:3;
}