怎么实现点击按钮 换一组轮播图？求大神

求大神帮我实现 （点击 白色，蓝色，粉色的图片，切换轮播，急急急~~~）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no">
<title>科莱丽 - Clarisonic</title>
<meta name="description" content="Clarisonic">
<meta name="keywords" content="Clarisonic">
<link rel="stylesheet" href="css/layout.css">
<link rel="apple-touch-icon" href="images/icon/icon_57.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/icon/icon_76.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/icon/icon_120.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/icon/icon_152.png">
</head><body>
<section class="container">
<header>
<div class="hr"></div>
<a class="logo left" href="#"><img src="images/public/logo.jpg"></a>
<nav  class="nav-icon">
<a href="tel:12345678901"><span class="icon-phone"><img src="images/public/icon_3.png"></span></a>
<a href="#">
<span class="icon-cart"><img src="images/public/icon_2.png"></span>
<span class="badge">9+</span>
</a>
<a href="#"><span class="icon-login"><img src="images/public/icon_1.png"></span></a>
</nav>
</header> 

<div class="details-nav">
<a href="javascript:history.back()" class="left"></a>
<span class="fm-mr h6 c_999 left details-text">满400免运费,满额赠即可全国免费配</span>
<span class="left details-span"><img src="images/icon-cart.jpg"></span>
</div>


<div class="slider swipe clear">
<div class="swipe-wrap"> 
<div><a href="#"><img src="images/product/pro-01.jpg"></a></div>
<div><a href="#"><img src="images/product/pic-01.jpg"></a></div>
</div>
</div>


<div class="details-con clear">
<div class="details-con-left left">
<h3 class="h2 fm-mr dark">科莱丽PLUS</h3>
<h4 class="h4 fm-mr dark">声波深彻净颜仪</h4>
<p class="h5 grey fm-mr">全能型/适用于脸部及身体肌肤包含敏感刷头及身体专用刷头2年保修服务</p>
</div>

<div class="details-con-right right">
<div class="left h6 grey"><img class="details-img" src="images/product/arow_01.jpg">白<br/>色</div>
<div class="left h6 grey"><img src="images/product/arow_02.jpg">粉<br/>色</div>
<div class="left h6 grey"><img src="images/product/arow_03.jpg">蓝<br/>色</div>
<p class="fm-mr dark">￥ 1850</p>
<a href="#" class="clear details-sub white">立即购买</a>
<a href="#" class="clear"><img src="images/product/ck-st.jpg" style="width:90%; margin:3px 0;"></a>
</div>
</div>

<div class="segmented-control clear">
<a class="control-item" href="javascript:void(0)">使用说明</a>
<a href="javascript:void(0)">产品比较</a>
<a href="javascript:void(0)">使用评价</a>
</div>

<div class="details-jq">

<div class="details-nr">
<p class="fm-mr">科莱丽PLUS声波深彻净颜仪有3档速度清洁面部，另有身体模式可清洁需要特别关注的身体部位。使用我们的身体扩展延伸刷柄可更容易地清洁较难清洁的部位。<br/><br/>使用指南<br/>前额(20秒)，鼻/下颚(20秒)，左右脸颊(各10秒)。我们的T-Timer®会发出蜂鸣，提醒您清洁面部的下一个部位。</p>
</div>

<div class="details-nr" style="display:none;">
<div>
<img src="images/product/pro-bj01.jpg" class="nr-bj left" />
<img src="images/product/pro-bj02.jpg" class="nr-bj right" />
</div>
<div class="nr-table clear">
<img src="images/product/pro-bj0.jpg"/>
<img src="images/product/pro-bj1.jpg"/>
<img src="images/product/pro-bj2.jpg"/>
</div>
</div>

<div class="details-nr" style="display:none;">
<img src="images/product/pro-pj_02.jpg"/>
<img src="images/product/pro-pj_03.jpg"/>
<img src="images/product/pro-pj_04.jpg"/>
<img src="images/product/pro-pj_05.jpg"/>
<img src="images/product/pro-pj_06.jpg"/>
<img src="images/product/pro-pj_07.jpg"/>
<img src="images/product/pro-pj_08.jpg"/>
<img src="images/product/pro-pj_09.jpg"/>
<img src="images/product/pro-pj_10.jpg"/>
<a href="javascript:scroll(0,0)" class="h5 tr details-nr-a">返回顶部</a>
</div>

