首页轮换图片代码（更换首页图片）

本篇文章给大家谈谈首页轮换图片代码，以及更换首页图片对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html怎样实现图片自动切换
• 2、淘宝首页宽屏图片轮播代码
• 3、请问淘宝的图片轮播代码是什么？
• 4、淘宝首页全屏代码下如何插入轮播图片代码
• 5、网页的图片轮换的代码是什么

html怎样实现图片自动切换

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的script标签中，填入js代码：setInterval('$("img").attr("src", "small3.png")', 1000);。

3、浏览器进入index.html页面中，此时显示出一张图片。

4、过1秒后，图片自动切换为另一张图片了。

淘宝首页宽屏图片轮播代码

我有代码，如果不是学网页的，我怕你看不懂！

!doctype html

html

head

meta charset="utf-8"

titlejQuery图片轮播代码/title

style

.flexslider {

 margin: 0px auto 20px;

 position: relative;

 width: 100%;

 height: 482px;

 overflow: hidden;

 zoom: 1;

}

.flexslider .slides li {

 width: 100%;

 height: 100%;

}

.flex-direction-nav a {

 width: 70px;

 height: 70px;

 line-height: 99em;

 overflow: hidden;

 margin: -35px 0 0;

 display: block;

 background: url(images/ad_ctr.png) no-repeat;

 position: absolute;

 top: 50%;

 z-index: 10;

 cursor: pointer;

 opacity: 0;

 filter: alpha(opacity=0);

 -webkit-transition: all .3s ease;

 border-radius: 35px;

}

.flex-direction-nav .flex-next {

 background-position: 0 -70px;

 right: 0;

}

.flex-direction-nav .flex-prev {

 left: 0;

}

.flexslider:hover .flex-next {

 opacity: 0.8;

 filter: alpha(opacity=25);

}

.flexslider:hover .flex-prev {

 opacity: 0.8;

 filter: alpha(opacity=25);

}

.flexslider:hover .flex-next:hover,

.flexslider:hover .flex-prev:hover {

 opacity: 1;

 filter: alpha(opacity=50);

}

.flex-control-nav {

 width: 100%;

 position: absolute;

 bottom: 10px;

 text-align: center;

}

.flex-control-nav li {

 margin: 0 2px;

 display: inline-block;

 zoom: 1;

 *display: inline;

}

.flex-control-paging li a {

 background: url(images/dot.png) no-repeat 0 -16px;

 display: block;

 height: 16px;

 overflow: hidden;

 text-indent: -99em;

 width: 16px;

 cursor: pointer;

}

.flex-control-paging li a.flex-active,

.flex-control-paging li.active a {

 background-position: 0 0;

}

.flexslider .slides a img {

 width: 100%;

 height: 482px;

 display: block;

}

/style

/head

body

br/br/br/

!-- 轮播广告 --

div id="banner_tabs" class="flexslider"

 ul class="slides"

  li

   a title="" target="_blank" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

  li

   a title="" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

  li

   a title="" href="#"

    img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png"

   /a

  /li

 /ul

 ul class="flex-direction-nav"

  lia class="flex-prev" href="javascript:;"Previous/a/li

  lia class="flex-next" href="javascript:;"Next/a/li

 /ul

 ol id="bannerCtrl" class="flex-control-nav flex-control-paging"

  lia1/a/li

  lia2/a/li

  lia2/a/li

 /ol

/div

script src="js/jquery-1.10.2.min.js"/script

script src="js/slider.js"/script

script type="text/javascript"

$(function() {

 var bannerSlider = new Slider($('#banner_tabs'), {

  time: 5000,

  delay: 400,

  event: 'hover',

  auto: true,

  mode: 'fade',

  controller: $('#bannerCtrl'),

  activeControllerCls: 'active'

 });

 $('#banner_tabs .flex-prev').click(function() {

  bannerSlider.prev()

 });

 $('#banner_tabs .flex-next').click(function() {

  bannerSlider.next()

 });

})

/script

/body

/html

请问淘宝的图片轮播代码是什么？

亲 是下面这个 一、带渐变效果的淘宝店铺促销轮播代码： DIV class="slider-promo J_Slider J_TWidget tb-slide" style="HEIGHT: 400px" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" ul class="lst-main tb-slide-list" style="HEIGHT: 400px" liA target=_blank href="#"img alt="" src="图片地址1"/A/li liA target=_blank href="#"img alt="" src="图片地址2"/A/li liA target=_blank href="#"img alt="" src="图片地址3"/A/li liA target=_blank href="#"img alt="" src="图片地址4"/A/li/ul ul class=lst-trigger 二、淘宝促销轮播代码之渐变效果代码解释： HEIGHT: 400px 设置你的轮播模块高度，根据你的促销图片的尺寸来设置，此版本轮播是4张图片，且4张图片宽度、高度分别统一。本设置在代码中有两处。 A target=_blank href="#" “#”代表你的促销商品的链接网址，共有4处。 img alt="" src="图片地址1" “图片地址1”设置你促销图片的网络地址，也有4处。 如果还不可以的话 我给你我写的帖子看看

