js图片切换{不调用数据库}

来源:互联网 发布:京东小程序源码 编辑:程序博客网 时间:2024/05/17 06:33

1切换样式比较多的

 <SCRIPT language=JavaScript> 
// 属性设置 
var E_strIFaderTransType = 'reveal'; // 'reveal' | 'blend' 
var Filter_number = 23; // 滤镜种数 
var change_time = 3.000; // 滤镜转换过程为3.0秒延迟 
var wait_time = 5000; // 两种滤镜之间为5秒延迟
 
var obj_Timer; 
var count_temp = 0; //记录当前是第几幅图片 
var Img_arry = new Array(); //图片数组 
var E_ie4 = document.all?true:false; 
var E_nn4 = document.layers?true:false;
 
function Filt_set() //设置滤镜 

   if(!E_ie4 && !E_nn4) return;
   if(E_ie4) { 
     var theImg = document.all['idImgFading']; 
     if(theImg == null) return; 
     with(document.all['idImgFading']) { 
       style.filter = (E_strIFaderTransType == 'reveal')?'revealTrans':'blendTrans'; 
       style.filter.duration = change_time; 
       style.filter.transition = Filter_number; 
     } 
   } 
   use_Filter();
   obj_Timer = window.setInterval('use_Filter()',wait_time); 
}
 
function use_Filter() //滤镜的启动 

   if(E_ie4) { 
     with(document.all['idImgFading']) { 
       if(E_strIFaderTransType == 'reveal') { 
         filters(0).transition = Filter_number; 
       } 
       if(count_temp == (Img_arry.length - 1)) { 
         count_temp = -1; 
       } 
       count_temp++; 
       title = Img_arry[count_temp].sAlt; 
       parentElement.href = Img_arry[count_temp].command;
    document.all['idImgLink'].innerText=title;
    document.all['idImgLink'].href= Img_arry[count_temp].command;
    
       filters(0).apply(); 
       src = Img_arry[count_temp].sImgUrl; 
       filters(0).play();
     } 
   } 
   else if(E_nn4) { 
     if(count_temp == (Img_arry.length - 1)) { 
       count_temp = -1; 
     } 
     count_temp++; 
     document.images['idImgFading'].src = Img_arry[count_temp].sImgUrl; 
   } 
}
 
function obj_ClearTime() { 
   window.clearInterval(obj_Timer); 

window.onunload = obj_ClearTime;//取消计时器,释放系统资源
 
function Img_obj(sImgUrl,command,sAlt,sTarget) 

   this.sImgUrl = (sImgUrl == null)?'':sImgUrl; 
   this.command = (command == null || command == '')?'/':command; 
   this.sAlt = (sAlt == null)?'':sAlt; 
   this.sTarget = (sTarget == null || sTarget == '')?'_self':sTarget; 

</SCRIPT>
 
<SCRIPT language=JavaScript> 
<!-- 
// 定义图像来源
 
Img_arry[0] =new Img_obj('1.jpg','sales.asp','','_self');
Img_arry[1] =new Img_obj('2.jpg','sales.asp','','_self');
Img_arry[2] =new Img_obj('3.jpg','sales.asp','','_self');
Img_arry[3] =new Img_obj('4.jpg','sales.asp','','_self');
Img_arry[4] =new Img_obj('tupian/1.jpg','sales.asp','','_self');
Img_arry[5] =new Img_obj('tupian/2.jpg','sales.asp','','_self');
Img_arry[6] =new Img_obj('tupian/3.jpg','sales.asp','','_self');
Img_arry[7] =new Img_obj('tupian/4.jpg','sales.asp','','_self');
//--> 
</SCRIPT>
<center>
<a><img hspace=0 src="tupian/top02.jpg" width=1003 height=271 border=0 name=idImgFading /></a><br/>
   <a id="idImgLink"></a>
</center> 
<SCRIPT language=JavaScript>Filt_set();</SCRIPT>

 

 

2只是图片来回切换  没有效果

 

<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js%22%3E%3C/script> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script> 
<style type="text/css"> 
img{border:0;} 
</style> 
<body> 
<div id="picplayer3" style="overflow:hidden;width:595px;height:159px;clear:none;border:none; margin:auto;"></div> 
<script> 
var p = $('#picplayer3'); 
var pics1 = [{url:'image/05.jpg',link:'ppzx.asp',time:5000},{url:'image/z5.jpg',link:'ppzx.asp',time:5000},{url:'image/z6.jpg',link:'ppzx.asp',time:5000}]; 
initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]); 
// 
// 
function initPicPlayer(pics,w,h) 

//选中的图片 
var selectedItem; 
//自动播放的id 
var playID; 
//选中图片的索引 
var selectedIndex; 
//容器 
var p = $('#picplayer3'); 
p.text(''); 
p.append('<div id="piccontent3"></div>'); 
var c = $('#piccontent3'); 
for(var i=0;i<pics.length;i++) 

//添加图片到容器中 
c.append('<a href="'+pics[i].link+'" target="_blank"><img id="picitem3'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>'); 

//按钮容器,绝对定位在右下角 
var btnHolder = $('#picbtnHolder4'); 
btnHolder.append('<div id="picbtns" style="float:right; padding-right:1px;"></div>'); 
var btns = $('#picbtns'); 
// 
for(var i=0;i<pics.length;i++) 

//增加图片对应的按钮 
btns.append('<span id="picbtn'+i+'" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> '+(i+1)+' </span> '); 
$('#picbtn'+i).data('index',i); 
$('#picbtn'+i).click( 
function(event) 

if(selectedItem.attr('src') == $('#picitem3'+$(this).data('index')).attr('src')) 

return; 

setSelectedItem($(this).data('index')); 

); 

btns.append(' '); 
/// 
setSelectedItem(0); 
//显示指定的图片index 
function setSelectedItem(index) 

selectedIndex = index; 
clearInterval(playID); 
//alert(index); 
if(selectedItem)selectedItem.fadeOut('fast'); 
selectedItem = $('#picitem3'+index); 
selectedItem.fadeIn('slow'); 
//

//自动播放 
playID = setInterval(function() 

var index = selectedIndex+1; 
if(index > pics.length-1)index=0; 
setSelectedItem(index); 
},pics[index].time); 


</script> 




转自http://hi.baidu.com/wsf1234/item/7ca9cee5b1ffb42a4ddcafa3

原创粉丝点击