简单html图片轮播完整代码用CSS和HTML(html+css轮播图代码)
怎么用html和css做图片轮播
!DOCTYPE html html head meta charset="UTF-8" titlecss实现轮播效果/title style type="text/css" .one { position: absolute; width: 500px; height: 400px; overflow: hidden; } .one_cantent img { width: 500px; height: 300px; float: left; } .one_cantent { width: 2500px; height: 400px; position: absolute; left: 0px; animation-name: move; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes move { 0% { left: 0px; } 25% { left: -500px; } 50% { left: -1000px; } 75% { left: -1500px; } 100% { left: -2000px } } /style /head body div div img src="./image/0.jpg" img src="./image/1.jpg" img src="./image/2.jpg" img src="./image/3.jpg" img src="./image/4.jpg" /div /div /body /html
简单的HTML+js图片轮播?
h5代码：
div id="wrap"
ul id="list"
li10/li
li9/li
li8/li
li7/li
li6/li
li5/li
li4/li
li3/li
li2/li
li1/li
/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。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。
使用html和css实现轮播图的两种方法
animation-name： 规定需要绑定到选择器的 keyframe 名称。
animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay： 规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction： 规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
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
如图
怎么用html5+css3 实现图片轮播
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
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的。
