Question

我正在尝试创建一个2x2网格滑块/产品滑块。每张幻灯片在2x2网格中有4个图像。我试图围绕着我将如何做到这一点。我目前有一个列表结构

<div class="slider">
    <ul>
      <li></li>
        <ul>
          <li class="slider-product">product 1a</li>
          <li class="slider-product">product 2a</li>
          <li class="slider-product">product 3a</li>
          <li class="slider-product">product 4a</li>
        </ul>
      <li></li>
        <ul>
          <li class="slider-product">product 1b</li>
          <li class="slider-product">product 2b</li>
          <li class="slider-product">product 3b</li>
          <li class="slider-product">product 4b</li>
        </ul>
    </ul>
  </div>

但我不确定如何继续。谁能指点我一个例子？

Answer 1

如果我正确理解你想要的东西，它将会是这样的：

HTML：

<table>
    <tr>
        <td class="slider slider-0">
           <div class="navigation">
               <img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Mandarin.duck.arp.jpg" class="img" />
               <span class="nav nav-left"><<</span>
               <span class="nav nav-right">>></span>
           </div>
        </td>
        <td class="slider slider-1">
           <div class="navigation">
               <img src="http://critterbabies.com/wp-content/gallery/kittens/happy-kitten-kittens-5890512-1600-1200.jpg" class="img" />
               <span class="nav nav-left"><<</span>
               <span class="nav nav-right">>></span>
           </div>
        </td>
    </tr>
    <tr>
       <td class="slider slider-2">
               <img src="http://www.thehamtramckreview.com/wp-content/uploads/2014/07/backyard-chickens.jpg" class="img" />
           <div class="navigation">
               <span class="nav nav-left"><<</span>
               <span class="nav nav-right">>></span>
           </div>
       </td>
       <td class="slider slider-3">
           <div class="navigation">
               <img src="http://www.hedweb.com/animimag/parrot.jpg" class="img" />
               <span class="nav nav-left"><<</span>
               <span class="nav nav-right">>></span>
           </div>
       </td> 
    </tr>
</table>
<ul class="products-0 hidden">
    <li>http://upload.wikimedia.org/wikipedia/commons/5/51/Mandarin.duck.arp.jpg</li>
    <li>http://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg</li>
    <li>http://www.whateats.com/wp-content/uploads/2010/04/duck-jaroslav-novak.jpt_.jpg</li>
    <li>http://thefabweb.com/wp-content/uploads/2012/05/baby-duck-wallpaper.jpg</li>
<ul>
<ul class="products-1 hidden">
    <li>http://critterbabies.com/wp-content/gallery/kittens/happy-kitten-kittens-5890512-1600-1200.jpg</li>
    <li>http://static.comicvine.com/uploads/original/11113/111134695/3891161-6868490335-cats-.jpg</li>
    <li>http://critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg</li>
    <li>http://images4.fanpop.com/image/photos/16000000/Cute-Kitten-kittens-16096566-1280-800.jpg</li>
<ul>
<ul class="products-2 hidden">
    <li>http://www.thehamtramckreview.com/wp-content/uploads/2014/07/backyard-chickens.jpg</li>
    <li>http://cdn.sheknows.com/articles/free-range-chickens.jpg</li>
    <li>http://static.squarespace.com/static/5181d5b7e4b07b8c66ed5614/t/528eeee2e4b0fc15797f8ebf/1385098979427/chicken.jpg</li>
    <li>http://www.motherearthnews.com/~/media/Images/MEN/Editorial/Articles/Magazine%20Articles/2010/04-01/Best%20Chicken%20Breeds%20for%20Backyard%20Flocks/chickens1.jpg</li>
<ul>
<ul class="products-3 hidden">
    <li>http://www.hedweb.com/animimag/parrot.jpg</li>
    <li>http://www.wallpapershighd.com/wp-content/uploads/2014/05/images-of-parrots-5.jpg</li>
    <li>http://www.hdnewwallpapers.com/wp-content/uploads/2014/09/Parrots-HD-Wallpaper-Free-Download8.jpg</li>
    <li>http://frombeakstobarks.files.wordpress.com/2013/04/parrots-in-love.jpg</li>
<ul>

CSS：

.slider, .img {
    width:200px;
    height:200px;
    background-color:blue;
}

.nav {
    position: relative;
    background-color:green;
}

.nav:hover {
    font-size:18px;
}

.nav:active {
    font-size:16px;
}

.nav-right {
    left:80%;
}

.hidden {
    display:none;
}

的Javascript：

$(function() {
    var curSlide = [0, 0, 0, 0];

    $('.nav').click(function() {
        var rowIndex = $(this).closest('tr').index(),
            addToI   = (rowIndex != 0) ? rowIndex + 1 : 0,
            i        = $(this).closest('td').index() + addToI,
            slider   = $('.slider-' + i),
            products = $('.products-' + i),
            left     = $(this).hasClass('nav-left');

        if (left) {
            curSlide[i] = (curSlide[i] > 0) ? curSlide[i] - 1 : products.children('li').length - 1;
        } else {
            curSlide[i] = (curSlide[i] < products.children('li').length - 1) ? curSlide[i] + 1 : 0;
        }

        var src = products.find('li:eq(' + curSlide[i] + ')').text();
        slider.find('img').attr('src', src);
    });
});

这是 fiddle

Javascript网格滑块

1 个答案: