• 拖拽大图轮播pc 移动兼容

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>   
</head>
<body>
    <div class="jq22-container">
       
        <article class="container">
            <section>
              
              <figure id="full_feature" class="swipslider">
                <ul class="sw-slides">
                 <li class="sw-slide">
                    <img src="" alt="">
                  </li>
                  <li class="sw-slide">
                    <img src="" alt="">
                  </li>       
                  <li class="sw-slide">
                    <img src="" alt="Tiny Tina">
                  </li>
                  <li class="sw-slide">
                    <img src="" alt="">
                  </li>
                  <li class="sw-slide">
                    <img src="" alt="Redhead girl">
                  </li>
                </ul>
              </figure>
              
            </section>
            
            
       </div>
    
    <script type="text/javascript">
        $(window).load(function() {
              $('#full_feature').swipeslider();
              $('#content_slider').swipeslider({
                transitionDuration: 600,
                autoPlayTimeout: 10000,
                sliderHeight: '300px'
              });
              $('#responsiveness').swipeslider();
              $('#customizability').swipeslider({
                transitionDuration: 1500, 
                autoPlayTimeout: 4000, 
                timingFunction: 'cubic-bezier(0.38, 0.96, 0.7, 0.07)',
                sliderHeight: '30%'});
            });
    </script>
</body>
</html>

    css

    
.container{
  margin: 0 auto;
  max-width: 640px;
}

a:link {
  color: #fff0d5; }

a:hover {
  color: #aaa3fc; }

a:active {
  color: #9289ff; }

a:visited {
  color: #fff0d5; }

.swipslider {
  margin: 0 auto; }

#content_slider {
  background-color: #f0f0f0;
  width: 640px; }

  #content_slider .wanted {
    padding: 25px; }
    #content_slider .wanted:after {
      display: table;
      content: "";
      clear: both; }
    #content_slider .wanted img {
      float: left;
      position: relative;
      height: 225px;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.33);
      margin-right: 15px; }
    #content_slider .wanted .description {
      float: left;
      padding: 10px;
      display: block;
      font-size: 16px;
      color: #343332;
      background: #e5e5e5;
      height: 225px;
      width: 349px;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.58);
      white-space: normal; }
 
      #content_slider .wanted .description h1 {
        font-size: 18px;
        margin: 0;
        text-align: left;
        color: #515f6c;
        text-shadow: none; }
      #content_slider .wanted .description::after {
        display: table;
        content: "";
        clear: both; }
      #content_slider .wanted .description p {
        margin-bottom: 1px;
        margin-top: 6px;
        font-size: 14px; }
      #content_slider .wanted .description p.award {
        color: #be9a02; }
      #content_slider .wanted .description ul {
        list-style: square;
        padding-left: 20px;
        font-size: 14px; }
  
      #content_slider .wanted .description strong {
        color: #515f6c; }

#customizability .sw-next-prev {
  width: 120px;
  height: 60px;
  background-color: rgba(82, 82, 82, 0);
  color: rgba(255, 254, 235, 0.28);
  border-radius: 3px;
  font-size: 25px; }
  #customizability .sw-next-prev:hover {
    color: #fffeeb;
    background-color: #525252;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.57); }

#customizability .sw-prev {
  left: 0%; }
  #customizability .sw-prev::after {
    line-height: 60px;
    content: '< back'; }

#customizability .sw-next {
  right: 0%; }
  #customizability .sw-next::after {
    line-height: 60px;
    content: 'next >'; }
#customizability .sw-bullet {
  top: 4%; }

  #customizability .sw-bullet li {
    width: 10px;
    height: 5px;
    background-color: rgba(255, 254, 235, 0.28);
    border-radius: 0;
    vertical-align: middle; }

    #customizability .sw-bullet li.active {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid #fffeeb;
      background-color: transparent;
      width: 0;
      height: 0;
      vertical-align: bottom; }
    #customizability .sw-bullet li:hover {
      height: 10px;
      background-color: #fffeeb; }

