我的幻灯片翻转图像,但其中一个翻转错误的图像。有人可以查看我的代码并找到我似乎无法找到的内容!
这是html:
<div id="serv_tims">
<div id="serv_d"><img name='slide' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/1651756_orig.png'/></div>
<div id="serv_t"><img name='slide2' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6848746_orig.png'/></div>
<div id="serv_m"><img name='slide3' src='http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png'/></div>
</div>
这是css:
#serv_tims{
border:solid 4px #0276FD;
height:300px;
width:300px;
position:static;
float:right;
clear:right;
margin:0 0.5% 0 0;
}
#serv_d,#serv_t,#serv_m{
height:100px;
width:300px;
}
这是我的javascript:
var i = 0;
var path = new Array();
path[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/1651756_orig.png";
path[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6795103_orig.png";
path[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/8269055_orig.png";
function swapImage(){
document.slide.src = path[i];
if(i < path.length - 1){ i++;} else{i = 0;}
setTimeout("swapImage()",2000);
}
var j = 0;
var path2 = new Array();
path2[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/6848746_orig.png";
path2[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/5983713_orig.png";
path2[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/5808905_orig.png";
function swapImage2()
{
document.slide2.src = path[j];
if(j < path2.length - 1){ j++;} else{j = 0;}
setTimeout("swapImage2()",2000);
}
var k = 0;
var path3 = new Array();
path3[0]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
path3[1]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
path3[2]="http://jjoli.weebly.com/uploads/1/8/6/0/18608386/3044861_orig.png";
function swapImage3()
{
document.slide3.src = path3[k];
if(k < path3.length - 1){ k++;} else {k = 0;}
setTimeout("swapImage3()",2000);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(swapImage);
addLoadEvent(swapImage2);
addLoadEvent(swapImage3);
答案 0 :(得分:0)
Allright I can propose you very simple solution to create your own slideshow
firstly assume that we want to have 5 images in our slide Show .
<div id="main_frame">
<div id="slide_frame">
<div class="imdiv"><img src="1.jpg" class="imgs" /></div>
<div class="imdiv"><img src="2.jpg" class="imgs" /></div>
<div class="imdiv"><img src="3.jpg" class="imgs" /></div>
<div class="imdiv"><img src="4.jpg" class="imgs" /></div>
<div class="imdiv"><img src="5.jpg" class="imgs" /></div>
</div>
</div>
the most important thing is the frame must be overflow:hidden and for instance your the width
your each frame is 500px so the width of the mainframe must be 500px and the witdh of slide frame
must be 500*5=2500px allright
<style>
#main_frame {border:1pxsolid;black;width:500px;height:300px;overflow:hidden;position:relative;}
#slide_frame {border:0px solid transparent;width:2500px;height:300px;position:relative;}
.imgs {width:500px;border:0px;height:300px;position:relative;}
</style>
then you need to have the library of jquery
as:
you will add this library into head tags
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
then write this javascript code
<script type="text/javascript">
$(document).ready(function(){
var slide=500;
var counter=0;
setInterval(function(){
var s=slide*counter;
$("#slide_frame").animate({left:s},600);
counter+=1;
if(counter==5)
counter=0;
},500);
});
</script>
add this javascript code declared upward into head tag .you do not need to call it will start
automatically
Good Luck
答案 1 :(得分:0)
我在小提琴中运行你的代码,这不是图像幻灯片放映,这些只是文字。你不应该将这些概念用于图像。它只会使事情变得混乱。这是一个你想要实现的例子。
<div id="serv_tims">
<div>SUNDAY<br>MORNING</div>
<div>10:00 AM</div>
<div>GOD<br>LOVES YA</div>
</div>
JS:
var i = 1;
var text = [
["SUNDAY<br>MORNING","10:00 AM","GOD<br>LOVES YA"],
["SUNDAY<br>EVENING","05:00 PM","GOD<br>LOVES YA"],
["SUNDAY<br>NIGHT","11:00 PM","GOD<br>LOVES YA"]
];
var st = document.getElementById("serv_tims");
setInterval(function(){
for(var j = 0; j < 3; j++){
st.children[j].innerHTML = text[i][j];
}
i = (i < (text.length - 1)) ? (i + 1) : 0;
},3000);
如您所见,您可以根据需要编辑text
数组。
<强> FIDDLE 强>
答案 2 :(得分:0)
我看到了我的问题!
document.slide2.src = path[j];
应该是
document.slide2.src = path2[j];
抱歉!
答案 3 :(得分:-1)
One more thing the code I wrote for you is static.If you want to have new images to your
slide shows
For instance the I wrote was only for 5 images.However you can add more.But in order to do
this, you need expand the width of slide_frame when you add a new image every time.And append
the image into slide_frame div.If you want further info I can send you a code snippet that I
had written before
Good Luck