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代碼：
<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>
(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函數