牛人进来看看还有来学习

zuoming120 2009-03-23 05:49:30

请问咱门网站首页图片轮换怎么弄的，请教各位，最好给一些代码

...全文

162 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

limpid_123 2009-03-23

打赏
举报

mark

wuyq11 2009-03-23

打赏
举报

http://www.cnblogs.com/vagerent/archive/2007/04/11/697576.html
http://www.cnblogs.com/levin9/articles/791133.html

ws_hgo 2009-03-23

打赏
举报

此贴收藏

ws_hgo 2009-03-23

打赏
举报

此贴收藏

jiang_jiajia10 2009-03-23

打赏
举报

给你的flash版本的



<script type=text/javascript>

var pic_width=424; //图片宽度

var pic_height=194; //图片高度

var button_pos=4; //按扭位置 1左 2右 3上 4下

var stop_time=8000; //图片停留时间(1000为1秒钟)

var show_text=0; //是否显示文字标签 1显示 0不显示

var txtcolor="000000"; //文字色

var bgcolor="cccccc"; //背景色

var imag=new Array();

var link=new Array();

var text=new Array();

<!--{loop $flist $value}-->

imag[$fcoun]="$value[bimg]";

link[$fcoun]="$value[link]";

text[$fcoun]="$value[import]";

<!--{Eval $fcoun++}-->

<!--{/loop}-->



//可编辑内容结束

var swf_height=show_text==1?pic_height+20:pic_height;

var pics="", links="", texts="";

for(var i=1; i<imag.length; i++){

	pics=pics+("|"+imag[i]);

	links=links+("|"+link[i]);

	texts=texts+("|"+text[i]);

}

pics=pics.substring(1);

links=links.substring(1);

texts=texts.substring(1);

document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');

document.write('<param name="movie" value="images/focus.swf">');

document.write('<param name="quality" value="high"><param name="wmode" value="opaque">');

document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');

document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');

document.write('</object>');

      </script>

Adechen 2009-03-23

打赏
举报

百度一下,有很多js的代码,
谢楼上的代码,学习了

Adechen 2009-03-23

打赏
举报

百度一下,有很多js的代码,
谢楼上的代码,学习了

sjt000 2009-03-23

打赏
举报

mark

w183154350 2009-03-23

打赏
举报

学习！！

zftow110 2009-03-23

打赏
举报

jquery版，jquery自己下
html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片新闻V0.1</title>

<script type="text/javascript" src="jquery-1.2.3.js"></script>

<script type="text/javascript" src="picNews.js"></script>

<script>

$(document).ready(function(){

$(".picsContain").showNews(["images/1.jpg","images/2.jpg","images/1.jpg","images/2.jpg","images/1.jpg","images/2.jpg"],["1,调用非常简单.","2,测试下效果.","3,天巍(QQ:964354).","4,jQuery插件 : <a href='http://www.cssrain.cn' >cssrain.cn</a>","关注cssrain,关注jquery.","下载:<a href='http://img.namipan.com/downfile/a8f7d35536e3bd195549361b5fa265918da5110efd0a0300/jquerynews.rar'>cssrain download</a>"],["#1","#2","#3","#4","#5","#6"]);});

</script>

<style type="text/css">

/* 控件区域 */