</div>
</section>
<script src="scripts/zepto.min.js"></script>
<script src="scripts/androidKeyboard.js"></script>
<script src="scripts/common.js"></script>
<script src="scripts/swipe.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".segmented-control a").click(function(){
  $(this).addClass("control-item").siblings().removeClass("control-item");
  var abc=$(this).index();
  $(".details-jq .details-nr").eq(abc).css("display","block").siblings().css("display","none");
  });
});
/*banner*/
var $slider = $('.swipe-wrap');
$slider.after('<div class="swipe-nav"></div>');
var $swipeNav = $('.swipe-nav');
for(var i=0;i<$slider.children('div').length;i++) {
$swipeNav.append('<a></a>');
}
$swipeNav.children().first().addClass('on');
$swipeNav.css({"left": ($(document).width() - $swipeNav.width()) / 2 + 'px'});
$('.slider').Swipe({
 auto: 3000,
 startSlide: 0,
 continuous: true,
 callback: function(pos) {
 var i = $swipeNav.children('a').length;
 while (i--) {
 $swipeNav.children('a')[i].className = '';
}
$swipeNav.children('a')[pos].className = 'on';
 }
});
</script>
</body>
</html>
求大神帮我实现 （点击 白色，蓝色，粉色的图片，切换轮播，急急急~~~）

