育才学习网1. 简单的HTML+js图片轮播
h5代码：
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</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即可实现轮播图。
2. js图片轮播效果
把5张图片（取名01到05）做好，放入images里，在body里插入 <div > <script type="text/javascript" src="js/flash.js"></script> </div>flash.js如下：var pic_width=450； //图片宽度var pic_height=205； //图片高度var button_pos=4； //按扭位置 1左 2右 3上 4下var stop_time=4000； //图片停留时间（1000为1秒钟）var show_text=0； //是否显示文字标签 1显示 0不显示var txtcolor="000000"； //文字色var bgcolor="DDDDDD"； //背景色var imag=new Array();var link=new Array();var text=new Array();imag[1]="images/01.jpg";link[1]="index-welcome.html";text[1]="标题 1";imag[2]="images/02.jpg";link[2]="index-welcome.html";text[2]="标题 2";imag[3]="images/03.jpg";link[3]="index-welcome.html";text[3]="标题 3";imag[4]="images/04.jpg";link[4]="index-welcome.html";text[4]="标题 4";imag[5]="images/05.jpg";link[2]="index-welcome.html";text[5]="标题 5"；//可编辑内容结束var swf_height=show_text==1?pic_height+20:pic_height;var pics="", links="", texts="";for(var i=1; i<imag.length; i++){ pics=pics+("|"+imag[i]); links=links+("|"+link[i]); texts=texts+("|"+text[i]);}pics=pics.substring(1);links=links.substring(1);texts=texts.substring(1);document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="、js图片轮播代码详情。代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分： 1.jpg">2.jpg">3.jpg">Css代码部分：css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100pxauto;overflow:hidden;cursor:pointer}Javascript代码部分：javascript"src="jquery.js">javascript">$(function(){vartimer=setInterval(function(){if($(".bannerli:last").is(":hidden")){$(".bannerli:visible").addClass("on");$(".bannerli[class=on]").next().fadeIn("slow");$(".bannerli[class=on]").hide().removeClass("on");}else{$(".bannerli:last").hide();$(".bannerli:first").fadeIn("slow");}},2000)$(".bannerli").hover(function(){clear。
4. 求告知JS怎么做轮播图啊,我只做出了无缝动画
<meta charset="utf-8"><style type="text/css">*{padding:0;margin:0;}div{width: 1172px;height: 447px;border: 1px solid black;position: relative;top:20px;left: 96px;overflow: hidden;}.ul1{position: absolute;width: 1172px;height: 447px;}.ul2{position: relative;left: 500px;top: 410px;}.ul2 li{list-style: none;height: 20px;width: 20px;border-radius: 50%;background: white;float: left;margin-left: 5px;cursor: pointer;}#active{background: #f0f;}.ul1 li{list-style: none;float: left;width: 500px;height: 450px;}.li1{background: url(img/1.jpg);}.li2{background: url(img/2.jpg);}.li3{background: url(img/3.jpg);}.li4{background: url(img/4.jpg);}</style><body>