育才学习网1. 新手 , 求大神给写一段Js轮播效果 , 加解释 更好
直接给你JS代码吧，HTML自己写$（document）.ready(function(){ var arr = new Array(); arr[0] = document.getElementById("to1").style.src="images/001.png"; arr[1] = document.getElementById("to2").style.src="images/002.png"; arr[2] = document.getElementById("to3").style.src="images/003.png"; arr[3] = document.getElementById("to4").style.src="images/004.png"; var curIndex = 0； //定义开始索引 setInterval(changeImg,1000)； //设定轮播，间隔时间function changeImg() { var obj = document.getElementById("bei")； //获得所要设置的元素 if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } obj.style.background = "url(" + arr[curIndex] + ")"；//设置获得元素的背景图片 } }）；原理就是把要轮播图片的路径设为一个集合，然后用遍历集合的方式把图片一个一个的显示出来。
还有好多轮播的方法，这个比较简单，HTML代码自己写吧，不难。
2. 简单的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即可实现轮播图。
3. 用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 <！--按钮布局结束-->