banner图自动切换代码（css实现banner轮换图）

今天给各位分享banner图自动切换代码的知识，其中也会对css实现banner轮换图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、HTML中自动切换图片这段代码是写在哪里面,是CSS里面吗？怎么写！谢谢！
• 2、求简单的图片切换代码
• 3、网页随机不重复显示定时自动更换图片代码
• 4、跪求这段jquery banner切换代码的解释
• 5、求高手帮我做个banner 图片能自动切换和带数字1234样式 我不会代码 只会设计页面来操作 所以尽量要详细点

HTML中自动切换图片这段代码是写在哪里面,是CSS里面吗？怎么写！谢谢！

需要js+css配合，我给您找段代码吧。

JS代码

$(function () {

    $(".dummy").click(function () { return false; });

    var flipDelay = 5500;

    var flipCount = $("div.banner_footer a").size(); // 图片总数

    var flipId = 1;

    var flipId1 = 0;

    var flipTimer = null;

    var flipTimer1 = null;

    var i = 0;

    var flip = function () {

        if (flipCount  2) return;

        $("div.banner_footer a").removeClass("current");

        $($("div.banner_footer a").get(flipId)).addClass("current");

        $($("div.banner_footer a").get(flipId)).css("current");

        $("div.banner  a:visible").fadeOut();

        $($("div.banner a").get(flipId)).fadeIn("slow");

        flipId = (flipId + 1) % flipCount;

        flipTimer = window.setTimeout(flip, flipDelay);

    }

    flipTimer = window.setTimeout(flip, flipDelay);

    $("div.banner_footer a").click(function () {

        clearTimeout(flipTimer);

        flipId = $("div.banner_footer a").index(this);

        flip();

        return false;

    });

    var flipserver = function () {

        $("div.index_server_box  a:visible").fadeOut();

        $($("div.index_server_box a").get(flipId1)).fadeIn("slow");

    }

    $("a.index_server_left").click(function () {

        flipId1 = (flipId1 - 1) % 3;

        flipserver();

        return false;

    });

    $("a.index_server_right").click(function () {

        flipId1 = (flipId1 + 1) % 3;

        flipserver();

        return false;

    });

    var documentWidth = $(window).width();

    var left = (documentWidth - 310) / 2;

    var right = left + 306;

    $("div.services_box div.left").css("width", left + "px");

    $("div.services_box div.right").css("width", right + "px");

    $(window).resize(function () {

        var documentWidth = $(window).width();

        var left = (documentWidth - 310) / 2;

        var right = left + 306;

        $("div.services_box div.left").css("width", left + "px");

        $("div.services_box div.right").css("width", right + "px");

    });

});

html样式

div class="banner_box"

        div class="banner"

            a href="" class="banner1"img src="img/banner1.jpg" alt="视觉为您解决网站建设中企业品牌形象问题" //a

            a href="" class="banner2"img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" //a

            a href="" class="banner3"img src="img/banner3.jpg" alt="针对用户需求，提供高品质网站设计服务" //a

            a href="" class="banner4"img src="img/banner4.jpg" alt="网站建设公司团队的力量" //a

            a href="" class="banner5"img src="img/banner5.jpg" alt="招聘网页设计师" //a

            div class="banner_footer"

                a class="a1 current"img src="img/a13.jpg" alt="" //a

                a class="a2" img src="img/a14.jpg" alt="" //a

                a class="a3"img src="img/a15.jpg" alt="" //a

                a class="a4"img src="img/a16.jpg" alt="" //a

                a class="a5"img src="img/a17.jpg" alt="" //a

            /div

        /div

    /div

css样式

div.banner_box{height:430px; overflow:hidden; background:url(../img/b1.jpg) repeat-x;}

div.banner_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}

div.banner_box div.banner a{border:0;}

div.banner_box div.banner a.banner1 img{margin-left:200px;}

div.banner_box div.banner a.banner2 img{margin-left:236px;}

div.banner_box div.banner a.banner3 img{margin-left:250px;}

div.banner_box div.banner a.banner4 img{margin-left:231px;}

div.banner_box div.banner a.banner5 img{margin-left:245px;}

div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100;  }

div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }

div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}

div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}

希望能帮到您！祝您好运！

求简单的图片切换代码

第一种：

把如下代码加入body区域中

body onclick=Clicked()

SCRIPT

!--

transeffect = 0;

theeffects = new Array(24);

theeffects[0] = “盒状收缩“;

theeffects[1] = “盒状向外“;

theeffects[2] = “圆形收缩“;

theeffects[3] = “圆形向内“;

theeffects[4] = “从下向上“;

theeffects[5] = “从上向下“;

theeffects[6] = “从左向右“;

theeffects[7] = “从右向左“;

