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轮播图,按老师教过的内容作了一些,剩下的不会了,跪求大佬帮 html代码： <！--轮播图-->
- <！--焦点-->
- <！--左右箭头--> 样式：.out { width:400px; height:300px; margin:30px 0; position:relative; float: left;} .img li { position:absolute; top:0px; left:0px; display:none;height: 320px;width: 400px; } .img li img{width: 100%;height: 320px; } .out .num { position:absolute; bottom:0px; left:0px; font-size:0px; text-align:center; width:100%; } .num li { width:20px; height:20px; background:none; color:#666; text-align:center; line-height:20px; display:inline-block; font-size:16px; border: 2px solid #666;margin-right:10px; cursor:pointer; } .out .btn { position:absolute; top:50%; margin-top:-20px; height:60px; background:rgba(0,0,0,0); color:#FFFFFF; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer; } .btn img{width: 50px;height: 40px;}.out .num li.active-1 { background:#666; color: #fff; } .out:hover .btn { display:block } .out .left { left:0px; } .out .right { right:0px; } js代码：function showRestart(){jQuery('.restart').fadeTo(300,1);}/** Restart demo **/function restart(){jQuery('.restart,.fader').css({'display':'none'});init();}$(function（){ //下方for循环 var size=$(".img li").size() for(var i=1; i<=size; i++){ var li=""+i+""; $(".num").append(li) } /*size 获取当前元素个数*/ //手动控制轮播 $（".img li"）.eq(0).show() $(".num li").eq(0).addClass('active-1') /*mouseover 可以改成点击事件 click*/ $(".num li").mouseover(function(){ $(this).addClass('active-1').siblings('li').removeClass('active-1') var index=$(this).index() /*index 当前元素的意思索引值*/ i=index; //i值和自动轮播值是相同的 $（".img li"）.eq(index).stop().fadeIn（/*淡入*/）.siblings().stop().fadeOut（/*淡出*/） /*eq 0开始*/ }）； //自动控制轮播 var i=0; var t=setInterval(move,3000) //定时器 //右 function move(){ i++; if(i==size){i=0;} $(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1'); $(".img li").eq(i).fadeIn().siblings().fadeOut（)； }； //左 function moveL(){ i--; if(i==-1){i=size-1;} $(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1'); $(".img li").eq(i).fadeIn().siblings().fadeOut（)； }； //自动轮播鼠标经过移入和移除 $（".out"）.hover(function(){ clearInterval(t) },function(){ t=setInterval(move,3000) }）； //左右按钮 $（".out .left"）.click(function(){ moveL() }) $(".out .right").click(function(){ move() }) }); 。