HTML轮播图(HTML轮播图速度)

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"

使用html和css实现轮播图的两种方法

animation-name： 规定需要绑定到选择器的 keyframe 名称。

animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function： 规定动画的速度曲线。

animation-delay： 规定在动画开始之前的延迟。

animation-iteration-count： 规定动画应该播放的次数。

animation-direction： 规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间，按照总时间的百分比分配；

以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；

方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；

问题在于图片一直处于切换状态，中间没有停顿；

HTML首页怎么加图片轮播？

可以通过输入代码来操作。

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：

!DOCTYPE HTML

html

head

link rel="stylesheet" type="text/css" href="./css/init2.css"

script type="text/javascript" src="./js/jquery-1.11.3.min.js"/script

script type="text/javascript" src="./js/test2.js"/script

/head

body

div id="layout"

header ?class="clearfix"

div id="banner"

ul id="banner_img"

liimg src="./img/s1.jpg"/li

liimg src="./img/s2.jpg"/li

liimg src="./img/s3.jpg"/li

/ul

/div

/header

/div

/body

/html

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

看一下引入的css，init2.css

*{

margin: 0px ;

padding: 0px ;

}

#layout{

width: 960px ;

margin: 0 auto ;

}

#banner{

position: relative;

overflow: hidden;

width: 600px;

height: 200px;

border-radius: 10px ;

border: 2px solid black;

}

#banner_img li{

float: left;

list-style-type: none;

}

#index{

position: absolute;

right: 8px ;

bottom: 8px ;

}

#index li{

float: left;

width: 16px ;

height: 16px ;

text-align: center;

line-height: 16px ;

border-radius: 5px ;

border:1px solid #FF7300 ;

background: white;

list-style: none;

margin-left: 8px ;

cursor: pointer;

}

.clearfix:after{

content: "" ;

height: 0px ;

display: block;

clear:both ;

}

.on

{

background:#FF7300 ;

}

css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;

下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。

//fadeIn and fadeOut

var time ;

var index = 1 ;

var tolnum = 3 ;

$(function(){

span style="white-space:pre" /spansetInterval("showBanner("+tolnum+")",3000);

});

function showBanner(n)

{

span style="white-space:pre" /spanvar ul = $("#banner_img") ;

span style="white-space:pre" /spanul.children().fadeOut("slow") ;

span style="white-space:pre" /spanul.children().eq(index).fadeIn("slow") ;

span style="white-space:pre" /spanindex = index+1n-1 ? 0 : index+1 ;

}

恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。

第二种方法是利用jquery的animation来实现margin属性的过渡。

init();

function init()

{

$(function(){

var index = 0 ;

var adTime ;

var len = $("#banner_img li").length ;

addIndex(len) ;

var bannerLi = $("#index li");

//handle index

$("#index li").mouseover(function() {

index = $("#index li").index(this) ;

showImgs(index) ;

});

//toggleInterval

$("#banner").hover(function(){

clearInterval(adTimer);

},function(){

adTimer=setInterval(function(){

//alert(index) ;

showImgs(index);

index++;

if(index==len){

index=0;

}

},2000)

}).trigger('mouseleave');

});

}

//auto add index

function addIndex(n)

{

var ul = $("ul id=\"index\"/ul") ;

for(var i=1;i=n;i++)

{

var li = $("li/li") ;

li.append(function(num){

return num

}(i)) ;

ul.append(li) ;

}

ul.children().first().addClass('on') ;

$("#banner_img").append(ul);

}

function showImgs(index)