theeffects[8] = “百页窗形向右“;

theeffects[9] = “百页窗形向下“;

theeffects[10] = “棋盘形交叉向右“;

theeffects[11] = “棋盘形交叉向下“;

theeffects[12] = “随意溶解形“;

theeffects[13] = “左右向内“;

theeffects[14] = “左右向外“;

theeffects[15] = “上下向内“;

theeffects[16] = “上下向外“;

theeffects[17] = “条纹状向左下“;

theeffects[18] = “条纹状向左上“;

theeffects[19] = “条纹状向右下“;

theeffects[20] = “条纹状向右上“;

theeffects[21] = “溶解水平状“;

theeffects[22] = “溶解上下状“;

theeffects[23] = “随着溶解“;

current_image = “image1“;

function Clicked() {

var the_image, the_other;

text2.style.visiblity=“hidden“;

if (image1.style.visibility==“inherit“) {

the_image = image2;

the_other = image1;

}

else {

the_image = image1;

the_other = image2;

}

the_other.style.visibility=“hidden“;

the_image.filters.item(0).Apply();

the_image.filters.item(0).Transition = transeffect;

the_image.filters.item(0).Play(2.0);

the_image.style.visibility=“inherit“;

text2.innerText=theeffects[transeffect];

transeffect++;

if (transeffect == 24)

transeffect = 0;

text2.style.visibility=“visible“;

}

//--

/SCRIPT

DIV id=image

DIV id=text1/DIVIMG id=image1

src=“Upfiles/200422684962.gif“

style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ IMG id=image2 src=“Upfiles/200422684962.gif“

style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ /DIV

DIV id=text2/DIV

第二步：把body中的内容改为：

body bgcolor=“#fef4d9“ onclick=Clicked()

over feboy

第二种：

第一步、把下面这段代码插入到页面的head与/head之间：

script language=javascript

isns = navigator.appName == "Netscape";

function ztstr(id,picurl,linkurl)

{

this.id=id

this.picurl=picurl

this.linkurl=linkurl

}

zhuanti=new Array()

imgcount=1;

frequency=10*1000;//30秒

//在这里修改图片的路径和链接

zhuanti[1]=new ztstr('1','','')

zhuanti[2]=new ztstr('2','','')

zhuanti[3]=new ztstr('3','','')

zhuanti[4]=new ztstr('4','','')

imgcount=zhuanti.length-1

for(i=1;i=imgcount;i++)

{

eval_r("img"+i+"=new Image()")

eval_r("img"+i+".src=zhuanti["+i+"].picurl")

}

nn=1

var rand1 = 0;

var useRand = 0;

function swapPic() {

var imgnum = zhuanti.length - 1;

do {

var randnum = Math.random();

rand1 = Math.round((imgnum - 1) * randnum) + 1;

} while (rand1 == useRand);

useRand = rand1;

// alert(useRand);

nn=useRand;

change_img();

}

function change_img()

{

eval_r('document.pic.src=img'+nn+'.src');

nn++;

if(nnimgcount) nn=1

if(!isns)

{

pic.filters.item(0).apply()

pic.style.visibility='visible'

pic.filters.item(0).play()

setTimeout("pic.style.visibility='hidden'",frequency);

}

else

document.pic.visibility='visible'

tt=setTimeout('change_img()',frequency)

}

function pictarget()

{

tt=nn-1

if(tt1) tt=imgcount

cururl=zhuanti[tt].linkurl

window.open(cururl);

}

function ini()

{

if(!isns)

{

spacewidth=Math.round((divmask.offsetWidth-770)/2)

dmwidth=770+spacewidth

dmheight=divmask.offsetHeight

totalstep=50

timeout=50

dmstepw=Math.round(770/totalstep)

dmsteph=Math.round(dmheight/totalstep)

setTimeout('hidimg()',3000)

}

else swapPic()

}

function hidimg()

{

dmwidth-=dmstepw

dmheight-=dmsteph

eval_r('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')

hdrun=setTimeout('hidimg()',timeout)

if(dmwidth=spacewidthdmheight=0)

{

divmask.style.visibility='hidden'

clearTimeout(hdrun)

swapPic()

}

}

/script

第二步、调用定义好的javascript函数，在body里加上以下代码：

body onload=swapPic()

第三步、在页面中插入图片和链接：

a href=javascript :void(null) onclick='javascript :pictarget();return false;'img src="" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"/a

好，到这里就大功告成了。另外，试试改变transition的数值，可以得到不同的转换效果哟~~

网页随机不重复显示定时自动更换图片代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

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

title无标题文档/title

/head

SCRIPT language=JavaScript

!-- // BannerAD

var bannerAD=new Array();

var bannerADlink=new Array();

