0
對於旋轉橫幅使用投幣滑塊插件，並且想知道如何包含橫幅更改時應更改的動態文本。在這裏發現了一篇文章，描述了我想要做的事情，但不知道需要進行的代碼更改。希望能夠通過這個過程，我可以學習如何獨立完成。試圖包括所有的代碼，以便你可以運行它，看看我在屏幕上看到了什麼，但它的工作不正常。對不起將動態文本添加到硬幣滑塊中
/** coin slider js**/
/**
* Coin Slider - Unique jQuery Image Slider
* @version: 1.0 - (2010/04/04)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://workshop.rs/projects/coin-slider/
* Licensed under MIT licence:
* http://www.opensource.org/licenses/mit-license.php
**/
(function($) {
\t var params \t \t = new Array;
\t var order \t \t = new Array;
\t var images \t \t = new Array;
\t var links \t \t = new Array;
\t var linksTarget = new Array;
\t var titles \t \t = new Array;
\t var interval \t = new Array;
\t var imagePos \t = new Array;
\t var appInterval = new Array; \t
\t var squarePos \t = new Array; \t
\t var reverse \t \t = new Array;
\t
\t $.fn.coinslider= $.fn.CoinSlider = function(options){
\t \t
\t \t init = function(el){
\t \t \t \t
\t \t \t order[el.id] \t \t = new Array(); \t // order of square appereance
\t \t \t images[el.id] \t \t = new Array();
\t \t \t links[el.id] \t \t = new Array();
\t \t \t linksTarget[el.id] \t = new Array();
\t \t \t titles[el.id] \t \t = new Array();
\t \t \t imagePos[el.id] \t \t = 0;
\t \t \t squarePos[el.id] \t = 0;
\t \t \t reverse[el.id] \t \t = 1; \t \t \t \t \t \t
\t \t \t \t
\t \t \t params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
\t \t \t \t \t \t
\t \t \t // create images, links and titles arrays
\t \t \t $.each($('#'+el.id+' img'), function(i,item){
\t \t \t \t images[el.id][i] \t \t = $(item).attr('src');
\t \t \t \t links[el.id][i] \t \t = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
\t \t \t \t linksTarget[el.id][i] \t = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
\t \t \t \t titles[el.id][i] \t \t = $(item).next().is('span') ? $(item).next().html() : '';
\t \t \t \t $(item).hide();
\t \t \t \t $(item).next().hide();
\t \t \t }); \t \t \t
\t \t \t
\t \t \t // set panel
\t \t \t $(el).css({
\t \t \t \t 'background-image':'url('+images[el.id][0]+')',
\t \t \t \t 'width': params[el.id].width,
\t \t \t \t 'height': params[el.id].height,
\t \t \t \t 'position': 'relative',
\t \t \t \t 'background-position': 'top left'
\t \t \t }).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />"); \t
\t \t \t
\t \t \t \t
\t \t \t // create title bar
\t \t \t $('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
\t \t \t \t \t \t
\t \t \t $.setFields(el);
\t \t \t
\t \t \t if(params[el.id].navigation)
\t \t \t \t $.setNavigation(el);
\t \t \t
\t \t \t $.transition(el,0);
\t \t \t $.transitionCall(el);
\t \t \t \t
\t \t }
\t \t
\t \t // squares positions
\t \t $.setFields = function(el){
\t \t \t
\t \t \t tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
\t \t \t tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
\t \t \t
\t \t \t counter = sLeft = sTop = 0;
\t \t \t tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
\t \t \t tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
\t \t \t
\t \t \t for(i=1;i <= params[el.id].sph;i++){
\t \t \t \t gapx = tgapx;
\t \t \t \t
\t \t \t \t \t if(gapy > 0){
\t \t \t \t \t \t gapy--;
\t \t \t \t \t \t sHeight = tHeight+1;
\t \t \t \t \t } else {
\t \t \t \t \t \t sHeight = tHeight;
\t \t \t \t \t }
\t \t \t \t
\t \t \t \t for(j=1; j <= params[el.id].spw; j++){ \t
\t \t \t \t \t if(gapx > 0){
\t \t \t \t \t \t gapx--;
\t \t \t \t \t \t sWidth = tWidth+1;
\t \t \t \t \t } else {
\t \t \t \t \t \t sWidth = tWidth;
\t \t \t \t \t }
\t \t \t \t \t order[el.id][counter] = i+''+j;
\t \t \t \t \t counter++;
\t \t \t \t \t
\t \t \t \t \t if(params[el.id].links)
\t \t \t \t \t \t $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
\t \t \t \t \t else
\t \t \t \t \t \t $('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
\t \t \t \t \t \t \t \t
\t \t \t \t \t // positioning squares
\t \t \t \t \t $("#cs-"+el.id+i+j).css({
\t \t \t \t \t \t 'background-position': -sLeft +'px '+(-sTop+'px'),
\t \t \t \t \t \t 'left' : sLeft ,
\t \t \t \t \t \t 'top': sTop
\t \t \t \t \t });
\t \t \t \t
\t \t \t \t \t sLeft += sWidth;
\t \t \t \t }
\t \t \t \t sTop += sHeight;
\t \t \t \t sLeft = 0; \t \t \t \t \t
\t \t \t \t \t
\t \t \t }
\t \t \t
\t \t \t
\t \t \t $('.cs-'+el.id).mouseover(function(){
\t \t \t \t $('#cs-navigation-'+el.id).show();
\t \t \t });
\t \t
\t \t \t $('.cs-'+el.id).mouseout(function(){
\t \t \t \t $('#cs-navigation-'+el.id).hide();
\t \t \t }); \t
\t \t \t
\t \t \t $('#cs-title-'+el.id).mouseover(function(){
\t \t \t \t $('#cs-navigation-'+el.id).show();
\t \t \t });
\t \t
\t \t \t $('#cs-title-'+el.id).mouseout(function(){
\t \t \t \t $('#cs-navigation-'+el.id).hide();
\t \t \t }); \t
\t \t \t
\t \t \t if(params[el.id].hoverPause){ \t
\t \t \t \t $('.cs-'+el.id).mouseover(function(){
\t \t \t \t \t params[el.id].pause = true;
\t \t \t \t });
\t \t \t
\t \t \t \t $('.cs-'+el.id).mouseout(function(){
\t \t \t \t \t params[el.id].pause = false;
\t \t \t \t }); \t
\t \t \t \t
\t \t \t \t $('#cs-title-'+el.id).mouseover(function(){
\t \t \t \t \t params[el.id].pause = true;
\t \t \t \t });
\t \t \t
\t \t \t \t $('#cs-title-'+el.id).mouseout(function(){
\t \t \t \t \t params[el.id].pause = false;
\t \t \t \t }); \t
\t \t \t }
\t \t \t \t \t
\t \t \t
\t \t };
\t \t \t \t
\t \t
\t \t $.transitionCall = function(el){
\t \t
\t \t \t clearInterval(interval[el.id]); \t
\t \t \t delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
\t \t \t interval[el.id] = setInterval(function() { $.transition(el) }, delay);
\t \t \t
\t \t }
\t \t
\t \t // transitions
\t \t $.transition = function(el,direction){
\t \t \t
\t \t \t if(params[el.id].pause == true) return;
\t \t \t
\t \t \t $.effect(el);
\t \t \t
\t \t \t squarePos[el.id] = 0;
\t \t \t appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay);
\t \t \t \t \t
\t \t \t $(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
\t \t \t
\t \t \t if(typeof(direction) == "undefined")
\t \t \t \t imagePos[el.id]++;
\t \t \t else
\t \t \t \t if(direction == 'prev')
\t \t \t \t \t imagePos[el.id]--;
\t \t \t \t else
\t \t \t \t \t imagePos[el.id] = direction;
\t \t
\t \t \t if (imagePos[el.id] == images[el.id].length) {
\t \t \t \t imagePos[el.id] = 0;
\t \t \t }
\t \t \t
\t \t \t if (imagePos[el.id] == -1){
\t \t \t \t imagePos[el.id] = images[el.id].length-1;
\t \t \t }
\t
\t \t \t $('.cs-button-'+el.id).removeClass('cs-active');
\t \t \t $('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
\t \t \t
\t \t \t if(titles[el.id][imagePos[el.id]]){
\t \t \t \t $('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
\t \t \t \t $('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
\t \t \t } else {
\t \t \t \t $('#cs-title-'+el.id).css('opacity',0);
\t \t \t } \t \t \t \t
\t \t \t \t
\t \t };
\t \t
\t \t $.appereance = function(el,sid){
\t \t \t $('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
\t \t \t if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
\t \t \t \t clearInterval(appInterval[el.id]);
\t \t \t \t return;
\t \t \t }
\t \t \t $('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
\t \t \t $('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
\t \t \t squarePos[el.id]++;
\t \t \t
\t \t };
\t \t
\t \t // navigation
\t \t $.setNavigation = function(el){
\t \t \t // create prev and next
\t \t \t $(el).append("<div id='cs-navigation-"+el.id+"'></div>");
\t \t \t $('#cs-navigation-'+el.id).hide();
\t \t \t
\t \t \t $('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");
\t \t \t $('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");
\t \t \t $('#cs-prev-'+el.id).css({
\t \t \t \t 'position' \t : 'absolute',
\t \t \t \t 'top' \t \t : params[el.id].height/2 - 15,
\t \t \t \t 'left' \t \t : 0,
\t \t \t \t 'z-index' \t : 1001,
\t \t \t \t 'line-height': '30px',
\t \t \t \t 'opacity' \t : params[el.id].opacity
\t \t \t }).click(function(e){
\t \t \t \t e.preventDefault();
\t \t \t \t $.transition(el,'prev');
\t \t \t \t $.transitionCall(el); \t \t
\t \t \t }).mouseover(function(){ $('#cs-navigation-'+el.id).show() });
\t
\t \t \t $('#cs-next-'+el.id).css({
\t \t \t \t 'position' \t : 'absolute',
\t \t \t \t 'top' \t \t : params[el.id].height/2 - 15,
\t \t \t \t 'right' \t \t : 0,
\t \t \t \t 'z-index' \t : 1001,
\t \t \t \t 'line-height': '30px',
\t \t \t \t 'opacity' \t : params[el.id].opacity
\t \t \t }).click(function(e){
\t \t \t \t e.preventDefault();
\t \t \t \t $.transition(el);
\t \t \t \t $.transitionCall(el);
\t \t \t }).mouseover(function(){ $('#cs-navigation-'+el.id).show() });
\t \t
\t \t \t // image buttons
\t \t \t $("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
\t \t \t
\t \t \t for(k=1;k<images[el.id].length+1;k++){
\t \t \t \t $('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
\t \t \t }
\t \t \t
\t \t \t $.each($('.cs-button-'+el.id), function(i,item){
\t \t \t \t $(item).click(function(e){
\t \t \t \t \t $('.cs-button-'+el.id).removeClass('cs-active');
\t \t \t \t \t $(this).addClass('cs-active');
\t \t \t \t \t e.preventDefault();
\t \t \t \t \t $.transition(el,i);
\t \t \t \t \t $.transitionCall(el); \t \t \t \t
\t \t \t \t })
\t \t \t }); \t
\t \t \t
\t \t \t $('#cs-navigation-'+el.id+' a').mouseout(function(){
\t \t \t \t $('#cs-navigation-'+el.id).hide();
\t \t \t \t params[el.id].pause = false;
\t \t \t }); \t \t \t \t \t \t
\t \t \t $("#cs-buttons-"+el.id).css({
\t \t \t \t 'left' \t \t \t : '50%',
\t \t \t \t 'margin-left' \t : -images[el.id].length*15/2-5,
\t \t \t \t 'position' \t \t : 'relative'
\t \t \t \t
\t \t \t });
\t \t \t
\t \t \t \t
\t \t }
\t \t // effects
\t \t $.effect = function(el){
\t \t \t
\t \t \t effA = ['random','swirl','rain','straight'];
\t \t \t if(params[el.id].effect == '')
\t \t \t \t eff = effA[Math.floor(Math.random()*(effA.length))];
\t \t \t else
\t \t \t \t eff = params[el.id].effect;
\t \t \t order[el.id] = new Array();
\t \t \t if(eff == 'random'){
\t \t \t \t counter = 0;
\t \t \t \t for(i=1;i <= params[el.id].sph;i++){
\t \t \t \t \t for(j=1; j <= params[el.id].spw; j++){ \t
\t \t \t \t \t \t order[el.id][counter] = i+''+j;
\t \t \t \t \t \t counter++;
\t \t \t \t \t }
\t \t \t \t } \t
\t \t \t \t $.random(order[el.id]);
\t \t \t }
\t \t \t
\t \t \t if(eff == 'rain') \t {
\t \t \t \t $.rain(el);
\t \t \t }
\t \t \t
\t \t \t if(eff == 'swirl')
\t \t \t \t $.swirl(el);
\t \t \t \t
\t \t \t if(eff == 'straight')
\t \t \t \t $.straight(el);
\t \t \t \t
\t \t \t reverse[el.id] *= -1;
\t \t \t if(reverse[el.id] > 0){
\t \t \t \t order[el.id].reverse();
\t \t \t }
\t \t }
\t \t \t
\t \t // shuffle array function
\t \t $.random = function(arr) {
\t \t \t \t \t \t
\t \t var i = arr.length;
\t \t if (i == 0) return false;
\t \t while (--i) {
\t \t var j = Math.floor(Math.random() * (i + 1));
\t \t var tempi = arr[i];
\t \t var tempj = arr[j];
\t \t arr[i] = tempj;
\t \t arr[j] = tempi;
\t \t }
\t \t } \t
\t \t
\t \t //swirl effect by milos popovic
\t \t $.swirl = function(el){
\t \t \t var n = params[el.id].sph;
\t \t \t var m = params[el.id].spw;
\t \t \t var x = 1;
\t \t \t var y = 1;
\t \t \t var going = 0;
\t \t \t var num = 0;
\t \t \t var c = 0;
\t \t \t
\t \t \t var dowhile = true;
\t \t \t \t \t \t
\t \t \t while(dowhile) {
\t \t \t \t
\t \t \t \t num = (going==0 || going==2) ? m : n;
\t \t \t \t
\t \t \t \t for (i=1;i<=num;i++){
\t \t \t \t \t
\t \t \t \t \t order[el.id][c] = x+''+y;
\t \t \t \t \t c++;
\t \t \t \t \t if(i!=num){
\t \t \t \t \t \t switch(going){
\t \t \t \t \t \t \t case 0 : y++; break;
\t \t \t \t \t \t \t case 1 : x++; break;
\t \t \t \t \t \t \t case 2 : y--; break;
\t \t \t \t \t \t \t case 3 : x--; break;
\t \t \t \t \t \t
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t
\t \t \t \t going = (going+1)%4;
\t \t \t \t switch(going){
\t \t \t \t \t case 0 : m--; y++; break;
\t \t \t \t \t case 1 : n--; x++; break;
\t \t \t \t \t case 2 : m--; y--; break;
\t \t \t \t \t case 3 : n--; x--; break; \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t check = $.max(n,m) - $.min(n,m); \t \t \t
\t \t \t \t if(m<=check && n<=check)
\t \t \t \t \t dowhile = false;
\t \t \t \t \t \t \t \t \t
\t \t \t }
\t \t }
\t \t // rain effect
\t \t $.rain = function(el){
\t \t \t var n = params[el.id].sph;
\t \t \t var m = params[el.id].spw;
\t \t \t var c = 0;
\t \t \t var to = to2 = from = 1;
\t \t \t var dowhile = true;
\t \t \t while(dowhile){
\t \t \t \t
\t \t \t \t for(i=from;i<=to;i++){
\t \t \t \t \t order[el.id][c] = i+''+parseInt(to2-i+1);
\t \t \t \t \t c++;
\t \t \t \t }
\t \t \t \t
\t \t \t \t to2++;
\t \t \t \t
\t \t \t \t if(to < n && to2 < m && n<m){
\t \t \t \t \t to++; \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t if(to < n && n>=m){
\t \t \t \t \t to++; \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t if(to2 > m){
\t \t \t \t \t from++;
\t \t \t \t }
\t \t \t \t
\t \t \t \t if(from > to) dowhile= false;
\t \t \t \t
\t \t \t } \t \t \t
\t \t }
\t \t // straight effect
\t \t $.straight = function(el){
\t \t \t counter = 0;
\t \t \t for(i=1;i <= params[el.id].sph;i++){
\t \t \t \t for(j=1; j <= params[el.id].spw; j++){ \t
\t \t \t \t \t order[el.id][counter] = i+''+j;
\t \t \t \t \t counter++;
\t \t \t \t }
\t \t \t \t
\t \t \t }
\t \t }
\t \t $.min = function(n,m){
\t \t \t if (n>m) return m;
\t \t \t else return n;
\t \t }
\t \t
\t \t $.max = function(n,m){
\t \t \t if (n<m) return m;
\t \t \t else return n;
\t \t } \t \t
\t
\t this.each (
\t \t function(){ init(this); }
\t);
\t
\t };
\t
\t
\t // default values
\t $.fn.coinslider.defaults = { \t
\t \t width: 847, // width of slider panel
\t \t height: 372, // height of slider panel
\t \t spw: 7, // squares per width
\t \t sph: 5, // squares per height
\t \t delay: 5000, // delay between images in ms
\t \t sDelay: 30, // delay beetwen squares in ms
\t \t opacity: 0.7, // opacity of title and navigation
\t \t titleSpeed: 500, // speed of title appereance in ms
\t \t effect: '', // random, swirl, rain, straight
\t \t navigation: true, // prev next and buttons
\t \t links : true, // show images as links
\t \t hoverPause: true // pause on hover \t \t
\t }; \t
\t
})(jQuery);
/** dynamic text code**/
setInterval(function() {
$('#titles').fadeOut(5000, function() {
$(this).find('p:eq(' + i + ')').show().siblings().hide()
.end().end().fadeIn(5000, function() {
i++;
if (i === imgs.length) {
i = 0
};
});
});
}, 5000)
\t.coin-slider { overflow: hidden; zoom: 1; position: relative; width: 847px; margin-left: 15px; margin-right: auto;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev { background-color: #000000; color: #FFFFFF; padding: 0px 5px;
left: 10px !important;
\t display:block;
\t width:31px;
\t height:30px;
\t background:url(left-arrow.png) no-repeat;
\t text-indent:-9999px;
\t border:0;
\t opacity: 0;
\t -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 5px;
\t display:block;
\t width:31px;
\t height:30px;
\t background:url(right-arrow.png) no-repeat;
\t text-indent:-9999px;
\t border:0;
\t opacity: 0;
\t -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.continer {
position: relative;
}
body {
background-image:url('../img/bg_sub-empty.jpg');
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center 0px;
background-color: #fff;
width: 100%;
height: 100%;
}
#contentBox {
position: relative;
top: 40px;
margin: 0 auto;
background-color: #fff;
width: 73%;
height: 100%;
border: 2px solid #ccc;
border-radius: 5px;
}
/******************************************
HERO
******************************************/
.hero {
position: relative;
background-image: url('../img/banner-bg.jpg');
background-repeat: no-repeat;
background-position: center 0px;
background-color: #fff;
height: 500px;
background-color: #55104e;
overflow: hidden;
}
.eventSlider {
position: relative;
display: inline-block;
margin: 0 auto;
top: 12%;
left: 5%;
}
.banner1 {
height: 472px;
background-color: orange;
}
.banner-bg1{
height: 472px;
background-color: blue;
}
.titles p {
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="contentBox">
<div class="container hero">
<div class="eventSlider">
<div id="slider"style="position:relative; z-index: 20;">
<div class="titles" style="z-index: 40;">
<p>this is some text </p>
<p>this is some more text</p>
<p>this is even more text</p>
</div>
<div>
<a class"banner1" href="#"><img src="img/banner.png" alt="Photo" /></a>
<a href="#"><img src="img/placeholder.jpg" alt="Photo" /></a>
<a href="#"><img src="img/placeholder.jpg" alt="Photo" /></a>
</div>
</div>
</div>
</div>
</div>
<script> $('#slider').coinslider(); </script>
</body>
你有與動態文本問題或根本的JS不運行？ –
動態文本有問題。 JS運行良好。有沒有一種方法可以包含我所有的文件，這樣您就可以看到我在瀏覽器中看到的內容？試圖做一個小提琴，但我不知道如何包括圖像 –
我實際上不知道。我猜，只包括一些Google圖片。他們應該一直在線... –