图片轮播效果代码(轮播图怎么制作代码)
HTML图片轮播代码怎么写？
一、数字键控制代码：
div style="position:relative; top:-50px; left:240px;"
a href="javascript:show(1)"span id="I1" style="width:18px; text-align:left; background:gray"1/span/a
a href="javascript:show(2)"span id="I2" style="width:18px;text-align:left;background-color:gray"2/span/a
a href="javascript:show(3)"span id="I3" style="width:18px;text-align:left;background-color:gray"3/span/a
a href="javascript:show(4)"span id="I4" style="width:18px;text-align:left;background-color:gray"4/span/a
a href="javascript:show(5)"span id="I5" style="width:18px;text-align:left;background-color:gray"5/span/a
a href="javascript:show(6)"span id="I6" style="width:18px;text-align:left;background-color:gray"6/span/a/div
script language="javaScript"
var nowIndex=1;
var maxIndex=6;
function show(index)
{
if(Number(index)){
clearTimeout(theTimer);
nowIndex=index;
}
for(var i=1;i(maxIndex+1);i++){
if(i==nowIndex)
{document.getElementById('pic'+nowIndex).style.display='';
document.getElementById('I'+nowIndex).style.backgroundColor='red';}
else
{document.getElementById('pic'+i).style.display='none';
document.getElementById('I'+i).style.backgroundColor='gray';}
}{
if(nowIndex==maxIndex)
nowIndex=1;
else
nowIndex++;
}
theTimer=setTimeout('show()',3000);
}
/script
/div
二、图片自动播放：
div id="butong_net_left" style="overflow:hidden;width:1000px;"
table cellpadding="0" cellspacing="0" border="0"
trtd id="butong_net_left1" valign="top" align="center"
table cellpadding="2" cellspacing="0" border="0"
tr align="center"
找一个图片轮播的代码：效果如下
我这儿有例子：
DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="fade"
ul class=lst-main
liA style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blankimg alt="" src="图片地址"/A/li
liA style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blankimg alt="" src="图片地址"/A/li
/ul/DIV
上下切换代码：
DIV style="WIDTH: 宽度px; HEIGHT: 高度px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll"
ul class=lst-main
liA style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blankimg alt="" src="图片地址"/A/li
liA style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blankimg alt="" src="图片地址"/A/li
/ul/DIV
HTML图片轮播代码怎么写
html部分
div?id="container"????
div?class="sections"????
div?class="section"?id="section0"h3this?is?the?page1/h3/div????
div?class="section"?id="section1"h3this?is?the?page2/h3/div????
div?class="section"?id="section2"h3this?is?the?page3/h3/div????
div?class="section"?id="section3"h3this?is?the?page4/h3/div????
/div????
/div
css部分
*{????
padding:?0;????
margin:?0;????
}????
html,body{????
height:?100%;????
}????
#container?{????
width:?100%;????
height:?500px;????
overflow:?hidden;????
}????
.sections,.section?{????
height:100%;????
}????
#container,.sections?{????
position:?relative;????
}????
.section?{????
background-color:?#000;????
background-size:?cover;????
background-position:?50%?50%;????
text-align:?center;????
color:?white;????
}????
#section0?{????
background-image:?url('images/1.jpg');????
}????
#section1?{????
background-image:?url('images/2.jpg');????
}????
#section2?{????
background-image:?url('images/3.jpg');????
}????
#section3?{????
background-image:?url('images/4.jpg');????
}??
.pages?li{list-style-type:none;width:10px;height:10px;border-radius:10px;background-color:white}.pages?li:hover{box-shadow:0?0?5px?2px?white}.pages?li.active{background-color:orange;box-shadow:0?0?5px?2px?orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal?li{display:inline-block;margin-right:10px}.pages.horizontal?li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical?li{margin-bottom:10px}.pages.vertical?li:last-child{margin-bottom:0}
JS部分
script?src="js/jquery-1.11.0.min.js"?type="text/javascript"/script
//引入pageSwitch.min.js
script????
$("#container").PageSwitch({????
direction:'horizontal',????
easing:'ease-in',????
duration:1000,????
autoPlay:true,????
loop:'false'????
});????
/script
如图
求 图片轮播代码
style type="text/css"
#banner {position:relative; width:1070px; height:280px; overflow:hidden; margin:0 auto;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px; }
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;} !-- 让四张图片都可以重叠在一起--
/style
script src="../jquery.js" type="text/javascript"/script
script type="text/javascript"
var t = n = 0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i = count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n =(count - 1) ? 0 : ++n;
$("#banner li").eq(n).trigger('click');
}
/script
========================以上是CSS和脚本=======================
div id="banner"
div id="banner_bg"/div !--标题背景--
div id="banner_info"/div !--标题--
ul
li class="on"1/li
li2/li
li3/li
li4/li
/ul
div id="banner_list"
a href="#" target="_blank"img src="../images/jsbg1.jpg" title="" alt="" //a
a href="#" target="_blank"img src="../images/jsbg2.jpg" title="" alt="" //a
a href="#" target="_blank"img src="../images/jsbg3.jpg" title="" alt="" //a
a href="#" target="_blank"img src="../images/jsbg4.jpg" title="" alt="" //a
/div
/div
图片在哪里放，你应该看的很清楚吧，
图片轮播的代码怎么用啊
插入到你要设置图片轮播的地方就可以啊
代码如下：
div class="box J_TBox"
div class="shop-slider"
div class="bd"
div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" style="height:400px;" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}"
ul class="lst-main"
lia href="连接地址1" img src="" alt="" //a/li
lia href="连接地址1" img src="" alt="" //a/li
lia href="连接地址1" img src="" alt="" //a/li
/ul
/div
/div
/div
/div
（四）代码详解
（1）其中ul class="lst-main"与/ul之间的代码为用户可以自定义修改的部分，为轮播的图片地址和超级连接地址信息。
lia href="连接地址1" img src="" alt="" //a/li
中的“为图片地址。href中商品的连接地址。
（2）第四行style="height:400px;" data-widget-config中的400px为图片高度设置
请问淘宝的图片轮播代码是什么？
亲 是下面这个 一、带渐变效果的淘宝店铺促销轮播代码：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处。 如果还不可以的话 我给你我写的帖子看看