var adNum=0;

bannerAD[0]="我的文档/My Pictures/23.jpg";

bannerADlink[0]="#";

bannerAD[1]="我的文档/My Pictures/sy_p2.gif";

bannerADlink[1]="#";

bannerAD[2]="我的文档/My Pictures/sy_p3.gif";

bannerADlink[2]="#";

bannerAD[3]="我的文档/My Pictures/sy_p4.gif";

bannerADlink[3]="#";

bannerAD[4]="我的文档/My Pictures/sy_p5.gif";

bannerADlink[4]="#";

var preloadedimages=new Array();

for (i=0;ibannerAD.length;i++){

preloadedimages=new Image();

preloadedimages.src=bannerAD;

}

function setTransition(){

if (document.all){

bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);

bannerADrotator.filters.revealTrans.apply();

}

}

function playTransition(){

if (document.all)

bannerADrotator.filters.revealTrans.play()

}

function nextAd(){

if(adNumbannerAD.length-1)adNum++ ;

else adNum=0;

setTransition();

document.images.bannerADrotator.src=bannerAD[adNum];

playTransition();

theTimer=setTimeout("nextAd()", 3500);

}

function jump2url(){

jumpUrl=bannerADlink[adNum];

jumpTarget='_blank';

if (jumpUrl != ''){

if (jumpTarget != '')window.open(jumpUrl,jumpTarget);

else location.href=jumpUrl;

}

}

function displayStatusMsg() {

status=bannerADlink[adNum];

document.returnValue = true;

}

//--

/SCRIPT

body table width="319" border="0" cellspacing="0" cellpadding="0"

tr

td width="319" height="1600"IMG src="我的文档/My Pictures/4068262_4071.jpg" name=bannerADrotator width="363" height="555" border=0 style="FILTER: revealTrans(duration=3,transition=23)"SCRIPT language=JavaScriptnextAd()/SCRIPT/td

/tr

/table

/body

/html

这是每个图片变换的 一个接着一个下去的 没有重复 只有当你的图片全部播完了 再一次播放下去 没有停止的哦 至于图片你要多少你就添加多几个

bannerAD[1]="我的文档/My Pictures/sy_p2.gif"; 代码就好了

希望能够帮到你

跪求这段jquery banner切换代码的解释

//将当前显示的BANNER图片的索引值设置为0，也就是默认是第一个图片的序号

var t = n = 0, count;

$(document).ready(function(){

//定义获取四张BANNER图

count=$("#banner_list a").length; 

//设置默认显示第一张BANNER图，其他的隐藏

$("#banner_list a:not(:first-child)").hide(); 、

//设置默认标题为第一张图标的alt信息

$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));

//点击默认的标题，链接到第一张BANNER图的a链接地址

$("#banner_info").click(function(){

window.open($("#banner_list a:first-child").attr('href'), "_blank")

});

//这里为切换数字按钮点击事件

$("#banner li").click(function() {

//获取Li元素内的值，即1，2，3，4

var i = $(this).text() - 1;

//将i的值赋值给新变量n（也就是当前显示图片的索引值序号）

n = i;

//如果被点击的数字按钮的值大于等于BANNER的总数则退出当前语句

if (i = count) return;

//设置标题为当前点击按钮对应的BANNER图片的alt信息

$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));

//删除标题绑定的事件并重新设置标题点击后 打开点击按钮对应的BANNER图片的a链接

$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})

//将所有的BANNER图淡入隐藏 当前点击按钮对应的BANNER图片淡入显示

$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

//将容器#banner的背景设置为空

document.getElementById("banner").style.background="";

//将当前点击按钮的样式设置为高亮样式on

$(this).toggleClass("on");

//清除其它点击按钮的高亮样式

$(this).siblings().removeAttr("class");

});

//设置默认的定时器  每4s执行一次showauto函数

t = setInterval("showAuto()", 4000);

//容器#banner鼠标移入后 清清除定时器 （也就是鼠标移动到BANNER上面停止切换），移开则继续切换

$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

})

//定义自动切换的函数

function showAuto()

{

//如果当前切换的图片索引值大于所有图片的数量 

//也就是当切换到最后一张图片再继续切换的时候 则将当前图片索引设置为0（第一张）

//否则则将当前图片的索引值+1

n = n =(count - 1) ? 0 : ++n;

//重新触发当前BANNER的click事件

$("#banner li").eq(n).trigger('click');

}

求高手帮我做个banner 图片能自动切换和带数字1234样式 我不会代码 只会设计页面来操作 所以尽量要详细点

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片，不点就会自动换

里面有教程和源码

banner图自动切换代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css实现banner轮换图、banner图自动切换代码的信息别忘了在本站进行查找喔。