{

var adwidth=$("#banner_imgli:first").width();

$("#banner_img").stop(true, false) ;

//$("#banner_img").css('margin-left', -index*adwidth+"px");

$("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000);

$("#index li").removeClass('on').eq(index).addClass('on') ;

}

hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。pre name="code" class="javascript" $("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000);

这了就是对jquery中animation方法的使用，通过传进来的index来改变banner_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。

HTML中的图片轮播怎么做？

可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。

bootstrap也提供轮播模板。

自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张图片，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow:hidden;再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。

html如何做轮播图

!DOCTYPE html html head ? ? meta charset="UTF-8" ? ? titleCSS3仿JS轮播图/title ? ? link rel="stylesheet" href="lbimage.css"/ /head body ? ? div id="photo" ? ? ? ? !--//1-- ? ? ? ? input type="radio" name="btn" id="img1" checked/ ? ? ? ? div ? ? ? ? ? ? divimg src="images/img1.jpg"//div ? ? ? ? ? ? div ? ? ? ? ? ? ? ? label for="img6" class="up leftjianbian"/label ? ? ? ? ? ? ? ? label for="img2" class="down rightjianbian"/label ? ? ? ? ? ? /div ? ? ? ? /div ? ? ? ? !--//2-- ? ? ? ? input type="radio" name="btn" id="img2"/ ? ? ? ? div ? ? ? ? ? ? divimg src="images/img2.jpg"//div ? ? ? ? ? ? div ? ? ? ? ? ? ? ? label for="img1" class="up leftjianbian"/label ? ? ? ? ? ? ? ? label for="img3" class="down rightjianbian"/label ? ? ? ? ? ? /div ? ? ? ? /div ? ? ? ? !--//3-- ? ? ? ? input type="radio" name="btn" id="img3"/ ? ? ? ? div ? ? ? ? ? ? divimg src="images/img3.jpg"//div ? ? ? ? ? ? div ? ? ? ? ? ? ? ? label for="img2" class="up leftjianbian"/label ? ? ? ? ? ? ? ? label for="img4" class="down rightjianbian"/label ? ? ? ? ? ? /div ? ? ? ? /div ? ? ? ? !--//4-- ? ? ? ? input type="radio" name="btn" id="img4"/ ? ? ? ? div ? ? ? ? ? ? divimg src="images/img4.jpg"//div ? ? ? ? ? ? div ? ? ? ? ? ? ? ? label for="img3" class="up leftjianbian"/label ? ? ? ? ? ? ? ? label for="img5" class="down rightjianbian"/label ? ? ? ? ? ? /div ? ? ? ? /div ? ? ? ? !--//5-- ? ? ? ? input type="radio" name="btn" id="img5"/ ? ? ? ? div ? ? ? ? ? ? divimg src="images/img5.jpg"//div ? ? ? ? ? ? div ? ? ? ? ? ? ? ? label for="img4" class="up leftjianbian"/label ? ? ? ? ? ? ? ? label for="img6" class="down rightjianbian"/label ? ? ? ? ? ? /div ? ? ? ? /div ? ? ? ? !--//6-- ? ? ? ? input type="radio" name="btn" id="img6"/ ? ? ? ? div ? ? ? ? ? ? divimg src="images/img6.jpg"//div ? ? ? ? ? ? div ? ? ? ? ? ? ? ? label for="img5" class="up leftjianbian"/label ? ? ? ? ? ? ? ? label for="img1" class="down rightjianbian"/label ? ? ? ? ? ? /div ? ? ? ? /div ? ? ? ? div ? ? ? ? ? ? label for="img1" id="dot1"/label ? ? ? ? ? ? label for="img2" id="dot2"/label ? ? ? ? ? ? label for="img3" id="dot3"/label ? ? ? ? ? ? label for="img4" id="dot4"/label ? ? ? ? ? ? label for="img5" id="dot5"/label ? ? ? ? ? ? label for="img6" id="dot6"/label ? ? ? ? /div ? ? /div /body /html

css：部分

@charset "utf-8";

body{

background-image: url("images/bbbefb51f8198618b654e23e48ed2e738ad4e69a.jpg");

background-size: cover;

}

img{

width: 850px;

height: 500px;

}

.photo{

width: 900px;

height: 550px;

border: 1px solid #555555;

margin: auto auto;

position: relative;

background: #ffffff;

box-shadow: 0 10px 80px rgba(0,0,0,.6)

}

.photo input{

display: none;

}

.image{

position: absolute;

top: 0px;

left: 0px;

width: 800px;

height: 450px;

margin: 25px 25px;

transform: scale(0);

opacity: 0;

transition: all 0.7s;

}

.image img{

}

.nav label{

width: 150px;

height: 500px;

margin: 25px 25px;

position: absolute;

z-index: 10;

opacity: 0;

display: none;

cursor: pointer;

transition: opacity 0.2s;

color: #ffffff;

font-size: 50px;

line-height: 450px;

text-align: center;

text-shadow: 0 0 15px #555555);

}

.leftjianbian{

background: linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -o-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -ms-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -moz-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

}

.rightjianbian{

background: linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -o-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -ms-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -moz-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);

background: -webkit-linear-gradient(left , rgba(250, 242, 239,0) 10% , rgba(158, 148, 166,0.5) 100%);

}

.image:hover + .nav label{

opacity: 0.5;

}

.nav label:hover{

opacity: 1;

}

.nav .down{

right: 0;

}

input:checked + .control .image{

opacity: 1;

transform: scale(1);

transition: all 1s;

}

input:checked + .control .nav label{

display: block;

}

.dots{

width:100%;

height: 20px;

position: absolute;

bottom: 30px;

text-align: center;

}

.dot{

width: 10px;

height: 10px;

margin: 0px 5px;

border-radius: 50%;

position: relative;

display: inline-block;

background: rgba(0,0,0,0.3);

}

input#img1:checked ~ .dots label#dot1,

input#img2:checked ~ .dots label#dot2,

input#img3:checked ~ .dots label#dot3,

input#img4:checked ~ .dots label#dot4,

input#img5:checked ~ .dots label#dot5,

input#img6:checked ~ .dots label#dot6{

background: rgba(0,0,0,0.7);

}