图片轮播效果实现代码(轮播图样式代码)
怎么用html5+css3 实现图片轮播
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
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"
js如何制作图片轮播
工具/材料
Sublime Text
01
首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02
然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03
接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04
最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05
最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
图片轮播的代码
titlejavascript图片轮换/title
style type="text/css"
#album{
position:relative;
width:400px;
height:300px;
border:10px solid #EFEFDA;
overflow:hidden;
}
#album dt {
margin:0;
padding:0;
width:400px;
height:300px;
overflow:hidden;
}
#album img {
border:2px solid #000;
}
#album dd {
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;
float:left;
margin-right:10px;
width:15px;
height:15px;
line-height:15px;
text-align:center;
text-decoration:none;
color:#808080;
background:transparent url(/jscss/demoimg/200910/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
/styledl id="album"
dt
img id="index1" alt=余秋的黄昏" src="/jscss/demoimg/wall3.jpg" /
img id="index2" alt="美丽欧洲" src="/jscss/demoimg/wall4.jpg" /
img id="index3" alt="巨石阵的神秘" src="/jscss/demoimg/wall5.jpg" /
/dt
dd
a href="#index1"1/aa href="#index2"2/aa href="#index3"3/a
/dd
/dl
script type="text/javascript"
function imageRotater(id){
var cases = "",
album = document.getElementById(id),
images = album.getElementsByTagName("img"),
links = album.getElementsByTagName("a"),
dt = album.getElementsByTagName("dt")[0],
length = images.length,
aIndex = 1,
aBefore = length;
for(var i=0;i length;i++){
cases += images[i].id + ':"'+images[i].getAttribute("src")+'",'
}
images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片位置错误
var tip = document.createElement("dd");
tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";
album.insertBefore(tip,dt.nextSibling);
if(!+"\v1"){
tip.style.color = "#369";
tip.style.filter = "alpha(opacity=67)"
}else{
tip.style.cssText += "background: rgba(164, 173, 183, .65);"
}
cases = eval("({"+cases.replace(/,$/,"")+"})");
for(var i=0;ilength;i++){
links[i].onclick = function(e){
e =e || window.event;
var index = this.toString().split("#")[1];
aIndex = index.charAt(index.length-1);//☆☆☆☆
images[0].src = cases[index];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
!+"\v1" ?(e.returnValue = false) :(e.preventDefault());
}
}
var prefix = images[0].id.substr(0,images[0].id.length -1);
(function(){
setTimeout(function(){
if(aIndex length){
aIndex = 1;
}
images[0].src = cases[prefix+aIndex];
tip.innerHTML = images[aIndex -1].getAttribute("alt");
tip.style.bottom = "-40px";
links[aBefore-1].className = "";
links[aIndex-1].className = "hover";
aBefore = aIndex;
aIndex++;
move(tip);
setTimeout(arguments.callee,1500)
},1500)
})()
var move = function(el){
var begin = parseFloat(el.style.bottom),
speed = 1;
el.bottom = begin;
(function(){
setTimeout(function(){
el.style.bottom = el.bottom + speed + "px";
el.bottom += speed;
speed *= 1.5;//下一次移动的距离
if(el.bottom = 0){
el.style.bottom = "0px";
}else{
setTimeout(arguments.callee,23);
}
},25)
})()
}
}
window.onload = function(){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
imageRotater("album");
}
/script