求采纳

淘宝首页全屏代码下如何插入轮播图片代码

直接用全屏轮播代码。

天猫店：

div class="MaGong"  style="height:0px;"

div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; "

div class="sn-simple-logo" style="left:-465px;top:0px;height:轮播图片高度px;width:1920px;border:none;padding:0;background:none; "

div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget"

div class="J_TWidget Mprev" data-widget-config="{'trigger':'.IX','align':{'node':'.IX','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;"

div class="Mprev" style="font-size:100px;cursor:pointer;"img src=""/div

/div

div class="J_TWidget Mnext" data-widget-config="{'trigger':'.IX','align':{'node':'.IX','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;"

div class="Mnext" style="font-size:100px;cursor:pointer;"img src=""/div

/div

div class="IX" style="height:轮播图片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;"

ul class="macontent" style="height:轮播图片高度px;width:1920px;padding:0px;margin:0px;"

li class="item"a target="_blank" href="图片1商品链接"img src="图片1"/a/lili class="item"a target="_blank" href="图片2商品链接"img src="图片2"/a/li

/ul

/div

div class="sn-simple-logo" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;"

div class="sn-simple-logo" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;"

ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;"

li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/lili style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/li

/ul

/div

div class="sn-simple-logo" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;"

ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;"

li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/lili style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/li/ul/div/div/div /div/div/div

淘宝店专业版：

div class="MaGong"  style="height:0px;"

div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; "

div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:轮播图片高度px;width:1920px;border:none;padding:0;background:none; "

div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget"

div class="J_TWidget Mprev" data-widget-config="{'trigger':'.WN','align':{'node':'.WN','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;"

div class="Mprev" style="font-size:100px;cursor:pointer;"img src=""/div/div

div class="J_TWidget Mnext" data-widget-config="{'trigger':'.WN','align':{'node':'.WN','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;"

div class="Mnext" style="font-size:100px;cursor:pointer;"img src=""/div/div

div class="WN" style="height:轮播图片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;"

ul class="macontent" style="height:轮播图片高度px;width:1920px;padding:0px;margin:0px;"

li class="item"a target="_blank" href="图片1商品链接"img src="图片1"/a/lili class="item"a target="_blank" href="图片2商品链接"img src="图片2"/a/li/ul/div

div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;"

div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;"

ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;"

li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/lili style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/li

/ul

/div

div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;"

ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;"

li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/lili style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/li/ul/div/div/div/div/div/div

淘宝基础版：

div class="MaGong" data-title="来自淘宝代码生成网" data-time="1502845797" style="height:0px;"

div class="footer-more footer-more-trigger" style="left:auto;right:auto;width:950px;height:0px;top:auto;padding:0;border:none;z-index:1;background:none; "

div class="footer-more footer-more-trigger" style="left:-485px;top:0px;height:轮播图片高度px;width:1920px;border:none;padding:0;background:none; "

div data-widget-config="{'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'mouse','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'}" data-widget-type="Carousel" class="J_TWidget"

div class="J_TWidget Mprev" data-widget-config="{'trigger':'.UF','align':{'node':'.UF','offset':[-510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;"

div class="Mprev" style="font-size:100px;cursor:pointer;"img src=""/div

/div

div class="J_TWidget Mnext" data-widget-config="{'trigger':'.UF','align':{'node':'.UF','offset':[510,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;"

div class="Mnext" style="font-size:100px;cursor:pointer;"img src=""/div

/div

div class="UF" style="height:轮播图片高度px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;"

ul class="macontent" style="height:轮播图片高度px;width:1920px;padding:0px;margin:0px;"

li class="item"a target="_blank" href="图片1商品链接"img src="图片1"/a/lili class="item"a target="_blank" href="图片2商品链接"img src="图片2"/a/li

/ul

/div

div class="footer-more footer-more-trigger" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;"

div class="footer-more footer-more-trigger" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;"

ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;"

li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/lili style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/li

/ul

/div

div class="footer-more footer-more-trigger" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;"

ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;"

li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/lili style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;"●/li/ul/div/div/div /div /div/div

网页的图片轮换的代码是什么

div style="margin-left:15px; margin-top:10px; margin-right:10px; width:230px;"

style type="text/css"

!--

