html图片轮播怎么做(简单html图片轮播)
HTML首页怎么加图片轮播？
可以通过输入代码来操作。
这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：
!DOCTYPE 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和css实现轮播图的两种方法
animation-name： 规定需要绑定到选择器的 keyframe 名称。
animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay： 规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction： 规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
简单的HTML+js图片轮播?
h5代码：
div id=“wrap”ul id=“list”li10/lili9/lili8/lili7/lili6/lili5/lili4/lili3/lili2/lili1/ul/div
css代码：
style type="text/css"@-webkit-keyframes move{0%{left:-500px;}100%{left:0;}}#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;overflow:
hidden;}#list{position:absolute;left:0;top:0;padding:0;margin:0;-webkit-animation:5s move infinite linear;width:200%;}#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}#wrap:hover #list{-webkit-animation-play-state:paused;}/style
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
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中的图片轮播怎么做？
可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。
bootstrap也提供轮播模板。
自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张图片，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow:hidden;再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。