.picsContain{border:1px solid #96C2F1;width:418px;height:248px;}

</style>

<link rel="stylesheet" type="text/css" href="picNewsStyle.css" />

</head>

<body>

<div class="picsContain"></div>

</body>

</html>



jQuery.fn.extend({

showNews:function(pic,text,url){

      var allNums=new String();

      var pics = pic;/* 图片路径 */

	  var texts = text;/* 新闻标题 */

	  var urls = url;/* 新闻链接 */

	  /* 初始化全部内容 */

	  this.html("<div class='showPic'></div><div class='showText'></div><div class='numContain'></div>");

	  this.css({position:"relative",overflow:"hidden"});

	  for(var i=0;i<pics.length;i++){

	     var j = i+1;

	     allNums = allNums + "<div class='num'>"+j+"</div>";

	  }

	  $("div.numContain").html(allNums);//初始化按钮个数

	  $("div.num").eq(0).addClass("activeNum");//初始化已选定按钮

      $("div.showPic").html("<a href='"+urls[0]+"'><img src='"+pics[0]+"' /></a>");//初始化图片

	  $("div.showText").html("<a href='"+urls[0]+"'>"+texts[0]+"</a>");//初始化新闻标题	  

	  /* 自动切换 */

	  var c = 1;

	  function clearAuto(){clearInterval(autoRun);}

      function setAuto(){autoRun = setInterval(autoChange,3000);}

	  function autoChange(){  

		  if(c<pics.length){

			  c++;

			  

		      $("div.showPic>a>img").fadeOut("fast",function(){$("div.showPic").html("<a href='"+urls[c-1]+"'><img src='"+pics[c-1]+"' /></a>");//切换图片

              $("div.num").each(function(i){this.className="num";if(i==c-1){$(this).addClass("activeNum")}});//切换按钮样式

			  $("div.showText").html("<a href='"+urls[c-1]+"'>"+texts[c-1]+"</a>");});//切换新闻链接 

			  //alert(c);  

			  }

		  else{c=0;}

		  }

		  setAuto();

	  /* 事件切换 */

      $("div.num").click(

	       function(e){

			  

		      var num = e.target.innerHTML;

			  var traceNum = parseInt(num,10)-1;

			  c = traceNum+1;

			  if(texts[traceNum]==$("div.showText>a").html()){

				 return false;  

			  }//判断点击触发位置是否为当前位置，是就不切换，否则。。。。

			  else{

			  $("div.showPic>a>img").fadeOut("fast",function(){$("div.showPic").html("<a href='"+urls[traceNum]+"'><img src='"+pics[traceNum]+"' /></a>");//切换图片

			  $("div.num").each(function(i){this.className="num";if(i==traceNum){$(this).addClass("activeNum")}});//切换按钮样式

			  $("div.showText").html("<a href='"+urls[traceNum]+"'>"+texts[traceNum]+"</a>");

			  });

			  //切换新闻链接	

			  }

		   }

	   ).mouseover(function(){clearAuto()}).mouseout(function(){setAuto()}); 

}})

CSS



/* 图片区域 */

.showPic{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;}

.showPic img{display:block;border:0;}

/* 文本区域 */

.showText{padding-top:10px;width:100%;height:40px;text-indent:1em;position:absolute;bottom:0;z-index:2;background:#000;filter:Alpha(opacity=65);opacity:0.65;color:#FFF;font-size:14px;}

.showText a{text-decoration:none;color:white;}

/* 切换按钮区域 */

.numContain{position:absolute;z-index:3;right:10px;bottom:7px;font-size:12px;}

.numContain .num,.numContain .activeNum{padding-top:8px;width:28px;height:16px;text-align:center;float:left;background:url(images/numBG.gif) no-repeat bottom;font-weight:bold;cursor:pointer;}

.numContain .activeNum{background:url(images/numBG-2.gif) no-repeat bottom;}

金大哈 2009-03-23

打赏
举报

学习

叶子 2009-03-23

打赏
举报

你也可以看看这个
http://blog.163.com/zxcq_1103/blog/static/1082100120086113223882/

叶子 2009-03-23

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JavaScript 图片切换展示效果</title>

</head>

<body>

<style type="text/css"> 

.container, .container *{margin:0; padding:0;}.container{width:408px; height:168px; overflow:hidden;position:relative;}.slider{position:absolute;}

.slider li{ list-style:none;display:inline;}

.slider img{ width:408px; height:168px; display:block;}.slider2{width:2000px;}

.slider2 li{float:left;}.num{ position:absolute; right:5px; bottom:5px;}

.num li{

float: left;

color: #FF7300;

text-align: center;

line-height: 16px;

width: 16px;

height: 16px;

font-family: Arial;

font-size: 12px;

cursor: pointer;

overflow: hidden;

margin: 3px 1px;

border: 1px solid #FF7300;

background-color: #fff;

}

.num li.on{

color: #fff;

line-height: 21px;

width: 21px;

height: 21px;

font-size: 16px;

margin: 0 1px;

border: 0;

background-color: #FF7300;

font-weight: bold;

}

</style>

<div class="container" id="idTransformView">

<ul class="slider" id="idSlider">

    <li><img src="1.jpg"/></li>

    <li><img src="2.jpg"/></li>

    <li><img src="3.gif"/></li>

</ul>

<ul class="num" id="idNum">

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

</div><br /><div class="container" id="idTransformView2">

<ul class="slider slider2" id="idSlider2">

    <li><img src="1.jpg"/></li>

    <li><img src="2.jpg"/></li>

    <li><img src="3.gif"/></li>

</ul>

<ul class="num" id="idNum2">

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

</div><br /><div>

<input id="idStop" type="button" value=" 停止自动 " />

<input id="idStart" type="button" value=" 开始自动 " />

<br /><br /><input id="idPre" type="button" value=" <- 上一个 " />

<input id="idNext" type="button" value=" 下一个 -> " />

<br /><br />

切换速度：

<input id="idFast" type="button" value=" + 加 速 " />

<input id="idSlow" type="button" value=" - 减 速 " />

<br /><br />

停顿时间：

<input id="idAdd" type="button" value=" + 加时间 " />

<input id="idReduce" type="button" value=" - 减时间 " />

<br /><br />

<input id="idReset" type="button" value=" Reset " />

</div><script type="text/javascript">

var $ = function (id) {

return "string" == typeof id ? document.getElementById(id) : id;

};var Class = {

create: function() {

return function() {

   this.initialize.apply(this, arguments);

}

}

}Object.extend = function(destination, source) {

for (var property in source) {

   destination[property] = source[property];

}

return destination;

}var TransformView = Class.create();

TransformView.prototype = {

//容器对象,滑动对象,切换参数,切换数量

initialize: function(container, slider, parameter, count, options) {

if(parameter <= 0 || count <= 0) return;

var oContainer = $(container), oSlider = $(slider), oThis = this;this.Index = 0;//当前索引



this._timer = null;//定时器

this._slider = oSlider;//滑动对象

this._parameter = parameter;//切换参数

this._count = count || 0;//切换数量

this._target = 0;//目标参数



this.SetOptions(options);



this.Up = !!this.options.Up;

this.Step = Math.abs(this.options.Step);

this.Time = Math.abs(this.options.Time);

this.Auto = !!this.options.Auto;

this.Pause = Math.abs(this.options.Pause);

this.onStart = this.options.onStart;

this.onFinish = this.options.onFinish;



oContainer.style.overflow = "hidden";

oContainer.style.position = "relative";



oSlider.style.position = "absolute";

oSlider.style.top = oSlider.style.left = 0;

},

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

   Up:    true,//是否向上(否则向左)

   Step:   5,//滑动变化率

   Time:   10,//滑动延时

   Auto:   true,//是否自动转换

   Pause:   2000,//停顿时间(Auto为true时有效)

   onStart: function(){},//开始转换时执行

   onFinish: function(){}//完成转换时执行

};

Object.extend(this.options, options || {});

},

//开始切换设置

Start: function() {

if(this.Index < 0){

   this.Index = this._count - 1;

} else if (this.Index >= this._count){ this.Index = 0; }



this._target = -1 * this._parameter * this.Index;

this.onStart();

this.Move();

},

//移动

Move: function() {

clearTimeout(this._timer);

var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);



if (iStep != 0) {

   this._slider.style[style] = (iNow + iStep) + "px";

   this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);

} else {

   this._slider.style[style] = this._target + "px";

   this.onFinish();

   if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }

}

},

