育才学习网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() }) });。
3. 网页设计中如何让图片轮播
网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left,top在css中的意思，这里我提交一段我以前写的代码； html中的代码： js中的代码：ar t=null;function woZaiHouDun(){ var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'; var oBtnLeft = document.getElementById('btnLeft'); var oBtnRight = document.getElementById('btnRight'); var iTarget = 0; var ispeed = -3; oBtnLeft.onclick = function(){ ispeed = 3; } oBtnRight.onclick = function(){ ispeed = -3; } t=setInterval(function(){ iTarget = oUl.offsetLeft -ispeed; if( iTarget < - oUl.offsetWidth/2){ oUl.style.left =0 +'px'; iTarget = oUl.offsetLeft -ispeed; } if( iTarget > 0){ oUl.style.left =- oUl.offsetWidth/2 +'px'; iTarget = oUl.offsetLeft -ispeed; } oUl.style.left =iTarget +'px'; },30）}这样是能实现轮播的。
4. 用jquery实现图片轮播怎么写呢求指教
*{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px； /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden； /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul{ width: 2500px; position: relative； /*此处需注意relative ： 对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/ } .slideShow ul li{ float: left； /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ width: 620px; } .slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px; line-height: 20px; } .slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; } .slideShow .showNav .active{ background: #b63e1a; } js代码规范： 主体代码：[html] view plain copy print?<body> <！--图片布局开始--> <！--图片布局结束--> <！--按钮布局开始--> 1 2 3 4 <！--按钮布局结束-->