无法制作此产品滑块

Question

所以，我想让产品查看器具有缩略图，可以通过单击后/前按钮向后或向前滑动。我不知道为什么我的代码不起作用。这是代码。请帮我找出问题。谢谢！

Html代码

<div id="wrapper">

<div id="main-image">
</div>


<div class='main-slider'>

         <div class="window">
                <div class='slider-large-image'>
                <img src='img3.png' height="500" width="960"> </img> 
                <img src='img2.png' height="500" width="960"> </img> 
                <img src='img3.png' height="500" width="960"> </img> 
                <img src='img4.png' height="500" width="960"> </img>
                </div>    
         </div>

        <div class='slider-pager'>
        <a href="#" id="b"> &lsaquo; </a>
        <a href="#" id="f"> &rsaquo; </a>
         </div>   

</div>

Javascript代码

$(document).ready(function() {



var imagewidth = /*$(".window").width()*/960;
var imagesum = /*$(".slider-large-image img").size()*/5;
var imagereelwidth = imagewidth * imagesum;


$(".slider-large-image").css({'width' : imagereelwidth});

rotatef = function() {



$(".slider-large-image").animate({ 
left : -imagewidth
},500 );
};
rotateb = function() {



$(".slider-large-image").animate({ 
left : imagewidth
},500 );
};

$(".slider-pager a#b").click(function() {
rotateb(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
}); 
$(".slider-pager a#f").click(function() {
rotatef(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
}); 

});

CSS

#wrapper
 {
margin:0 auto;
 }
.main-slider
{
float:left;
position:relative;
margin-bottom:10px;
/*background-color:#CCC;*/
border: 0px solid #000;
top:25px;
left:0px;
z-index:1004;
-moz-border-radius:5px;
border-radius:5px;
    -moz-box-shadow: 0px 0px 30px 1px #999;
  -webkit-box-shadow: 0px 0px 30px 1px #999;
  box-shadow: 0px 0px 30px 1px #999;

}
.window
{
width: 960px;
height: 500px;
overflow:hidden;
position:relative;
}
.slider-large-image
{
position:absolute;
top:0px;
left:0px;
}


.slider-large-image img {float:left;}

.slider-pager
{
position:absolute;
float:left;
width: 100px;
height: 10px;
background-color:#333;
top:0%;
left:89.5%;
padding-bottom:10px;
padding-right:0;
 }
 .slider-pager a 
 {
padding:1px;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:700;
color:#ccc;
margin-right:5px;
width:1px;
height:1px;

position:relative;
top:-10px;
 }
.main-slider
{
padding:0px;
color:#FFF;
text-align: center;
line-height: 40px;
font:"Comic Sans MS", cursive;
font-size:20px;
text-decoration:none;
}
.main-slider .slider-pager a:hover
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
color:black;
}
.main-slider .slider-pager a.active
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
}
.main-slider .info-page
 {
background-color:#000;
width:600px;
height:50px;
text-align:center;
text-shadow:#666;
font:"28 Days Later";
color:#FFF;
line-height: 40px;
font-size:40px
 }
 .main-slider .info-page #d:hover
 {
color:#FF0;
  }

Answer 1

让我们从你的格式开始（我修复了，顺便说一句）：

1. 您的第一个<div id="wrapper">未关闭！
2. IMG-tag是自我结束的！ 错误： <img src=""></img> 正确： <img src="" />
3. 你的一些css3变量是针对未来的浏览器和-moz-，但缺少-webkit- !! 示例： -moz-border-radius: 10px; border-radius: 10px;
4. 另外，有一点你正在使用=''而另一个=“”。它基本没问题，但后来维护起来很烦人，看起来不太干净！示例：<img src='img3.png' height="200" width="300" />
5. 我在您提供的代码中找不到<div id="main-image"></div>的任何功能。下次在这里放置一个问题时删除这些类型的元素，因为这个元素与手头的问题100％无关。 （同样适用于你的css中的 和.main-slider .info-page #d:hover {}）
6. 没有看到任何理由，为什么.main-slider {}应该在css中声明两次（所以我合并它们，如果你有特殊目的，那么就把它放回原处）
7. 如果您没有为其他浏览器版本（例如移动版本）构建一些后备版本。那么就不需要将width =“”和height =“”变量直接放到您的IMG-tag中。您已经在css中找到了正确的位置：.slider-large-image img {float: left; width:; height:;}
8. 在您的CSS中，您有.slider-pager a和.main-slider .slider-pager a:hover。为什么还要在.main-slider前添加.slider-pager a:hover？
9. 如果css中的同一个变量有相同的参数，请使用逗号合并它们：.slider-pager a:hover, .slider-pager a:active {background-color: #999; -moz-border-radius: 10px; border-radius: 10px;}
10. 您使用position: absolute;太多了。我坚信，你的意思是使用position: relative;
11. 还有一个额外的}）;在这一切结束时。代码最初是在某个函数还是插件中？
12. 在css！
中没有font这样的参数