解决方案 »

  1.   

    swipe.js是啥内容. LZ自己跟一下代码呗
      

  2.   

    /*
     * Swipe 2.0
     *
     * Brad Birdsall
     * Copyright 2013, MIT License
     *
    */function Swipe(container, options) {  "use strict";  // utilities
      var noop = function() {}; // simple no operation function
      var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution  // check browser capabilities
      var browser = {
        addEventListener: !!window.addEventListener,
        touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
        transitions: (function(temp) {
          var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
          for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
          return false;
        })(document.createElement('swipe'))
      };  // quit if no root element
      if (!container) return;
      var element = container.children[0];
      var slides, slidePos, width, length;
      options = options || {};
      var index = parseInt(options.startSlide, 10) || 0;
      var speed = options.speed || 300;
      options.continuous = options.continuous !== undefined ? options.continuous : true;  function setup() {    // cache slides
        slides = element.children;
        length = slides.length;    // set continuous to false if only one slide
        if (slides.length < 2) options.continuous = false;    //special case if two slides
        if (browser.transitions && options.continuous && slides.length < 1) {
          element.appendChild(slides[0].cloneNode(true));
          element.appendChild(element.children[1].cloneNode(true));
          slides = element.children;
        }    // create an array to store current positions of each slide
        slidePos = new Array(slides.length);    // determine width of each slide
        width = container.getBoundingClientRect().width || container.offsetWidth;    element.style.width = (slides.length * width) + 'px';    // stack elements
        var pos = slides.length;
        while(pos--) {      var slide = slides[pos];      slide.style.width = width + 'px';
          slide.setAttribute('data-index', pos);      if (browser.transitions) {
            slide.style.left = (pos * -width) + 'px';
            move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
          }    }    // reposition elements before and after index
        if (options.continuous && browser.transitions) {
          move(circle(index-1), -width, 0);
          move(circle(index+1), width, 0);
        }    if (!browser.transitions) element.style.left = (index * -width) + 'px';    container.style.visibility = 'visible';  }  function prev() {    if (options.continuous) slide(index-1);
        else if (index) slide(index-1);  }  function next() {    if (options.continuous) slide(index+1);
        else if (index < slides.length - 1) slide(index+1);  }  function circle(index) {    // a simple positive modulo using slides.length
        return (slides.length + (index % slides.length)) % slides.length;  }  function slide(to, slideSpeed) {    // do nothing if already on requested slide
        if (index == to) return;    if (browser.transitions) {      var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward      // get the actual position of the slide
          if (options.continuous) {
            var natural_direction = direction;
            direction = -slidePos[circle(to)] / width;        // if going forward but to < index, use to = slides.length + to
            // if going backward but to > index, use to = -slides.length + to
            if (direction !== natural_direction) to =  -direction * slides.length + to;      }      var diff = Math.abs(index-to) - 1;      // move all the slides between index and to in the right direction
          while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);      to = circle(to);      move(index, width * direction, slideSpeed || speed);
          move(to, 0, slideSpeed || speed);      if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place    } else {      to = circle(to);
          animate(index * -width, to * -width, slideSpeed || speed);
          //no fallback for a circular continuous if the browser does not accept transitions
        }    index = to;
        offloadFn(options.callback && options.callback(index, slides[index]));
      }  function move(index, dist, speed) {    translate(index, dist, speed);
        slidePos[index] = dist;  }  function translate(index, dist, speed) {    var slide = slides[index];
        var style = slide && slide.style;    if (!style) return;    style.webkitTransitionDuration =
        style.MozTransitionDuration =
        style.msTransitionDuration =
        style.OTransitionDuration =
        style.transitionDuration = speed + 'ms';    style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
        style.msTransform =
        style.MozTransform =
        style.OTransform = 'translateX(' + dist + 'px)';  }  function animate(from, to, speed) {    // if not an animation, just reposition
        if (!speed) {      element.style.left = to + 'px';
          return;    }    var start = +new Date;    var timer = setInterval(function() {      var timeElap = +new Date - start;      if (timeElap > speed) {        element.style.left = to + 'px';        if (delay) begin();        options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);        clearInterval(timer);
            return;      }      element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px';    }, 4);  }  // setup auto slideshow
      var delay = options.auto || 0;
      var interval;  function begin() {    interval = setTimeout(next, delay);  }  function stop() {    delay = 0;
        clearTimeout(interval);  }
      // setup initial vars
      var start = {};
      var delta = {};
      var isScrolling;  // setup event capturing
      var events = {    handleEvent: function(event) {      switch (event.type) {
            case 'touchstart': this.start(event); break;
            case 'touchmove': this.move(event); break;
            case 'touchend': offloadFn(this.end(event)); break;
            case 'webkitTransitionEnd':
            case 'msTransitionEnd':
            case 'oTransitionEnd':
            case 'otransitionend':
            case 'transitionend': offloadFn(this.transitionEnd(event)); break;
            case 'resize': offloadFn(setup); break;
          }      if (options.stopPropagation) event.stopPropagation();    },
        start: function(event) {      var touches = event.touches[0];      // measure start values
          start = {        // get initial touch coords
            x: touches.pageX,
            y: touches.pageY,        // store time to determine touch duration
            time: +new Date      };      // used for testing first move event
          isScrolling = undefined;      // reset delta and end measurements
          delta = {};      // attach touchmove and touchend listeners
          element.addEventListener('touchmove', this, false);
          element.addEventListener('touchend', this, false);    },
        move: function(event) {      // ensure swiping with one touch and not pinching
          if ( event.touches.length > 1 || event.scale && event.scale !== 1) return      if (options.disableScroll) event.preventDefault();      var touches = event.touches[0];      // measure change in x and y
          delta = {
            x: touches.pageX - start.x,
            y: touches.pageY - start.y
          }      // determine if scrolling test has run - one time test
          if ( typeof isScrolling == 'undefined') {
            isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
          }      // if user is not trying to scroll vertically
          if (!isScrolling) {        // prevent native scrolling
            event.preventDefault();        // stop slideshow
            stop();
      

  3.   


            // increase resistance if first or last slide
            if (options.continuous) { // we don't add resistance at the end          translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);
              translate(index, delta.x + slidePos[index], 0);
              translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);        } else {          delta.x =
                delta.x /
                  ( (!index && delta.x > 0               // if first slide and sliding left
                    || index == slides.length - 1        // or if last slide and sliding right
                    && delta.x < 0                       // and if sliding at all
                  ) ?
                  ( Math.abs(delta.x) / width + 1 )      // determine resistance level
                  : 1 );                                 // no resistance if false          // translate 1:1
              translate(index-1, delta.x + slidePos[index-1], 0);
              translate(index, delta.x + slidePos[index], 0);
              translate(index+1, delta.x + slidePos[index+1], 0);
            }      }    },
        end: function(event) {      // measure duration
          var duration = +new Date - start.time;      // determine if slide attempt triggers next/prev slide
          var isValidSlide =
                Number(duration) < 250               // if slide duration is less than 250ms
                && Math.abs(delta.x) > 20            // and if slide amt is greater than 20px
                || Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width      // determine if slide attempt is past start and end
          var isPastBounds =
                !index && delta.x > 0                            // if first slide and slide amt is greater than 0
                || index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0      if (options.continuous) isPastBounds = false;      // determine direction of swipe (true:right, false:left)
          var direction = delta.x < 0;      // if not scrolling vertically
          if (!isScrolling) {        if (isValidSlide && !isPastBounds) {          if (direction) {            if (options.continuous) { // we need to get the next in this direction in place              move(circle(index-1), -width, 0);
                  move(circle(index+2), width, 0);            } else {
                  move(index-1, -width, 0);
                }            move(index, slidePos[index]-width, speed);
                move(circle(index+1), slidePos[circle(index+1)]-width, speed);
                index = circle(index+1);          } else {
                if (options.continuous) { // we need to get the next in this direction in place              move(circle(index+1), width, 0);
                  move(circle(index-2), -width, 0);            } else {
                  move(index+1, width, 0);
                }            move(index, slidePos[index]+width, speed);
                move(circle(index-1), slidePos[circle(index-1)]+width, speed);
                index = circle(index-1);          }          options.callback && options.callback(index, slides[index]);        } else {          if (options.continuous) {            move(circle(index-1), -width, speed);
                move(index, 0, speed);
                move(circle(index+1), width, speed);          } else {            move(index-1, -width, speed);
                move(index, 0, speed);
                move(index+1, width, speed);
              }        }      }      // kill touchmove and touchend event listeners until touchstart called again
          element.removeEventListener('touchmove', events, false)
          element.removeEventListener('touchend', events, false)    },
        transitionEnd: function(event) {      if (parseInt(event.target.getAttribute('data-index'), 10) == index) {        if (delay) begin();        options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);      }    }  }  // trigger setup
      setup();  // start auto slideshow if applicable
      if (delay) begin();
      // add event listeners
      if (browser.addEventListener) {    // set touchstart event on element
        if (browser.touch) element.addEventListener('touchstart', events, false);    if (browser.transitions) {
          element.addEventListener('webkitTransitionEnd', events, false);
          element.addEventListener('msTransitionEnd', events, false);
          element.addEventListener('oTransitionEnd', events, false);
          element.addEventListener('otransitionend', events, false);
          element.addEventListener('transitionend', events, false);
        }    // set resize event on window
        window.addEventListener('resize', events, false);  } else {    window.onresize = function () { setup() }; // to play nice with old IE  }  // expose the Swipe API
      return {
        setup: function() {      setup();    },
        slide: function(to, speed) {      // cancel slideshow
          stop();      slide(to, speed);    },
        prev: function() {      // cancel slideshow
          stop();      prev();    },
        next: function() {      // cancel slideshow
          stop();      next();    },
        stop: function() {      // cancel slideshow
          stop();    },
        getPos: function() {      // return current index position
          return index;    },
        getNumSlides: function() {      // return total number of slides
          return length;
        },
        kill: function() {      // cancel slideshow
          stop();      // reset element
          element.style.width = '';
          element.style.left = '';      // reset slides
          var pos = slides.length;
          while(pos--) {        var slide = slides[pos];
            slide.style.width = '';
            slide.style.left = '';        if (browser.transitions) translate(pos, 0, 0);      }      // removed event listeners
          if (browser.addEventListener) {        // remove current event listeners
            element.removeEventListener('touchstart', events, false);
            element.removeEventListener('webkitTransitionEnd', events, false);
            element.removeEventListener('msTransitionEnd', events, false);
            element.removeEventListener('oTransitionEnd', events, false);
            element.removeEventListener('otransitionend', events, false);
            element.removeEventListener('transitionend', events, false);
            window.removeEventListener('resize', events, false);      }
          else {        window.onresize = null;      }    }
      }}
    if ( window.jQuery || window.Zepto ) {
      (function($) {
        $.fn.Swipe = function(params) {
          return this.each(function() {
            $(this).data('Swipe', new Swipe($(this)[0], params));
          });
        }
      })( window.jQuery || window.Zepto )
    }
      

  4.   

    参考一下http://xiemin.me/bootstrap-2.3.0/examples/carousel.html这个画面吧<!-- Carousel
        ================================================== -->
        <div id="myCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
              <img src="../assets/img/examples/slide-01.jpg" alt="">
              <div class="container">
                <div class="carousel-caption">
                  <h1>Example headline.</h1>
                  <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <a class="btn btn-large btn-primary" href="#">Sign up today</a>
                </div>
              </div>
            </div>
            <div class="item">
              <img src="../assets/img/examples/slide-02.jpg" alt="">
              <div class="container">
                <div class="carousel-caption">
                  <h1>Another example headline.</h1>
                  <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <a class="btn btn-large btn-primary" href="#">Learn more</a>
                </div>
              </div>
            </div>
            <div class="item">
              <img src="../assets/img/examples/slide-03.jpg" alt="">
              <div class="container">
                <div class="carousel-caption">
                  <h1>One more for good measure.</h1>
                  <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
                </div>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div><!-- /.carousel -->
      

  5.   

    贴出来的是关键代码
    你参照这个画面上的HTML代码就能实现你的功能了
      

  6.   

    点击查看演示代码，点击下面的三个颜色圈，点中后调到相应颜色的图片组。
    一个图片组放到一个div里面，比如下面，这样轮播的时候，就会作为一组，而不是单独的图片            <a href="#"><img src="http://www.clarisonic.cn/clarisonic/img/product/packshot/S1086500U_s_1.jpg" /></a>
                <a href="#"><img src="http://www.clarisonic.cn/clarisonic/img/product/packshot/S1086500U_s_2.jpg" /></a>
            </div>
            <div>
                <a href="#"><img src="http://www.clarisonic.cn/clarisonic/img/product/packshot/S1118400U_s_1.jpg" /></a>
                <a href="#"><img src="http://www.clarisonic.cn/clarisonic/img/product/packshot/S1118400U_s_2.jpg" /></a>
            </div>按钮点击事件如下    $('.details-img').click(function(){
            var i = $(this).parent().index();
            window.mySwipe.slide(i, 100);
        });
      

  7.   

    用这个插件好了哇 jquery_marquee.js，参数配置就可以了。