javascrtipt幻灯片

Question

我制作了这个幻灯片，但我现在有一个重复图像的问题，它只是从图像1到2并停在那里！有任何想法吗？我在循环后尝试if(i==2){i = 1;}但没有工作。

var i = 1;
var myVar = setInterval(function () {
    myCarousel()
}, 2000);

function myCarousel() {
    while (i <= 2) {
        var img = "<img src='images/game" + i + ".jpg' height='250px;' width='100%;'/>";
        document.getElementById("images").innerHTML = img;
        i++;
    }
}

Answer 1

一旦你的i值等于2.它不会进入while loop，因为你已经全局声明了i。将您的代码更改为

var myVar = setInterval(function() {
    var i = 1;
    myCarousel(i)
}, 2000);

function myCarousel(i) {

    while (i <= 2) {
        var img = "<img src='images/game" + i + ".jpg' height='250px;' width='100%;'/>";
        document.getElementById("images").innerHTML = img;
        i++;
    }
}

Answer 2

您可以使用我自己的库的幻灯片：

DEMO：http://www.cristianizzo.com/DEV/Qpass/index.php?r=JS&v=slideshow

用法：

slide-Time: number set slide timing in second
slide-Arrows: on/off enable/disable arrows
slide-Auto: on/off enable/disable automatic slide
slide-Indicators: on/off enable/disable indicators
slide-Ctrl: on/off enable/disable slide control Play/Pause
slide-Anim: fadeIn Pass css animation class
slide-Thumb: on/off enable/disable Thumb

foreach循环中的图像需要.item classname

HTML

<div class="slideshow" slide-Time="3" slide-Arrows="on" slide-Auto="on" slide-Indicators="on" slide-Ctrl="on" slide-Anim="fadeIn" slide-Thumb="on">
                <div class="slide_inner">
                    <div class="item" title="image_title" style="background-image:url('assets/images/slideshow/1.jpg')">
                        <div class="overlay">
                            <h2><span>The very best wines of the Rhone Valley</span></h2>
                            <p class="text"><span>98+ point scorers from this iconic region</span></p>
                            <a href="#">View Our Listings</a>
                        </div>
                    </div>
                    <div class="item" title="image_title" style="background-image:url('assets/images/slideshow/1.jpg')">
                        <div class="overlay">
                            <h2><span>The very best wines of the Rhone Valley</span></h2>
                            <p class="text"><span>98+ point scorers from this iconic region</span></p>
                            <a href="#">View Our Listings</a>
                        </div>
                    </div>
                </div>
            </div>

的Javascript

/*
    $Carousel
*/
$Carousel = function(slideshow){

    var slideImage = new Array();
    var position = 0;
    var time = (timeMillisecond = slideshow.getAttribute('slide-Time')) * 1000 || 5000;
    var arrows = slideshow.getAttribute('slide-Arrows') || 'off';
    var auto = slideshow.getAttribute('slide-Auto') || 'off';
    var indicators = slideshow.getAttribute('slide-Indicators') || 'off';
    var ctrl = slideshow.getAttribute('slide-Ctrl') || 'off';
    var animation = slideshow.getAttribute('slide-Anim') || 'off';
    var thumb = slideshow.getAttribute('slide-Thumb') || 'off';

    this.slideImageNode = slideshow.getElementsByClassName('item');
    for(var i=0; i<=this.slideImageNode.length; i++){
        if(this.slideImageNode[0]) this.slideImageNode[0].classList.add('active');
        if(this.slideImageNode[i]) slideImage.push(this.slideImageNode[i]);
    }

    var autoSlide = function(){
        for(var i=0; i<=slideImage.length; i++){
            if(slideImage[i]){
                if(slideImage[i].classList.contains('active')){
                    slideImage[i].classList.remove('active');
                    if(animation){
                        slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                    }
                    if(slideImage[i+1]){
                        slideImage[i+1].classList.add('active');
                        if(animation){
                            slideImage[i+1].classList.add(animation); slideImage[i+1].classList.add('animated');
                        }
                        position = i+1;
                    }else{
                        slideImage[i-slideImage.length+1].classList.add('active');
                        if(animation){
                            slideImage[i-slideImage.length+1].classList.add(animation); slideImage[i-slideImage.length+1].classList.add('animated');
                        }
                        position = i-slideImage.length+1;
                    }
                    if(slideIndicators.position) slideIndicators.position(position);
                    if(slideThumb.position) slideThumb.position(position);
                    break;
                }
            }
        }
    };

    var slideArrows = function(){
        var
        prev = document.createElement('a'),
        arrowPrev = document.createElement('span'),
        next = document.createElement('a'),
        arrowNext = document.createElement('span');
        arrowPrev.setAttribute('class', 'arrowPrev');
        arrowNext.setAttribute('class', 'arrowNext');
        prev.setAttribute('class', 'prev');
        prev.setAttribute('href', 'javascript:void(0);');
        next.setAttribute('class', 'next');
        next.setAttribute('href', 'javascript:void(0);');
        arrowPrev.innerHTML='&#9664';
        arrowNext.innerHTML='&#9654';
        prev.appendChild(arrowPrev);
        next.appendChild(arrowNext);
        slideshow.appendChild(prev);
        slideshow.appendChild(next);

        next.onclick = function(){
            for(var i=0; i<slideImage.length; i++){
                if(slideImage[i].classList.contains('active')) {
                    slideImage[i].classList.remove('active');
                    if(animation){
                        slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                    }
                    if(slideImage[i+1]){
                        slideImage[i+1].classList.add('active');
                        if(animation){
                            slideImage[i+1].classList.add(animation); slideImage[i+1].classList.add('animated');
                        }
                        position = i+1;
                    }else{
                        slideImage[i-slideImage.length+1].classList.add('active');
                        if(animation) {
                            slideImage[i-slideImage.length+1].classList.add(animation); slideImage[i-slideImage.length+1].classList.add('animated');
                        }
                        position = i-slideImage.length+1;
                    }
                    if(slideIndicators.position) slideIndicators.position(position);
                    if(slideThumb.position) slideThumb.position(position);
                    if(slideCtrl.statusON) slideCtrl.statusON();
                    break;
                }
            }
            clearInterval(slideTime);
            slideTime = setInterval(autoSlide, time);
        };

        prev.onclick = function(){
            for(var i=0; i<slideImage.length; i++){
                if(slideImage[i].classList.contains('active')) {
                    slideImage[i].classList.remove('active');
                    if(animation) {
                        slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                    }
                    if(slideImage[i-1]){
                        slideImage[i-1].classList.add('active');
                        if(animation) {
                            slideImage[i-1].classList.add(animation); slideImage[i-1].classList.add('animated');
                        }
                        position = i-1;
                    }else{
                        slideImage[i+slideImage.length-1].classList.add('active');
                        if(animation) {
                            slideImage[i+slideImage.length-1].classList.add(animation); slideImage[i+slideImage.length-1].classList.add('animated');
                        }
                        position = i+slideImage.length-1;
                    }
                    if(slideIndicators.position) slideIndicators.position(position);
                    if(slideThumb.position) slideThumb.position(position);
                    if(slideCtrl.statusON) slideCtrl.statusON();
                    break;
                }
            }
            clearInterval(slideTime);
            slideTime = setInterval(autoSlide, time);
        }
    };

    var slideIndicators = function(){
        var indicatorsItems = new Array();
        var indicators = document.createElement('ol');
        indicators.setAttribute('class', 'slideIndicators');
        slideshow.appendChild(indicators);

        for(var i=0; i<slideImage.length; i++){
            if(slideImage[i]){
                slidePointer = document.createElement('li');
                slidePointer.setAttribute('slideTo', i);
                if(i == 0)slidePointer.setAttribute('class', 'active');
                indicators.appendChild(slidePointer);
                indicatorsItems.push(slidePointer);

                slidePointer.onclick = function(){
                    var slidePosition = this.getAttribute('slideTo');
                    for(var i=0; i<slideImage.length; i++){
                        if(slideImage[i].classList.contains('active')) {
                            slideImage[i].classList.remove('active');
                            if(animation) {
                                slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                            }
                            if(slideImage[slidePosition]){
                                slideImage[slidePosition].classList.add('active');
                                if(animation) {
                                    slideImage[slidePosition].classList.add(animation); slideImage[slidePosition].classList.add('animated');
                                }
                                position = slidePosition;
                            }
                            slideIndicators.position(position);
                            if(slideThumb.position) slideThumb.position(position);
                            if(slideCtrl.statusON) slideCtrl.statusON();
                            break;
                        }
                    }
                    clearInterval(slideTime);
                    slideTime = setInterval(autoSlide, time);
                };
            }
        }

        slideIndicators.position = function(position){
            for(var i=0; i<indicatorsItems.length; i++){
                if(indicatorsItems[i].classList.contains('active')) indicatorsItems[i].classList.remove('active');
            }
            indicatorsItems[position].classList.add('active');
        };
    };

    var slideThumb = function(){
        var thumbItems = new Array();
        var thumbMain = document.createElement('div');
        var thumb = document.createElement('ul');
        thumbMain.setAttribute('class', 'slideThumb');
        thumb.setAttribute('class', 'thumbList');
        slideshow.parentNode.insertBefore(thumbMain, slideshow.nextSibling);
        thumbMain.appendChild(thumb);

        for(var i=0; i<slideImage.length; i++){
            if(slideImage[i]) {
                slideThum = document.createElement('li');
                slideThum.setAttribute('slideThumbTo', i);
                slideThum.setAttribute('style', 'background-image:'+slideImage[i].style.backgroundImage);
                if(i == 0)slideThum.setAttribute('class', 'active');
                thumb.appendChild(slideThum);
                thumbItems.push(slideThum);

                slideThum.onclick = function(){
                    var slidePosition = this.getAttribute('slideThumbTo');
                    for(var i=0; i<slideImage.length; i++){
                        if(slideImage[i].classList.contains('active')) {
                            slideImage[i].classList.remove('active');
                            if(animation) {
                                slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                            }
                            if(slideImage[slidePosition]){
                                slideImage[slidePosition].classList.add('active');
                                if(animation) {
                                    slideImage[slidePosition].classList.add(animation); slideImage[slidePosition].classList.add('animated');
                                }
                                position = slidePosition;
                            }
                            slideThumb.position(position);
                            if(slideIndicators.position) slideIndicators.position(position);
                            if(slideCtrl.statusON) slideCtrl.statusON();
                            break;
                        }
                    }
                    clearInterval(slideTime);
                    slideTime = setInterval(autoSlide, time);
                }
            }
        }
        slideThumb.position = function(position){
            for(var i=0; i<thumbItems.length; i++){
                if(thumbItems[i].classList.contains('active')) thumbItems[i].classList.remove('active');
            }
            thumbItems[position].classList.add('active');
        }
    };

    var slideSwipe = function(slide, swipeDirection){
        console.log(swipeDirection)

        if(swipeDirection == 'right'){
            for(var i=0; i<slideImage.length; i++){
                if(slideImage[i].classList.contains('active')) {
                    slideImage[i].classList.remove('active');
                    if(animation){
                        slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                    }
                    if(slideImage[i+1]){
                        slideImage[i+1].classList.add('active');
                        if(animation){
                            slideImage[i+1].classList.add(animation); slideImage[i+1].classList.add('animated');
                        }
                        position = i+1;
                    }else if(slideImage[i-slideImage.length+1]){
                        slideImage[i-slideImage.length+1].classList.add('active');
                        if(animation) {
                            slideImage[i-slideImage.length+1].classList.add(animation); slideImage[i-slideImage.length+1].classList.add('animated');
                        }
                        position = i-slideImage.length+1;
                    }
                    if(slideIndicators.position) slideIndicators.position(position);
                    if(slideThumb.position) slideThumb.position(position);
                    if(slideCtrl.statusON) slideCtrl.statusON();
                    break;
                }
            }
            clearInterval(slideTime);
            slideTime = setInterval(autoSlide, time);
        }

        if(swipeDirection == 'left'){
            for(var i=0; i<slideImage.length; i++){
                if(slideImage[i].classList.contains('active')) {
                    slideImage[i].classList.remove('active');
                    if(animation) {
                        slideImage[i].classList.remove(animation); slideImage[i].classList.remove('animated');
                    }
                    if(slideImage[i-1]){
                        slideImage[i-1].classList.add('active');
                        if(animation) {
                            slideImage[i-1].classList.add(animation); slideImage[i-1].classList.add('animated');
                        }
                        position = i-1;
                    }else if(slideImage[i+slideImage.length-1]){
                        slideImage[i+slideImage.length-1].classList.add('active');
                        if(animation) {
                            slideImage[i+slideImage.length-1].classList.add(animation); slideImage[i+slideImage.length-1].classList.add('animated');
                        }
                        position = i+slideImage.length-1;
                    }
                    if(slideIndicators.position) slideIndicators.position(position);
                    if(slideThumb.position) slideThumb.position(position);
                    if(slideCtrl.statusON) slideCtrl.statusON();
                    break;
                }
            }
            clearInterval(slideTime);
            slideTime = setInterval(autoSlide, time);
        }  
    };

    var slideCtrl = function(){
        var control = document.createElement('a');
        control.setAttribute('class', 'ctrl');
        control.setAttribute('ctrlStatus', 'on');
        control.setAttribute('href', 'javascript:void(0);');
        control.innerHTML='&#10073;&#10073;';
        slideshow.appendChild(control);

        control.onclick = function(){
            if(this.getAttribute('ctrlStatus') === 'on'){
                this.setAttribute('ctrlStatus', 'off');
                this.innerHTML='&#9658;';
                clearInterval(slideTime);
            }else{
                this.setAttribute('ctrlStatus', 'on');
                this.innerHTML='&#10073;&#10073;';
                slideTime = setInterval(autoSlide, time);
            }
        }
        slideCtrl.statusON = function(){
            control.innerHTML='&#10073;&#10073;';
            control.setAttribute('ctrlStatus', 'on');
        }
    };

    if(auto === 'on'){
       var slideTime = setInterval(autoSlide, time);
    }
    if(arrows === 'on' && !$userAgent.mobile()){
        slideArrows();
    }
    if(indicators === 'on'){
        slideIndicators();
    }
    if(thumb === 'on'){
        slideThumb();
    }
    if(ctrl === 'on' && !$userAgent.mobile()){
        slideCtrl();
    }
    if($userAgent.mobile()){
        $Swipe(slideshow, slideSwipe);
    }
};
if(document.getElementsByClassName('slideshow')){
    var slideshow = document.getElementsByClassName('slideshow');
    [].forEach.call(slideshow, function(e) {
        e = new $Carousel(e);
    });
};

滑动以启用移动触控

$Swipe = function(el, fn){

'use strict';

var triggerElementID = el; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;
var isTouchEvent = null; 

var touchCancel = function(event) {
    fingerCount = 0;
    startX = 0;
    startY = 0;
    curX = 0;
    curY = 0;
    deltaX = 0;
    deltaY = 0;
    horzDiff = 0;
    vertDiff = 0;
    swipeLength = 0;
    swipeAngle = null;
    swipeDirection = null;
    triggerElementID = null;
    isTouchEvent = null;
}

var caluculateAngle = function() {
    var X = startX-curX;
    var Y = curY-startY;
    var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
    var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
    swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
    if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
}

var determineSwipeDirection = function() {
    if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
        swipeDirection = 'right';
    } else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
        swipeDirection = 'down';
    } else {
        swipeDirection = 'up';
    }
}

var touch={
    touchstart: function(event){

        isTouchEvent = event.type === 'touchstart';
        if(!isTouchEvent && 'which' in event && event.which === 3) return;
        console.log(event)
        fingerCount = event.touches.length;
        if ( fingerCount == 1 ) {
            startX = event.touches[0].pageX;
            startY = event.touches[0].pageY;
        } else {
            touchCancel(event);
        }
    },
    touchmove: function(event){
        if(isTouchEvent && event.type === 'mousemove') return;
        if(isTouchEvent && event.type === 'touchmove') {
            if ( event.touches.length == 1 ) {
                curX = event.touches[0].pageX;
                curY = event.touches[0].pageY;
            } else {
                touchCancel(event);
            }
        }

    },
    touchend: function(event){
        if(isTouchEvent && event.type === 'touchend') {
            // check to see if more than one finger was used and that there is an ending coordinate
            if ( fingerCount == 1 && curX != 0 ) {
                // use the Distance Formula to determine the length of the swipe
                swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
                // if the user swiped more than the minimum length, perform the appropriate action
                if ( swipeLength >= minLength ) {
                    event.preventDefault();
                    caluculateAngle();
                    determineSwipeDirection();
                    if(typeof fn == 'function') fn(el,swipeDirection);
                    touchCancel(event); // reset the variables
                } else {
                    touchCancel(event);
                }   
            } else {
                touchCancel(event);
            }
        }
    },
    touchcancel: function(event){
        touchCancel(event);
    }
}

for(var a in touch){
    triggerElementID.addEventListener(a,touch[a],false);
}
};
if(document.querySelectorAll('[q-swipe]')){
    var swipeEl = document.querySelectorAll('[q-swipe]');
    [].forEach.call(swipeEl, function(e) {
        //Call $Swipe obj pass (el, fn)
        new $Swipe(e, e.getAttribute('q-swipe'));
    });
};

UserAgent检测客户端信息

$userAgent = {
         info: function(){
        return navigator;
     },
        mobile: function(){
            if( navigator.userAgent.match(/Android/i)
                || navigator.userAgent.match(/webOS/i)
                || navigator.userAgent.match(/iPhone/i)
                || navigator.userAgent.match(/iPad/i)
                || navigator.userAgent.match(/iPod/i)
                || navigator.userAgent.match(/Opera Mini/i)
                || navigator.userAgent.match(/BlackBerry/i)
                || navigator.userAgent.match(/IEMobile/i)
                || navigator.userAgent.match(/Windows Phone/i)
            ){
                return true;
            }else {
                return false;
            }
        },

        device: {
            Android: function() { 
                return navigator.userAgent.match(/Android/i); }, 
            BlackBerry: function() { 
                return navigator.userAgent.match(/BlackBerry/i); }, 
            iOS: function() { 
                return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, 
            Opera: function() { 
                return navigator.userAgent.match(/Opera Mini/i); }, 
            Windows: function() { 
                return navigator.userAgent.match(/IEMobile|Windows Phone/i); }, 
            any: function() { 
                return ($userAgent.device.Android() || $userAgent.device.BlackBerry() || $userAgent.device.iOS() || $userAgent.device.Opera() || $userAgent.device.Windows()); }
        }
    }

CSS

div.slideshow {
  position: relative;
}
div.slideshow .slide_inner {
  overflow: hidden;
  width: 100%;
  height: 420px;
  padding: 0;
  margin: 0;
  background-color: #191919;
}
div.slideshow .slide_inner>.item{
  position: relative;
  display: none;
  width: 100%;
  height:100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
div.slideshow .slide_inner>.item.active{
  display: block;
  opacity: 1;
}
div.slideshow .slide_inner>.item>img, .slide_inner>.item>a>img {
  min-height: 100%;
  min-width: 100%;
}
div.slideshow .overlay{
  position: absolute;
  width: 70%;
  margin: auto;
  right: 0px; left: 0px; top: 40%;
  text-align:center;
}
div.slideshow .overlay h2{
  color:#fff;
}
div.slideshow .overlay p{
  color:#fff;
}
div.slideshow .overlay a {
  color: #fff;
  padding: 10px 24px;
  border: 0px;
  border-radius: 3px;
  background-color: #3498db;
  font-size: 14px;
  text-decoration:none;
  position:relative;
  top:15px;
}
div.slideshow .next,
div.slideshow .prev {
  top: 40%;
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  text-align: center;
  text-decoration:none;
  font-size: 250%;
  font-weight:normal;
  color:#3498db;
}
div.slideshow .prev .arrowPrev, 
div.slideshow .next .arrowNext {
  top: 6px;
  position: relative;
  color:#fff;
}
div.slideshow .next{
  right:30px;
}
div.slideshow .prev {
  left: 30px;
}
div.slideshow .prev .arrowPrev{
  margin-right:5px;
}
div.slideshow .next .arrowNext{
  margin-left: 5px;
}
div.slideshow .slideIndicators {
  position: absolute;
  text-align: center;
  margin: -50px auto;
  box-sizing: border-box;
  padding: 0px;
  right: 0px;
  left: 0px;
}
div.slideshow .slideIndicators li{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:10px;
  background-color:rgba(255,255,255, 0.7);
  cursor:pointer;
}
div.slideshow .slideIndicators li:last-child{
  margin-right:0px;
}
div.slideshow .slideIndicators li.active{
  background-color:#3498db;
}
div.slideshow .ctrl{
  position:absolute;
  right:0px; top:0px;
  padding:5px 18px;
  background-color:rgba(255,255,255, 1);
  color:#3498db;
  cursor:pointer;
  text-decoration:none;
}
div.slideThumb{
  width:100%;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  height:auto;
}
div.slideThumb ul.thumbList{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
div.slideThumb ul.thumbList li {
  width: 100px;
  height: 100px;
  background-color: blue;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  cursor:pointer;
  opacity:0.5;
  border:2px solid #fff;
}

div.slideThumb ul.thumbList li.active {
  opacity:1;
}

享受：）