jscss简单的图片循环播放_简单的HTML+js图片轮播

A. 图片自动播放轮播JQ，js代码。

//轮播器
var crs_num=1

function interval(){
carousel=setInterval(function(){

num2=crs_num*-800
$('.crs_img').animate({
attr:'x',
target:num2,
time:50,
speed:10,

})
$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))
$('#carousel li').css('color','#999')
$('#carousel li').getnum(crs_num).css('color','#333')
crs_num++;
if(crs_num==3)crs_num=0;
},3000)
}
interval();
$('#carousel li').hover(function(){
var num=$(this).childNum()*-800
clearInterval(carousel)
$('.crs_img').animate({
attr:'x',
target:num,
time:50,
speed:5,

})

$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))
$('#carousel li').css('color','#999')
$(this).css('color','#333')

},function(){
interval()
})
animate是自己封装的，可能和jq不兼容

B. 简单的HTML+js图片轮播

h5代码：

css代码：

(2)jscss简单的图片循环播放扩展阅读：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

C. 怎么用javascript做网站做出图片滚动循环的效果

这个，是我自己做了个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>替代Marquee滚动效果</title>
<style type="text/css">
.Mar
{
margin:8px auto;
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 800px; /*页面滚动需要显示的宽度*/
}
.Mar img
{
border: 3px solid #F2F2F2;
width: 124px;
height: 93px;
}
.inMar
{
float: left;
width: 3500px; /*能在一行放下所有滚动的图片的总宽度*2 像素值或者百分比*/
}
</style>
</head>
<body>
<div id="Mar" class="Mar">
<div id="inMar" class="inMar">
<div id="Mar1" style="float:left;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/c (1).jpg"/><br />轿车：1</td>
<td><img src="img/c (2).jpg"/><br />轿车：2</td>
<td><img src="img/c (3).jpg"/><br />轿车：3</td>
<td><img src="img/c (4).jpg"/><br />轿车：4</td>
<td><img src="img/c (5).jpg"/><br />轿车：5</td>
<td><img src="img/c (6).jpg"/><br />轿车：6</td>
<td><img src="img/c (7).jpg"/><br />轿车：7</td>
<td><img src="img/c (8).jpg"/><br />轿车：8</td>
<td><img src="img/c (9).jpg"/><br />轿车：9</td>
<td><img src="img/c (10).jpg"/><br />轿车：10</td>
<td><img src="img/c (11).jpg"/><br />轿车：11</td>
<td><img src="img/c (12).jpg"/><br />轿车：12</td>
</tr>
</table>

</div>
<div id="Mar2" style="float:left;">
</div>
</div>
</div>

<script language="javascript" type="text/javascript">
var speed = 12; //数字越小速度越快
var step = 2;//步进
var nImgWidth = 130;
var div = document.getElementById("Mar");
var div1 = document.getElementById("Mar1");
var div2 = document.getElementById("Mar2");
div2.innerHTML = div1.innerHTML;
function Marquee() {
//向右滚动
//if (div.scrollLeft <= 0)
//div.scrollLeft += div2.offsetWidth
//else {
//div.scrollLeft--
//}
//向左滚动

if(div.scrollLeft%nImgWidth == 0) {//每一张图片就停留,如果要连续就去掉这点代码
div.scrollLeft += step;
step = 0;
window.setTimeout("set(2)", 2000);

}
if (div2.offsetWidth - div.scrollLeft <= 0)
div.scrollLeft -= div1.offsetWidth
else {
div.scrollLeft += step;
}
}
var MyMarquee = setInterval(Marquee, speed);
div.onmouseover = function() { clearInterval(MyMarquee) };
div.onmouseout = function() { MyMarquee = setInterval(Marquee, speed) };
function set(i) {
i = parseInt(i);
step = i;
}
</script>

</body>
</html>

D. css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放

肯定是做2张同样的第一张图片的，做的不好的视觉上会认为有退回去的感觉，那是没有理解这个循环的本质，在css里，计算机不会把这些图片看成桶状去循环，图片永远是平面的，所以第一张图片过渡时间+最后一张图片过渡时间=其他任意一张图片的过渡时间，这样衔接才完美，由于人眼的视觉停留错位差，你不能让图片过渡时间过长，每个人的视觉停留时间是不一致的，你可以自己设定你认为的时间，比如5张图片5秒循环完，也就是ration设置5s，必须设置direction，速度曲线根据自己喜好设，没有动感的过渡是不完美的

E. js，html，css 讲2张图片每隔5秒轮流循环显示。

<html>
<head>
<script type="text/javascript">
var theA=new Array(2); 两张图片，也可以是写成3，写成三就是3张图片
for(i=0,n=theA.length;i<n;i++)
{theA[i]=new Image();<br> theA[i].src=i+'.jpg';}
var currentImage=1;
var run=true;
var speed=5000; //这个是5秒中
function changeSize1()
{
if(!document.images)
return;
if(!run)
return;
document.getElementById("myImage").src=theA[currentImage].src;
currentImage++;
if(currentImage>theA.length-1)
currentImage=0;
setTimeout('changeSize1()',speed);
}
</script>
</head>
<body onload="changeSize1()">
<img id="myImage" src="0.jpg" border="0" >
</body>
</html>注意图片的路径要根据自己的实际情况去写，图片的名字最好写成数字，1.jpg,2.jpg，以方便代码识别.

F. 求教CSS或JS代码：背景图片无缝循环运动

背景很少用CSS及JS来控制，您可以试试看gif格式的背景，然后repeat，就好像很多雨水雪花飘落了，又节省代码

G. 如何用css、js把一张图片上的图案制作成动画

把你的图片按1、2、3。。。的顺序命名以便用循环调用具体js可用setInterval函数

jscss简单的图片循环播放

与jscss简单的图片循环播放相关的内容