javascript - 制作此产品 slider 时遇到问题

标签 javascript html css slider product

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

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 标签是 self 结束的! 错误: <img src=""></img> 正确: <img src="" />
  3. 您的某些 css3 变量适用于 future 的浏览器和 -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 标签中。你已经在 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. 没有font这样的参数, 在 CSS 中!

注意事项:

  • 您没有提供图片。下次请谷歌一些图片，这样会更快地帮助你。
  • 使用像 jsfiddle.net 这样的网站, 为您的问题提供很好的例子。你可能会问:我为什么要把时间浪费在这上面？当我们查看您的示例时，我们会问您同样的问题。这将真正让您和我们更快地找到快速且有值(value)的解决方案。
  • 你的代码太乱了，我不知道元素<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>

关于javascript - 制作此产品 slider 时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6972088/

上一篇：javascript - 日期转换问题(从 JS -> .NET 像字符串一样发送)

下一篇：javascript - 回调是有条件地使用的吗？

相关文章：

javascript - 具有共享内容的 Accordion

javascript - 如何使用像backbone.js或angular.js这样的现代js框架将遗留的simgle网页/应用程序重构为MVC

javascript - 为什么我的 Node 服务器处理请求两次？

javascript - 可以使用带有 int 参数的 jQuery outerHeight 函数吗？

javascript - 传单.js : Pass feature property to class constructor

html - 并排、居中和响应式制作两个 vimeo 视频

javascript - Node 没有正确地 gc 我的对象

jQuery 水平滚动(点击时滑动 div)

html - 非 webkit 浏览器的 CSS 属性 print-color-adjust

css - 在父 SASS 上设置样式

©2024 IT工具网  联系我们