将硬币 slider 插件用于旋转横幅，并想知道如何包含在横幅更改时应更改的动态文本。在这里找到一篇描述我想做什么但不确定需要进行的代码更改的帖子。想要完成整个过程，这样我就可以学会自己做。试图包含所有代码，以便您可以运行它并查看我在屏幕上看到的内容，但它无法正常工作。抱歉
/** 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($) {
var params = new Array;
var order = new Array;
var images = new Array;
var links = new Array;
var linksTarget = new Array;
var titles = new Array;
var interval = new Array;
var imagePos = new Array;
var appInterval = new Array;
var squarePos = new Array;
var reverse = new Array;
$.fn.coinslider= $.fn.CoinSlider = function(options){
init = function(el){
order[el.id] = new Array(); // order of square appereance
images[el.id] = new Array();
links[el.id] = new Array();
linksTarget[el.id] = new Array();
titles[el.id] = new Array();
imagePos[el.id] = 0;
squarePos[el.id] = 0;
reverse[el.id] = 1;
params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
// create images, links and titles arrays
$.each($('#'+el.id+' img'), function(i,item){
images[el.id][i] = $(item).attr('src');
links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : '';
$(item).hide();
$(item).next().hide();
});
// set panel
$(el).css({
'background-image':'url('+images[el.id][0]+')',
'width': params[el.id].width,
'height': params[el.id].height,
'position': 'relative',
'background-position': 'top left'
}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");
// create title bar
$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
$.setFields(el);
if(params[el.id].navigation)
$.setNavigation(el);
$.transition(el,0);
$.transitionCall(el);
}
// squares positions
$.setFields = function(el){
tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
counter = sLeft = sTop = 0;
tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
for(i=1;i <= params[el.id].sph;i++){
gapx = tgapx;
if(gapy > 0){
gapy--;
sHeight = tHeight+1;
} else {
sHeight = tHeight;
}
for(j=1; j <= params[el.id].spw; j++){
if(gapx > 0){
gapx--;
sWidth = tWidth+1;
} else {
sWidth = tWidth;
}
order[el.id][counter] = i+''+j;
counter++;
if(params[el.id].links)
$('#'+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>");
else
$('#'+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>");
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop
});
sLeft += sWidth;
}
sTop += sHeight;
sLeft = 0;
}
$('.cs-'+el.id).mouseover(function(){
$('#cs-navigation-'+el.id).show();
});
$('.cs-'+el.id).mouseout(function(){
$('#cs-navigation-'+el.id).hide();
});
$('#cs-title-'+el.id).mouseover(function(){
$('#cs-navigation-'+el.id).show();
});
$('#cs-title-'+el.id).mouseout(function(){
$('#cs-navigation-'+el.id).hide();
});
if(params[el.id].hoverPause){
$('.cs-'+el.id).mouseover(function(){
params[el.id].pause = true;
});
$('.cs-'+el.id).mouseout(function(){
params[el.id].pause = false;
});
$('#cs-title-'+el.id).mouseover(function(){
params[el.id].pause = true;
});
$('#cs-title-'+el.id).mouseout(function(){
params[el.id].pause = false;
});
}
};
$.transitionCall = function(el){
clearInterval(interval[el.id]);
delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
interval[el.id] = setInterval(function() { $.transition(el) }, delay);
}
// transitions
$.transition = function(el,direction){
if(params[el.id].pause == true) return;
$.effect(el);
squarePos[el.id] = 0;
appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay);
$(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
if(typeof(direction) == "undefined")
imagePos[el.id]++;
else
if(direction == 'prev')
imagePos[el.id]--;
else
imagePos[el.id] = direction;
if (imagePos[el.id] == images[el.id].length) {
imagePos[el.id] = 0;
}
if (imagePos[el.id] == -1){
imagePos[el.id] = images[el.id].length-1;
}
$('.cs-button-'+el.id).removeClass('cs-active');
$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
if(titles[el.id][imagePos[el.id]]){
$('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
} else {
$('#cs-title-'+el.id).css('opacity',0);
}
};
$.appereance = function(el,sid){
$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
clearInterval(appInterval[el.id]);
return;
}
$('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
$('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
squarePos[el.id]++;
};
// navigation
$.setNavigation = function(el){
// create prev and next
$(el).append("<div id='cs-navigation-"+el.id+"'></div>");
$('#cs-navigation-'+el.id).hide();
$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");
$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");
$('#cs-prev-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'left' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el,'prev');
$.transitionCall(el);
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
$('#cs-next-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'right' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el);
$.transitionCall(el);
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
// image buttons
$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
for(k=1;k<images[el.id].length+1;k++){
$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
}
$.each($('.cs-button-'+el.id), function(i,item){
$(item).click( function(e){
$('.cs-button-'+el.id).removeClass('cs-active');
$(this).addClass('cs-active');
e.preventDefault();
$.transition(el,i);
$.transitionCall(el);
})
});
$('#cs-navigation-'+el.id+' a').mouseout(function(){
$('#cs-navigation-'+el.id).hide();
params[el.id].pause = false;
});
$("#cs-buttons-"+el.id).css({
'left' : '50%',
'margin-left' : -images[el.id].length*15/2-5,
'position' : 'relative'
});
}
// effects
$.effect = function(el){
effA = ['random','swirl','rain','straight'];
if(params[el.id].effect == '')
eff = effA[Math.floor(Math.random()*(effA.length))];
else
eff = params[el.id].effect;
order[el.id] = new Array();
if(eff == 'random'){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+''+j;
counter++;
}
}
$.random(order[el.id]);
}
if(eff == 'rain') {
$.rain(el);
}
if(eff == 'swirl')
$.swirl(el);
if(eff == 'straight')
$.straight(el);
reverse[el.id] *= -1;
if(reverse[el.id] > 0){
order[el.id].reverse();
}
}
// shuffle array function
$.random = function(arr) {
var i = arr.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = arr[i];
var tempj = arr[j];
arr[i] = tempj;
arr[j] = tempi;
}
}
//swirl effect by milos popovic
$.swirl = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;
var x = 1;
var y = 1;
var going = 0;
var num = 0;
var c = 0;
var dowhile = true;
while(dowhile) {
num = (going==0 || going==2) ? m : n;
for (i=1;i<=num;i++){
order[el.id][c] = x+''+y;
c++;
if(i!=num){
switch(going){
case 0 : y++; break;
case 1 : x++; break;
case 2 : y--; break;
case 3 : x--; break;
}
}
}
going = (going+1)%4;
switch(going){
case 0 : m--; y++; break;
case 1 : n--; x++; break;
case 2 : m--; y--; break;
case 3 : n--; x--; break;
}
check = $.max(n,m) - $.min(n,m);
if(m<=check && n<=check)
dowhile = false;
}
}
// rain effect
$.rain = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;
var c = 0;
var to = to2 = from = 1;
var dowhile = true;
while(dowhile){
for(i=from;i<=to;i++){
order[el.id][c] = i+''+parseInt(to2-i+1);
c++;
}
to2++;
if(to < n && to2 < m && n<m){
to++;
}
if(to < n && n>=m){
to++;
}
if(to2 > m){
from++;
}
if(from > to) dowhile= false;
}
}
// straight effect
$.straight = function(el){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+''+j;
counter++;
}
}
}
$.min = function(n,m){
if (n>m) return m;
else return n;
}
$.max = function(n,m){
if (n<m) return m;
else return n;
}
this.each (
function(){ init(this); }
);
};
// default values
$.fn.coinslider.defaults = {
width: 847, // width of slider panel
height: 372, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 5000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
};
})(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)
.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;
display:block;
width:31px;
height:30px;
background:url(left-arrow.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-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;
display:block;
width:31px;
height:30px;
background:url(right-arrow.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-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>最佳答案
脚本有几个问题:
导致 Javascript 停止执行脚本的第一个错误是您在整个 coinslider 库为浏览器所知之前调用了“coinslider”函数。将函数调用移到函数声明之后解决了这个问题。
您为脚本使用了错误的 HTML 结构。显然，coinslider 脚本需要这样的结构:
<div class="eventSlider">
<div id="slider" style="position:relative; z-index: 20;">
<div>
<a class "banner1" href="#">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTqhIMgxbp1HKtnELI_riTfcla8sJt7Pio-vMmAC50bcw3yuext" alt="Photo" />
<span>this is some text </span>
</a>
<a href="#">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRCy7AFWUM-FeqYfl6hCLJxs2zIlyMyPMiZrW6IUGiL-T0i32CDxQ" alt="Photo" />
<span>this is some more text</span>
</a>
<a href="#">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS0o-zuf1srGMCLCXmkBr3S3tmqJL3ygxsgK5dZoG6XlXcnsG1A8A" alt="Photo" />
<span>this is even more text</span>
</a>
</div>
</div>
</div>如您所见，脚本需要将每个文本都放在您要使用它的图片旁边。
此外，文本不能放入 DIV 容器中。这将导致脚本失败。只需改用 SPAN。
否则你就正确地使用了它。
在这里查看完整/正在运行的版本: https://jsfiddle.net/s81uxjw7/3/
关于javascript - 将动态文本添加到硬币 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31521547/