备注：

• 您没有提供图片。下次请谷歌一些图片，这样可以更快地帮助你。
• 使用jsfiddle.net等网站来举例说明您的问题。你可能会问：我为什么要浪费时间在那上面？当我们查看你的例子时，我们会问你同样的问题。对于我们来说，找到快速有价值的解决方案，这将真正让事情变得更快。
• 你的代码太乱了，我无法弄清楚元素<div class="slider-pager"></div>必须在哪里？它显然位于一般容器内（图像顶部），但位于顶部，底部或底部中心？我把它放在底部中心，因为它看起来最好）
• 删除了$(".slider-large-image").css({'width' : imagereelwidth});并添加了.slider-large-image，以使其无限次旋转。
• 我编辑了这么多，我忘了更新每一步。无论如何，它的工作原理。现在它也是无穷无尽的，这意味着旋转木马没有尽头。
• 我在这个答案上浪费了大约2个小时。所以基本上我懒得以插件的形式编写它。 Read this并按照这些步骤操作，如果您想将其放入插件表单中。
• 如果要添加自动切换幻灯片的功能，请使用jQuery doTimeout: Like setTimeout, but better！
• 我希望你不要以负面的形式回答我。社区准则实际上说，我们必须将新手指向正确的路径等蚀刻。我真的爱你了男人:)。

现场演示

<强> http://jsfiddle.net/hobobne/PmXr2/

完整版代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Having trouble making this product slider. Please help? - Kalle H. Väravas answer</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        html, body {margin: 0px; padding: 0px;}
        html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
        .cb {clear: both;}
        #wrapper {width: 400px; margin: 0px auto;}
            .main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
            .window {width: 300px; height: 200px; overflow: hidden; position: relative;}
                .slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
                    .slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
                        .slider-large-image li img {float: left; width: 300px; height: 200px;}
            .slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
                .slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
                    .slider-pager a:hover,
                    .slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
                    .slider-pager a:hover {color: black;}
                    .slider-pager a.active {/* background-color and border-radius used to be here.. */}
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="main-slider">
            <div class="window">
                <ul class="slider-large-image">
                    <li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
                    <li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
                    <li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
                    <li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
                </ul>
            </div>
            <div class="slider-pager"><a href="#" id="b">&lsaquo;</a><a href="#" id="f">&rsaquo;</a></div>
        </div>
        <br class="cb" />
    </div>
    <script>
        var imagewidth = $('.slider-large-image li').outerWidth();
        var imagesum = $('.slider-large-image li img').size();
        var imagereelwidth = imagewidth * imagesum;
        $(".slider-large-image").css({'width' : imagereelwidth});
        $('.slider-large-image li:first').before($('.slider-large-image li:last'));
        $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
        rotatef = function (imagewidth) {
            var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
            $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
                $('.slider-large-image li:last').after($('.slider-large-image li:first')); 
                $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
            }); 
        };
        rotateb = function (imagewidth) {
            var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;       
            $('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){               
                $('.slider-large-image li:first').before($('.slider-large-image li:last')); 
                $('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
            });
        };
        $(".slider-pager a#b").click(function () {
            rotateb(imagewidth);
            return false;
        });
        $(".slider-pager a#f").click(function () {
            rotatef(imagewidth);
            return false;
        });
    </script>
</body>
</html>

Answer 2

试试这个：

rotatef = function() {

$(".slider-large-image").animate({ 
"left" : "-="+imagewidth
},500 );
};

rotateb = function() {

$(".slider-large-image").animate({ 
"left": "+="+imagewidth
},500 );
};