#imgTitle {position:relative;left:0px;text-align:left;overflow: hidden;}

#imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; }

#imgTitle_down {left:0px;text-align: right; width:inherit; }

/* 图片框样式 */

.imgClass {border: 1px solid #EEEEEE;}

/* 图片文字框样式 */

#txtFrom {text-align: center;vertical-align: middle;}

/* 数字按钮样式 */

.button {text-decoration: none;padding: 1px 7px; line-height:10px; margin-right: 0px; font-size: 9px; font-weight: bold; border-left: 1px #fff solid; }

.button:link { text-decoration: none; color: #FFF; background: #000;}

.button:visited { text-decoration: none; color: #FFF; background: #000;}

.button:hover { text-decoration: none; color: #FFF; background: #F00; }

.button:active { text-decoration: none; color: #FFF; background: #000; }

.buttonDiv {margin: 0px;background: #000000;height: 1px;width: 21px;float: right;text-align: center;vertical-align: middle;}

--

/style

script language='javascript' type='text/javascript'

var imgWidth=230; //图片宽

var imgHeight=170; //图片高

var textFromHeight=20; //焦点字框高度 (单位为px)

var textStyle='fb'; //焦点字class style (不是连接class)

var textLinkStyle='p1'; //焦点字连接class style

var buttonLineOn='#F00'; //button下划线on的颜色

var buttonLineOff='#000'; //button下划线off的颜色

var TimeOut=5000; //每张图切换时间 (单位毫秒);

var imgUrl=new Array();

var imgLink=new Array();

var imgtext=new Array();

var imgAlt=new Array();

var adNum=0;

//焦点字框高度样式表 开始

document.write('style type="text/css"');

document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');

document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');

document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+11)+'px; height: 18px}');

document.write('/style');

document.write('div id="focuseFrom"');

//焦点字框高度样式表 结束

imgUrl[1]='/images/content/2012/20120604154259198160.jpg';

imgtext[1]='a target="_blank" href="/zjzx/tpxw/54826.html"国家纺织检测重点实验室联盟总部落户无锡/a';

imgLink[1]='/zjzx/tpxw/54826.html';

imgAlt[1]='国家纺织检测重点实验室联盟总部落户无锡';

imgUrl[2]='/images/content/2012/20120601143224661455.jpg';

imgtext[2]='a target="_blank" href="/zjzx/tpxw/54780.html"保障质量安全 守望儿童幸福/a';

imgLink[2]='/zjzx/tpxw/54780.html';

imgAlt[2]='保障质量安全 守望儿童幸福';

imgUrl[3]='/images/content/2012/20120529093056858140.jpg';

imgtext[3]='a target="_blank" href="/zjzx/tpxw/54690.html"杭州检验检疫局有效防控外来有害生物入侵/a';

imgLink[3]='/zjzx/tpxw/54690.html';

imgAlt[3]='杭州检验检疫局有效防控外来有害生物入侵';

imgUrl[4]='/images/content/2012/20120529092955413952.jpg';

imgtext[4]='a target="_blank" href="/zjzx/tpxw/54689.html"宜兴检验检疫局确保茶叶出口质量安全/a';

imgLink[4]='/zjzx/tpxw/54689.html';

imgAlt[4]='宜兴检验检疫局确保茶叶出口质量安全';

function changeimg(n)

{

adNum=n;

window.clearInterval(theTimer);

adNum=adNum-1;

nextAd();

}

function goUrl()

{ window.open(imgLink[adNum]);

}

//NetScape开始

//if (navigator.appName == "Netscape")

//{

function nextAd()

{

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

else adNum=1;

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

document.images.imgInit.src=imgUrl[adNum];

document.images.imgInit.alt=imgAlt[adNum];

document.getElementById('focustext').innerHTML=imgtext[adNum];

document.getElementById('link'+adNum).style.background=buttonLineOn;

document.getElementById('imgLink').href=imgLink[adNum];

for (var i=1;i=imgUrl.length;i++)

{

if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}

}

}

document.write('a id="imgLink" href="'+imgLink[4]+'" target=_blank class="linkwhite"img src="'+imgUrl[4]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[4]+'" class="imgClass"/adiv id="txtFrom"span id="focustext" class="'+textStyle+'"'+imgtext[4]+'/span/div')

document.write('div id="imgTitle"');

document.write('div id="imgTitle_down"');

//数字按钮代码开始

for(var i=1;iimgUrl.length;i++){document.write('a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" title="'+imgAlt[i]+'" onFocus="this.blur()" target=_self'+i+'/a');}

//数字按钮代码结束 document.write('/div');

document.write('/div');

document.write('/div');

nextAd();

/script /div

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