有问题，使这个产品滑块

Having trouble making this product slider

本文关键字：有问题      更新时间：2023-09-26

所以，我想做一个产品查看器的东西有缩略图，可以滑动向后或向前通过点击后/前按钮。我不知道为什么我的代码不工作。下面是代码。请帮我找出问题，谢谢!

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;
  }

让我们从你的格式开始(顺便说一下，我已经修复了):

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

指出:

  • 您没有提供图片。下次请谷歌一些图片，这样会更快地帮助你。
    • 使用像jsfiddle.net这样的网站，让你的问题成为好的例子。你可能会问:我为什么要在这上面浪费时间呢?当我们看到你的例子时，我们会问你同样的问题。这真的会让事情更快，为您和我们，找到快速和有价值的解决方案。
  • 你的代码是如此混乱，我不知道元素<div class="slider-pager"></div>必须坐在哪里?它显然在一般容器内(在图像的顶部)，但在顶部，底部或底部中心?我把它放在中间底部，因为它在那里看起来最好)
  • 删除$(".slider-large-image").css({'width' : imagereelwidth});，添加.slider-large-image，使其无限旋转。
  • 我编辑的太多了，以至于我忘了更新每一步。不管怎样，它是有效的。而且它现在是无止境的，这意味着旋转木马没有尽头。
    • 我在这个答案上浪费了大约2个小时。所以基本上我太懒了，没有把它写成插件的形式。如果你想把它放在一个插件形式中，请阅读并遵循这些步骤。如果你想添加一个功能，自动切换幻灯片，然后使用jQuery的doTimeout:像setTimeout，但更好!我希望你不要用否定的形式来理解我的回答。社区指导方针实际上说，我们必须为新手指出正确的道路等等。我真的爱你，男人:)

现场演示

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>

试试这个:

rotatef = function() {
$(".slider-large-image").animate({ 
"left" : "-="+imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({ 
"left": "+="+imagewidth
},500 );
};
相关文章：