//获取步长

GetStep: function(iTarget, iNow) {

var iStep = (iTarget - iNow) / this.Step;

if (iStep == 0) return 0;

if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);

return iStep;

},

//停止

Stop: function(iTarget, iNow) {

clearTimeout(this._timer);

this._slider.style[this.Up ? "top" : "left"] = this._target + "px";

}

};window.onload=function(){

function Each(list, fun){

   for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }

};



var objs = $("idNum").getElementsByTagName("li");



var tv = new TransformView("idTransformView", "idSlider", 168, 3, {

   onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式

});



tv.Start();



Each(objs, function(o, i){

   o.onmouseover = function(){

    o.className = "on";

    tv.Auto = false;

    tv.Index = i;

    tv.Start();

   }

   o.onmouseout = function(){

    o.className = "";

    tv.Auto = true;

    tv.Start();

   }

})



////////////////////////test2



var objs2 = $("idNum2").getElementsByTagName("li");



var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {

   onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式

   Up: false

});



tv2.Start();



Each(objs2, function(o, i){

   o.onmouseover = function(){

    o.className = "on";

    tv2.Auto = false;

    tv2.Index = i;

    tv2.Start();

   }

   o.onmouseout = function(){

    o.className = "";

    tv2.Auto = true;

    tv2.Start();

   }

})



$("idStop").onclick = function(){ tv2.Auto = false; tv2.Stop(); }

$("idStart").onclick = function(){ tv2.Auto = true; tv2.Start(); }

$("idNext").onclick = function(){ tv2.Index++; tv2.Start(); }

$("idPre").onclick = function(){ tv2.Index--;tv2.Start(); }

$("idFast").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }

$("idSlow").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }

$("idReduce").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }

$("idAdd").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }



$("idReset").onclick = function(){

   tv2.Step = Math.abs(tv2.options.Step);

   tv2.Time = Math.abs(tv2.options.Time);

   tv2.Auto = !!tv2.options.Auto;

   tv2.Pause = Math.abs(tv2.options.Pause);

}



}

</script>

</body>

</html>