Question

更新2 现在有Next / Prev按钮，但是无法对它们进行编程以显示幻灯片。

更新1 通过使用单选按钮方法，我设法按照我想要的方式定位图像 - prooflink。

仍然存在以下问题：

1）由于某种原因，中央图像被部分看到（在本地用prefixfree.min.js看起来一切都很好），任何想法为什么？

2）无法附加链接到中心图像的img并使其正常工作，请提示。

3）有关如何附加下一个/上一个按钮以便无限移动幻灯片的任何线索？

新的更好的代码：

1）http://jsfiddle.net/Goodnewstown/rvBS2/5/

我好！难以确定如何在中间制作带有活动放大图像的滑块。按下向右或向左按钮后，分别从中心右侧出现下一张图像。此外，此图像移动到中心并增长到300-400％，并且是相关页面的链接。链接到我的意思 - imagizer.imageshack.us/v2/1313x437q90/208/t12a.jpg 我被困在所有这一切的开头附近; /

我的HTML代码：

<div class="SliderWrapper">
<a href="#" class="control_prev"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/89/fpc8.png" alt="Button left" width="102" height="102"></a>
<a href="#" class="control_next"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/7/1d36.png" alt="Button right" width="102" height="102"></a></div>
<div class="Slider">
<ul>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/17/yqtu.png" alt="France small" width="104" height="104"></a></li>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/198/bl8i.png" alt="Russia small" width="104" height="104"></a></li>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/13/hxgg.png" alt="Germany small" width="104" height="104"></a></li>      
<li><a href="#"> <img src="http://imagizer.imageshack.us/v2/150x100q90/c/585/pc91.png" alt="France small" width="104" height="104"></a></li>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/51/e624.png" alt="Russia small" width="104" height="104"></a></li>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/138/q3he.png" alt="Germany small" width="104" height="104"></a></li>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/837/4kzw.png" alt="Russia small" width="104" height="104"></a></li>
<li><a href="#"><img src="http://imagizer.imageshack.us/v2/150x100q90/c/440/iy3q.png" alt="Germany small" width="104" height="104"></a></li>
</ul>
</div>
</div>

我的CSS代码：

 .SliderWrapper {
    width: 1900px;
    height: 400px;}
    .Slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto 0 auto;}
    .Slider ul {
    position: relative;
    margin-left: 200px;
    padding: 0;
    height: 200px;
    list-style: none;}
    .Slider ul li {
    position: relative;
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: 110px;
    height: 110px;
    background: #ccc;}
    a.control_prev, a.control_next {
    position: absolute;
    z-index: 999;
    display: block;
    width: auto;
    height: auto;
    background: #2a2a2a;
    opacity: 0.8;
    cursor: pointer;}
    a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;}
    a.control_prev {
    border-radius: 0 2px 2px 0;} 
    a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;}

具有挑战性转换的CSS3滑块，part2，re

0 个答案: