我有一个滑块与按钮，以转到前或下一步，但我也想在它的间隔
我有一个滑块与按钮，以转到前或下一步，但我也想在它的间隔
提问于 2015-05-08 23:14:47
我有一个滑块标题与8个图像。使用按钮><我可以翻阅图像。但我也想在报头上设置一些时间间隔或计时器，这样它就会每十秒左右改变一次。这是我的html
<section id="gallery-2-49251">
<div class="carousel">
<div class="viewport">
<div class="items">
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/industrial1.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Industrial</div>
<div class="text-2"><p>Remote Sensing Solutions</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/infrastructure1.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Infrastructure</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/construction1.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Construction</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/water-management1.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Watermanagement</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/industrial2.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Industrial</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/infrastructure2.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Infrastructure</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/construction2.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Construction</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
<div class="media-4" data-size="1920x0">
<img src="./assets/images/water-management2.1920x0.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col col-md-6">
<div class="middle">
<div>
<div class="heading-1">Watermanagement</div>
<div class="text-2"><p>Remote Sensing Solutions
</p></div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<a href="#" class="prev hidden-xs visible-sm"><</a>
<a href="#" class="next hidden-xs visible-sm">></a>
<div class="bullets"></div>
</div>
</section>这是我的.js
var Carousel = function(options){this.init(options);};
Carousel.prototype =
{
/**
* Constructor
* @param object options
* @return void
*/
init: function(options)
{
this.options =
{
selector : '.carousel',
interval : 500,
play : false,
slide : false,
index : 0
};
$.extend(this.options, options);
this.window = $(window);
this.carousel_node = $();
this.items_node = $();
this.item_nodes = $();
this.image_nodes = $();
this.video_nodes = $();
this.play_node = $();
this.timeline_node = $();
this.bullet_nodes = $();
this.tab_nodes = $();
this.item_index = this.options.index;
this.item_count = 0;
this.transition = (typeof document.body.style.transition !== 'undefined');
this.start();
},
/**
* Start
* @return void
*/
start: function()
{
var _this = this;
var selectors = this.options.selector.split(',');
if (selectors.length > 1)
{
for (var x in selectors)
{
var options = $.extend({}, this.options);
options.selector = $.trim(selectors[x]);
new Carousel(options);
}
}
else
{
var carousel_nodes = $(this.options.selector);
carousel_nodes.each(function(index)
{
if (index)
{
var options = $.extend({}, _this.options);
options.selector += ':eq('+index+')';
new Carousel(options);
}
else
{
_this.carousel_node = $(this);
_this.items_node = _this.carousel_node.find('.items:first');
_this.item_nodes = _this.items_node.children('article');
_this.play_node = _this.carousel_node.find('.play:first');
_this.timeline_node = _this.carousel_node.find('.timeline:first');
_this.tab_nodes = _this.carousel_node.find('.tab');
_this.item_count = _this.item_nodes.length;
var item_node = _this.item_nodes.eq(_this.item_index);
var bullets_node = _this.carousel_node.find('.bullets:first');
var tab_node = _this.tab_nodes.eq(_this.item_index);
var tab_width = 100 / _this.item_count;
_this.tab_nodes.css('width', tab_width+'%');
for (var i=0; i<_this.item_count; i++)
{
var bullet_node = $('<a>', {href: '#', 'class': 'bullet'});
if (i == _this.item_index) bullet_node.addClass('active');
bullets_node.append(bullet_node);
}
_this.bullet_nodes = bullets_node.find('.bullet');
if (_this.options.slide)
{
var item_clones_1 = _this.item_nodes.clone();
var item_clones_2 = _this.item_nodes.clone();
var items_left = -100 * _this.item_count;
var items_width = 100 * (_this.item_count * 3);
var item_width = 100 / (_this.item_count * 3);
_this.carousel_node.addClass('slide');
item_clones_1.add(item_clones_2).addClass('clone');
_this.items_node.prepend(item_clones_1).append(item_clones_2);
_this.image_nodes = _this.items_node.find('article img');
_this.video_nodes = _this.items_node.find('article video, article iframe');
_this.items_node.addClass('notransition').css({left: items_left+'%', width: items_width+'%'}).height();
_this.items_node.removeClass('notransition');
var item_nodes = _this.items_node.children('article');
item_nodes.css('width', item_width+'%');
}
else
{
_this.image_nodes = _this.items_node.find('article img');
_this.video_nodes = _this.items_node.find('article video, article iframe');
}
item_node.addClass('active');
tab_node.addClass('active');
_this.scaleImages();
_this.setVideos();
_this.setEvents();
if (_this.options.play || _this.play_node.length)
{
_this.play_node.toggleClass('play stop');
_this.setTimer();
}
}
});
}
},
/**
* Scale images
* @param object image_node
* @return void
*/
scaleImages: function(image_node)
{
var _this = this;
if (image_node)
{
var image_height = image_node.height();
var item_node = image_node.parents('article:first');
var item_height = item_node.outerHeight();
if (image_height < item_height) image_node.css({height: '101%', width: 'auto'});
}
else
{
this.image_nodes.css({height: '', width: ''});
this.image_nodes.each(function()
{
var image_node = $(this);
var image_height = image_node.height();
if (image_height)
{
var item_node = image_node.parents('article:first');
var item_height = item_node.outerHeight();
if (image_height < item_height) image_node.css({height: '101%', width: 'auto'});
}
else
{
image_node.load(function()
{
_this.scaleImages(image_node);
});
}
});
}
},
/**
* Set videos
* @return void
*/
setVideos: function()
{
var _this = this;
this.video_nodes.each(function()
{
var video_node = $(this);
var image_node = video_node.next('img');
if (image_node.length)
{
var is_video = video_node.is('video');
var play_node = $('<a>', {href: '#', 'class': 'play'});
image_node.after(play_node);
play_node.click(function(event)
{
event.preventDefault();
image_node.add(play_node).hide();
if (is_video) video_node.get(0).play();
});
}
});
},
/**
* Set events
* @return void
*/
setEvents: function()
{
var _this = this;
var item_node = this.item_nodes.first();
var prev_node = this.carousel_node.find('.prev:first');
var next_node = this.carousel_node.find('.next:first');
this.window.resize(function()
{
_this.scaleImages();
});
/*****************/
/* transitionend */
/*****************/
if (this.transition)
{
this.items_node.bind('transitionend', function(event)
{
event.stopPropagation();
if (_this.item_index < 0 || _this.item_index >= _this.item_count)
{
var item_index = _this.translateIndex(_this.item_index);
var items_left = -(100 * _this.item_count) - (100 * item_index);
_this.items_node.addClass('notransition').css('left', items_left+'%').height();
_this.items_node.removeClass('notransition');
_this.item_index = item_index;
}
});
this.item_nodes.bind('transitionend', function(event)
{
event.stopPropagation();
var item_node = $(this);
item_node.removeClass('passive');
});
}
/*********/
/* touch */
/*********/
var touch_x_start = 0;
var touch_y_start = 0;
var touch_x_end = 0;
var touch_y_end = 0;
var prev_touch_x = 0;
var prev_touch_y = 0;
var touch_time_start = 0;
var touch_valid = true;
this.items_node.bind(
{
touchstart: function(event)
{
prev_touch_x = event.originalEvent.touches[0].pageX;
prev_touch_y = event.originalEvent.touches[0].pageY;
touch_valid = _this.validateIndex(_this.item_index, 1);
if (touch_valid)
{
touch_x_start = prev_touch_x;
touch_y_start = prev_touch_y;
touch_x_end = prev_touch_x;
touch_y_end = prev_touch_y;
touch_time_start = event.timeStamp;
_this.items_node.addClass('notransition');
}
},
touchmove: function(event)
{
var touch_x = event.originalEvent.touches[0].pageX;
var touch_y = event.originalEvent.touches[0].pageY;
var touch_x_move = touch_x - prev_touch_x;
var touch_y_move = touch_y - prev_touch_y;
if (Math.abs(touch_x_move) > Math.abs(touch_y_move))
{
event.preventDefault();
if (touch_valid && _this.options.slide)
{
var items_position = _this.items_node.position();
var items_left = items_position.left;
items_left += touch_x_move;
_this.items_node.css('left', items_left);
}
}
prev_touch_x = touch_x;
prev_touch_y = touch_y;
touch_x_end = touch_x;
touch_y_end = touch_y;
},
touchend: function(event)
{
if (touch_valid)
{
_this.items_node.height();
_this.items_node.removeClass('notransition');
var touch_x_moved = touch_x_end - touch_x_start;
var touch_y_moved = touch_y_end - touch_y_start;
if (touch_x_moved)
{
var item_index = _this.item_index;
if (Math.abs(touch_x_moved) > Math.abs(touch_y_moved * 2))
{
var touch_time_end = event.timeStamp;
var touch_time = touch_time_end - touch_time_start;
var swipe = (Math.abs(touch_x_moved) >= 50 && touch_time <= 250);
if (_this.options.slide)
{
var item_width = item_node.width();
var items_moved = touch_x_moved / item_width;
item_index -= swipe ? (touch_x_moved > 0 ? Math.ceil(items_moved) : Math.floor(items_moved)) : Math.round(items_moved);
}
else if (swipe)
{
item_index += touch_x_moved > 0 ? -1 : 1;
}
_this.showItem(item_index);
}
else if (_this.options.slide)
{
_this.showItem(item_index);
}
}
}
}
});
/*************/
/* prev/next */
/*************/
prev_node.add(next_node).click(function(event)
{
event.preventDefault();
var prev_node = $(this);
var is_prev = prev_node.hasClass('prev');
var item_index = _this.item_index + (is_prev ? -1 : 1);
_this.showItem(item_index);
});
/********/
/* play */
/********/
this.play_node.click(function(event)
{
event.preventDefault();
var is_stop = _this.play_node.hasClass('stop');
_this.options.play = (is_stop == false);
_this.play_node.toggleClass('play stop');
_this.setTimer(is_stop);
});
/****************/
/* bullets/tabs */
/****************/
this.bullet_nodes.add(this.tab_nodes).click(function(event)
{
event.preventDefault();
var bullet_node = $(this);
var is_bullet = bullet_node.hasClass('bullet');
var bullet_index = is_bullet ? _this.bullet_nodes.index(bullet_node) : _this.tab_nodes.index(bullet_node);
_this.showItem(bullet_index);
});
},
/**
* Show item
* @param integer index
* @return void
*/
showItem: function(index)
{
if (this.validateIndex(index))
{
var alt_index = this.translateIndex(index);
if (alt_index != this.item_index)
{
var item_node = this.item_nodes.eq(alt_index);
var active_item_node = this.item_nodes.filter('.active:first');
var bullet_node = this.bullet_nodes.eq(alt_index);
var active_bullet_node = this.bullet_nodes.filter('.active:first');
var tab_node = this.tab_nodes.eq(alt_index);
var active_tab_node = this.tab_nodes.filter('.active:first');
var active_video_node = active_item_node.find('video:first');
item_node.addClass('active');
active_item_node.removeClass('active');
bullet_node.addClass('active');
active_bullet_node.removeClass('active');
tab_node.addClass('active');
active_tab_node.removeClass('active');
if (active_video_node.length) active_video_node.get(0).pause();
if (!this.options.slide)
{
if (this.transition) active_item_node.addClass('passive');
this.item_index = alt_index;
}
if (this.options.play) this.setTimer();
}
if (this.options.slide)
{
var items_left = -(100 * this.item_count) - (100 * index);
this.items_node.css('left', items_left+'%');
this.item_index = index;
}
}
},
/**
* Set timer
* @param boolean stop
* @return void
*/
setTimer: function(stop)
{
var _this = this;
this.timeline_node.stop().css('padding-right', '100%');
if (!stop)
{
this.timeline_node.animate({'padding-right': 0}, this.options.interval, 'linear', function()
{
var item_index = _this.item_index + 1;
_this.showItem(item_index);
_this.setTimer();
});
}
},
/**
* Translate index
* @param integer index
* @return integer
*/
translateIndex: function(index)
{
if (!$.isNumeric(index)) index = 0;
if (index < 0 || index >= this.item_count)
{
index = index < 0 ? this.item_count + index : index - this.item_count
}
return index;
},
/**
* Validate index
* @param integer index
* @param integer margin
* @return boolean
*/
validateIndex: function(index, margin)
{
if (!margin) margin = 0;
return ($.isNumeric(index) && index >= -(this.item_count - margin) && index < ((this.item_count * 2) - margin));
}
};我有一个滑块标题与8个图像。使用按钮><我可以翻阅图像。但我也想在报头上设置一些时间间隔或计时器，这样它就会每十秒左右改变一次。如何在我的滑块中添加间隔？我想增加一个10秒左右的间隔。
回答 1
Stack Overflow用户
发布于 2015-05-08 23:44:19
我在另一个主题中发现的内容是执行以下Adding a timer to existing JS slider
这个想法是创建一个间隔，如下所示
function makeScroll() {
$('#arrow').click();
}
setInterval(makeScroll, secs*1000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30127233
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号