.slide-number {
  font-size: 60px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 25%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.54); }













    .swipslider {
    position: relative;
    overflow: hidden;
    display: block;
    padding-top: 60%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .swipslider .sw-slides {
    display: block;
    padding: 0;
    list-style: none;
    100%;
    height: 100%;
    white-space: nowrap;
    font-size: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    position: absolute;
    bottom: 0; }
    .swipslider .sw-slide {
    100%;
    height: 100%;
    margin: auto;
    display: inline-block;
    position: relative; }
    .swipslider .sw-slide > img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%;
    max- 100%;
    margin-left: auto;
    margin-right: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .swipslider .sw-slide .sw-content {
    100%;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 14px; }

    .sw-next-prev {
    font-family: "Courier New", Courier, monospace;
    height: 50px;
    50px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    line-height: 50px;
    font-size: 30px;
    font-weight: bolder;
    color: rgba(160, 160, 160, 0.53);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0);
    border-radius: 50%;
    text-decoration: none;
    transition: all .2s ease-out;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .sw-next-prev:hover {
    background-color: rgba(255, 255, 255, 0.74); }
    .sw-next-prev:active {
    background-color: rgba(255, 255, 255, 0.5); }

    .sw-prev {
    left: 2%; }
    .sw-prev::after {
    content: '<'; }

    .sw-next {
    right: 2%; }
    .sw-next::after {
    content: '>'; }

    .sw-bullet {
    position: absolute;
    bottom: 2%;
    list-style: none;
    display: block;
    100%;
    text-align: center;
    padding: 0;
    margin: 0; }
    .sw-bullet li {
    10px;
    height: 10px;
    background-color: rgba(160, 160, 160, 0.53);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: all .2s ease-out; }
    .sw-bullet li:hover {
    background-color: rgba(255, 255, 255, 0.74); }
    .sw-bullet li.active {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 2px rgba(160, 160, 160, 0.53); }
    .sw-bullet li:not(:last-child) {
    margin-right: 5px; }

    (function ($) {
  
  $.fn.swipeslider = function (options) {
    var slideContainer = this;
    var slider = this.find('.sw-slides');
    var defaultSettings = {
   
      transitionDuration: 500,
  
      autoPlay: true,
    
      autoPlayTimeout: 4000,
   
      timingFunction: 'ease-out',
   
      prevNextButtons: true,
    
      bullets: true,
    
      swipe: true,
   
      sliderHeight: '60%'
    };

    var settings = $.extend(defaultSettings, options);

 
    var slidingState = 0;
    var startClientX = 0;
    var startPixelOffset = 0;
    var pixelOffset = 0;
    var currentSlide = 0;
    var slideCount = 0；
    var slidesWidth = 0;
    var allowSwipe = true;
    var transitionDuration = settings.transitionDuration;
    var swipe = settings.swipe;
    var autoPlayTimeout = settings.autoPlayTimeout;
    var animationDelayID = undefined;
    var allowSlideSwitch = true;
    var autoPlay = settings.autoPlay;
    (function init() {
      $(slideContainer).css('padding-top', settings.sliderHeight);
      
      slidesWidth = slider.width();
        
      $(window).resize(resizeSlider);
          
      if(settings.prevNextButtons) {
        insertPrevNextButtons();
      }
      

      slider.find('.sw-slide:last-child').clone().prependTo(slider);
      slider.find('.sw-slide:nth-child(2)').clone().appendTo(slider);
      slideCount = slider.find('.sw-slide').length;
      
      if(settings.bullets) {
        insertBullets(slideCount - 2);
      }

      setTransitionDuration(transitionDuration);
      setTimingFunction(settings.timingFunction);
      setTransitionProperty('all');
      
      if(swipe) {
        slider.on('mousedown touchstart', swipeStart);
        $('html').on('mouseup touchend', swipeEnd);
        $('html').on('mousemove touchmove', swiping);
      }


      jumpToSlide(1);

      enableAutoPlay();
    })();
    
 
    function resizeSlider(){
    
      slidesWidth = slider.width();
      switchSlide();
    }


    function swipeStart(event) {
      if(!allowSwipe) {
        return;
      }

      disableAutoPlay();

      if (event.originalEvent.touches)
        event = event.originalEvent.touches[0];

    
      if (slidingState == 0){
        slidingState = 1; 
        startClientX = event.clientX;
      }
    }

 
    function swiping(event) {
      var pointerData;
      
   
      if (event.originalEvent.touches) {
        pointerData = event.originalEvent.touches[0];
      } else {
        pointerData = event;
      }

      var deltaSlide = pointerData.clientX - startClientX;

    
      if (slidingState == 1 && deltaSlide != 0) 
        startPixelOffset = currentSlide * -slidesWidth; 
      }

  
      if (slidingState == 2) {
    
        
  
        var touchPixelRatio = 1;
    
        if ((currentSlide == 0 && pointerData.clientX > startClientX) ||
           (currentSlide == slideCount - 1 && pointerData.clientX < startClientX)) {
   
          touchPixelRatio = 3;
        }

   
        pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
        enableTransition(false);
      
        translateX(pixelOffset);
      }
    }

  
    function swipeEnd(event) {
      if (slidingState == 2) {
  
        slidingState = 0;

      
        currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide -1;

        currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);

        pixelOffset = currentSlide * -slidesWidth;

        disableSwipe();
        switchSlide();
        enableAutoPlay();
      }
      
      slidingState = 0;

    } 

 
    function disableSwipe() {
      allowSwipe = false;
      window.setTimeout(enableSwipe, transitionDuration)
    }

 
    function enableSwipe() {
      allowSwipe = true;
    }
    function disableAutoPlay() {
      allowSlideSwitch = false;
      window.clearTimeout(animationDelayID);
    }
  
    function enableAutoPlay() {
      if(autoPlay) {
        allowSlideSwitch = true;
        startAutoPlay();
      }
    }
    function startAutoPlay() {
      if(allowSlideSwitch) {
        animationDelayID = window.setTimeout(performAutoPlay, autoPlayTimeout);
      }
    }

    function performAutoPlay() {
      switchForward();
      startAutoPlay();
    }

  
    function switchForward() {
      currentSlide += 1;
      switchSlide();
    }

  
    function switchBackward() {
      currentSlide -= 1;
      switchSlide();
    }

    function switchSlide() {
      enableTransition(true);
      translateX(-currentSlide * slidesWidth);
      
      if(currentSlide == 0) {
        window.setTimeout(jumpToEnd, transitionDuration);
      } else if (currentSlide == slideCount - 1) {
        window.setTimeout(jumpToStart, transitionDuration);
      }
      setActiveBullet(currentSlide);
    }

 
    function jumpToStart() {
      jumpToSlide(1);
    }
    
  
    function jumpToEnd() {
      jumpToSlide(slideCount - 2);
    }

 
    function jumpToSlide(slideNumber) {
      enableTransition(false);
      currentSlide = slideNumber;
      translateX(-slidesWidth * currentSlide);
      window.setTimeout(returnTransitionAfterJump, 50);
    }

   
    function returnTransitionAfterJump() {
      enableTransition(true);
    }

   
    function enableTransition(enable) {
      if (enable) {
        setTransitionProperty('all');
      } else {
        setTransitionProperty('none');
      }
    }

  
    function translateX(distance) {
      slider
      // Prefixes are being set automatically.
  //      .css('-webkit-transform','translateX(' + distance + 'px)')
  //      .css('-ms-transform','translateX(' + distance + 'px)')
        .css('transform','translateX(' + distance + 'px)');
    }


    function setTransitionDuration(duration) {
      slider
  //      .css('-webkit-transition-duration', duration + 'ms')
        .css('transition-duration', duration + 'ms');
    }

 
    function setTimingFunction(functionDescription) {
      slider
  //      .css('-webkit-transition-timing-function', functionDescription)
        .css('transition-timing-function', functionDescription);
    }

  
    function setTransitionProperty(property) {
      slider
  //      .css('-webkit-transition-property', property)
        .css('transition-property', property);
    }
    
  
    function insertPrevNextButtons() {
      slider.after('<span class="sw-next-prev sw-prev"></span>');
      slideContainer.find('.sw-prev').click(function(){
        if(allowSlideSwitch){
          disableAutoPlay();
          switchBackward();
          enableAutoPlay();
        }
      });
      slider.after('<span class="sw-next-prev sw-next"></span>');
      slideContainer.find('.sw-next').click(function(){
        if(allowSlideSwitch) {
          disableAutoPlay();
          switchForward();
          enableAutoPlay();
        }
        });
    }
    
   
    function insertBullets(count) {
      slider.after('<ul class="sw-bullet"></ul>');
      var bulletList = slider.parent().find('.sw-bullet');
      for (var i = 0; i < count; i++) {
       
        if (i == 0) {
          bulletList.append('<li class="sw-slide-' + i + ' active"></li>');
        } else {
          bulletList.append('<li class="sw-slide-' + i + '"></li>');
        }
        
        var item = slideContainer.find('.sw-slide-' + i);
        

        (function(lockedIndex) {
          item.click(function() {
            // Disable autoplay on time of transition.
            disableAutoPlay();
            currentSlide = lockedIndex + 1;
            switchSlide();
            enableAutoPlay();
          });
        })(i);
      }
    }
    
  
    function setActiveBullet(number) {
      var activeBullet = 0;
      
      if(number == 0) {
        activeBullet = slideCount - 3;
      } else if (number == slideCount - 1) {
        activeBullet = 0;
      } else {
        activeBullet = number - 1;
      }
      
      slideContainer.find('.sw-bullet').find('li').removeClass('active');
      slideContainer.find('.sw-slide-' + activeBullet).addClass('active');
    }

    return slideContainer;    
  }
}(jQuery));
  • 相关阅读:
    Python的内置模块itertools
    列表的sort()和sorted()方法
    Python面试
    数据分析相关概念
    数据分析中Numpy,Pandas,Matplotlib,scripy和Scikit-Learn等数据处理库...
    mysql数据库的语法及简介
    Cannot add foreign key constraint
    MySQL数据库重装
    MySQL数据库在Python中的操作
    Python中的取整函数
  • 原文地址：https://www.cnblogs.com/chen527/p/9706506.html
Copyright © 2020-2023  润新知