bitcob589
سه شنبه 04 مهر 1391, 17:46 عصر
دوتا دکمه هم گذاشتم
من خیلی وقته از IE استفاده میکنم . ولی یه همچین سبکی داره.
میتونی معادل این دستورات تو IE رو پیدا کنی تو کد بزاری
<html>
<head>
</head>
<style type="text/css">
ul{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
width:1000px;
padding:0;
margin-top:0;
}
li{
list-style: none;
float:left;
}
.myDiv{
border:1px solid black;
overflow: hidden;
width:150px;
padding:0;
}
#setButton{
margin-top: -25px;
}
.nav{
border-style: none;
border-radius: 10px;
margin-right: 10px;
background-color: #45abff;
cursor: pointer;
color: #fff;
}
</style>
<body>
<div class="myDiv">
<ul id="myUl">
<li><img src="pic/2.jpg"></li>
<li><img src="pic/3.jpg"></li>
<li><img src="pic/4.jpg"></li>
<li><img src="pic/5.jpg"></li>
<li><img src="pic/1.jpg"></li>
</ul>
</div>
<div id="setButton">
<button id="0" class="nav">1</button>
<button id="1" class="nav">2</button>
<button id="2" class="nav">3</button>
<button id="3" class="nav">4</button>
<button id="4" class="nav">5</button>
</div>
<div id="setButton2">
<button id="stop" class="nav">stop</button>
<button id="play" class="nav">play</button>
</div>
<script type="text/javascript">
(function(){
var listWidth=150,i=0;
var uls=document.getElementById('myUl'),
style=document.getElementById('myUl').style;
var sBtn=document.getElementById('setButton');
var sBtn2=document.getElementById('setButton2');
var nextInt=setInterval(function(){
if(i<4){
i++;
}
else{
i=0;
}
nextFunc(i);
},4000);
function nextFunc(j){
style.marginLeft=(listWidth*(-j));
i=j;
}
if(document.addEventListener)
{
sBtn2.addEventListener('click',function(e){
if(e.target.id=="stop"){
clearInterval(nextInt);
console.log(e);
}
else if(e.target.id=="play"){
nextInt=setInterval(function(){
if(i<4){
i++;
}
else{
i=0;
}
nextFunc(i);
},4000);
}
});
sBtn.addEventListener('click',function(e){
nextFunc(e.target.id);
},false);
}else if(document.attachEvent){
sBtn2.attachEvent('click',function(e){
if(e.target.id=="stop"){
clearInterval(nextInt);
console.log(e);
}
else if(e.target.id=="play"){
nextInt=setInterval(function(){
if(i<4){
i++;
}
else{
i=0;
}
nextFunc(i);
},4000);
}
});
sBtn.attachEvent('click',function(e){
nextFunc(e.target.id);
},false);
}
})();
</script>
</body>
</html>
کد بالا را IE گذاشته شد دکمه ها که گذاشته شده بود هیچ تاثیری بر توقف و اجرا اسلاید نداشتند و شمارهای بر روی اسلایدر گذاشته شده بود با کلیک بر روی شماره عکس ,عکس مورد نظر نمایش داده نمی شود
در کد بالا تعداد4 عکس تعریف شده است با توجه به مشخص نبودن تعداد عکسها در اسلایدر چگونه با افزایش تعداد عکس عکسها را به صورت صحیح نمایش بدهیم
کد بالا در مرورگر کروم کار نمی کند چگونه می توان اسلایدشو را در تمام مرورگرها اجرا کرد