css中我有多张图片，我要实现点击一下旁边的按钮就移动一张图片，要左右都可以移动的。请高手指点！ 用JQUERY怎么做出来 图片从右到左自动切换，点击向右的标...
\u8bf7\u95ee\u7528\u7eafcss\u53ef\u4ee5\u505a\u51fa\u5de6\u53f3\u4e24\u8fb9\u90fd\u6709\u6309\u94ae\uff0c\u70b9\u51fb\u540e\u591a\u5f20\u56fe\u7247\u53ef\u4ee5\u5207\u6362\u7684\u6548\u679c\uff0c\u56e0\u4e3a\u5728\u6dd8\u5b9d\u4f7f\u7528\u4e0d\u80fd\u6709js\u4e0d\u7136\u5c31\u4f7f\u7528\u6eda\u52a8\u56fe\u7247
\u8fd9\u79cd\u63d2\u4ef6\u975e\u5e38\u591a, \u4f60\u53ef\u4ee5\u6311\u4e00\u4e2a\u7528
\u5982\u679c\u4f60\u8981\u95ee\u539f\u7406, \u5173\u952e\u70b9\u662f
\u5916\u5c42div\u662f\u4e00\u4e2a\u7a97\u53e3, \u63a7\u5236\u597d\u957f\u5bbd, \u8bbe\u7f6eoverflow\u4e3ahidden, \u90a3\u4e48\u53ea\u6709\u5728\u6b64\u533a\u57df\u5185\u7684\u5185\u5bb9\u624d\u4f1a\u88ab\u663e\u793a
\u5185\u5bb9\u662f\u4e00\u5806\u56fe\u7247, \u901a\u8fc7js\u63a7\u5236\u4f4d\u7f6e, \u6bd4\u5982\u7528relative\u5b9a\u4f4d, \u901a\u8fc7css\u63a7\u5236left, \u5c31\u662f\u79fb\u52a8\u6548\u679c
\u5982\u679c\u8981\u8f6e\u64ad, \u6ce8\u610f\u63a7\u5236\u8fb9\u754c\u56fe\u7247\u6b21\u5e8f
我实现的是，有5张图，每次只显示一张图片，点按钮切换。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{ margin:0;font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}
ul{margin:0; padding:0; list-style:none;}
#imgList{ width:100px; height:100px; /* 定义显示窗口的大小 */
border:1px solid #000; overflow:hidden}
#imgList ul{ width:500px;} /* 定义全部图片的宽度和,这里有5张，每张宽100px,总宽度就是500px */
#imgList li{ width:100px; height:100px; float:left;} /* 单张图片的所在位置的大小，宽度就是图片宽度加左右边距 */
#imgList img{ width:90px; height:90px; margin:5px;} /* 单张图片的尺寸，及外边距 */
</style>
<script>
function move(to){
var imgList = document.getElementById("imgList");
if(to == "left") imgList.scrollLeft += 100; //li的宽度
else imgList.scrollLeft -= 100; //li的宽度
}
</script>
</head>
<body>
<!-- 请使用以下html结构 -->
<div id="imgList">
<ul>
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
</ul>
</div>
<!-- 这个可以自己定义，把事件copy过去就行了 -->
<input type="button" value="left" onClick="move('left')">
<input type="button" value="right" onClick="move('right')">
</body>
</html>
我的做法是：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="demo" style="width:200px; height:50px; overflow:hidden; white-space:nowrap;">
<div id="demo1" style="display:inline;">
<img src="newsimg.jpg" width="50" height="50" alt="1">
<img src="newsimg.jpg" width="50" height="50" alt="2">
<img src="newsimg.jpg" width="50" height="50" alt="3">
<img src="newsimg.jpg" width="50" height="50" alt="4">
<img src="newsimg.jpg" width="50" height="50" alt="5">
<img src="newsimg.jpg" width="50" height="50" alt="6">
<img src="newsimg.jpg" width="50" height="50" alt="7">
<img src="newsimg.jpg" width="50" height="50" alt="8">
<img src="newsimg.jpg" width="50" height="50" alt="9">
<img src="newsimg.jpg" width="50" height="50" alt="10">
</div>
<div id="demo2" style="display:inline;"></div>
</div>
<script>
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
var dis = 0;
function changeImg()
{
if(tab.scrollLeft >= tab2.offsetWidth)//当滚动至demo1与demo2交界时
{
tab.scrollLeft-=tab1.offsetWidth; //demo跳到最顶端
}
else
{
tab.scrollLeft+=60;
if(tab.scrollLeft >= tab2.offsetWidth)//当滚动至demo1与demo2交界时
{
tab.scrollLeft-=tab1.offsetWidth; //demo跳到最顶端
}
}
}
</script>
<input type="button" value="改变" onClick="changeImg()">
</body>
</html>
希望等你有效，再见！
我在免费模板网上看到一个，网址是http://www.mianfeimoban.com/tuxingtuxiang_tx/3578.html
通过js修改img 的src 就可以了
绛旓細 鏈鍩烘湰鐨勫榻愭柟寮忥細img{ width:100px;height:100px;}
绛旓細鍦ㄤ竴涓猟iv閲岄潰璁剧疆涓ゅ紶鑳屾櫙鍥剧墖鐢css3鐨勫鑳屾櫙鍙互鍋氬埌锛屽啓娉曚篃寰堝鏄擄紝绫讳技涓嬮潰杩欐牱灏辫浜:background:url(top.jpg) center top no-repeat,url(bottom.jpg) center bottom no-repeat;涓嶈繃鍥犱负涓嶅悓娴忚鍣ㄥ浜CSS3鐨鏀寔搴︽湁闄愶紝杩欑鍐欐硶鍦ㄥぇ澶氭暟娴忚鍣ㄩ噷闈紝鐗瑰埆鏄疘E閲岄潰鏄棤鏁堢殑銆傛墍浠ラ氬父鐨勪綔娉曡繕鏄...
绛旓細浣犲ソ锛屽湪style閲岃缃甦iv鐨刴argin灞炴э紝margin:0px;鍗冲彲
绛旓細鍙互鐢↗S瀹炵幇 [瀵硅薄].style.backgroundimage = "url(鍥剧墖璺緞)";
绛旓細3. 鍦–SS涓紝璁剧疆鍥剧墖鐨勫搴︺侀珮搴︺佷綅缃瓑灞炴с傚悓鏃讹紝璁剧疆瀹瑰櫒鍜屽浘鐗囩殑杩囨浮鏁堟灉锛屼娇鍏跺湪鍒囨崲鏃惰兘澶熸湁鍔ㄧ敾鏁堟灉銆4. 鍦↗avaScript涓紝浣跨敤setInterval()鍑芥暟鍜孌OM鎿嶄綔锛屽疄鐜板浘鐗鐨勮嚜鍔ㄥ垏鎹互鍙婇紶鏍囩Щ鍏ユ椂鐨勬殏鍋滃拰绉诲嚭鏃剁殑缁х画鍒囨崲銆傚師鍥狅細閫氳繃HTML鍜孋SS缁撳悎JavaScript鐨勬柟寮瀹炵幇澶氬紶鍥剧墖鍦ㄧ洅瀛愰噷鐨勫垏鎹紝鍙互...
绛旓細灏嗗叾浣滀负鑳屾櫙鍥,鐒跺悗鐢css鎺у埗鑳屾櫙鍥剧殑浣嶇疆姣斿:#btn{ width:152px; height:25px; background-image:url(); background-repeat:no-repeat; background-position:0px -48px;/** 鏍煎紡 x y鍧愭爣,璋冩暣鍙互瀹氫綅涓嶅悓鐨勪綅缃,鏄剧ず鑳屾櫙鍥剧殑涓嶅悓閮ㄥ垎 **/ border:1px solid blue;} ...
绛旓細CSS鑳芥洿鎹鐨勫浘鐗囷紝鍙兘瀛樺湪浜庢牱寮忎腑銆傛墍浠ワ紝杩欎釜鍥剧墖涔熷彧鑳芥槸鑳屾櫙鍥剧墖銆備竴鑸槸缁撳悎锛歨over鏉瀹炵幇鐨銆備緥濡傦細.mydiv{ background:鍥剧墖1 no-repeat;height:100px;widht:100px;} .mydiv:hover{ background:鍥剧墖2 no-repeat;} 杩欐牱灏卞疄鐜颁簡鍥剧墖1鍜屽浘鐗2鐨勯紶鏍囩Щ涓婂幓鐨勫垏鎹侰SS灞傚彔鏍峰紡琛(鑻辨枃鍏ㄧО锛...
绛旓細鏈瘒鏂囩珷缁欏ぇ瀹跺甫鏉ュ唴瀹规槸閫氳繃浠ｇ爜绀轰緥浠嬬粛浣跨敤css+js瀹炵幇鍥剧墖鐨鏃嬭浆灞曠ず锛屽埗浣滀竴涓墜鍔ㄦ搷浣滅殑鈥滄棤闄愨鐓х墖杞挱鍥俱傛湁涓瀹氱殑鍙傝冧环鍊硷紝鏈夐渶瑕佺殑鏈嬪弸鍙互鍙傝冧竴涓嬶紝甯屾湜瀵逛綘浠湁鎵甯姪銆備笅闈㈡垜浠氨寮濮嬩粙缁嶅浣曞疄鐜版晥鏋溿1銆佹瀯寤哄浘鍍忚疆鎾鏋堕鍏堟槸HTML銆傚畠鏈夌偣闅句互闃呰锛屽洜涓烘垜浠垹闄や簡鍏冪礌涔嬮棿鐨勪换浣曠┖鏍兼垨...
绛旓細姹備唬鐮侊紝涓嶈兘甯姪浣犱粈涔 缁欎綘鎬濊矾 鐐瑰嚮鏃剁粰鍥剧墖娣诲姞涓涓猚lass锛屼緥濡俛ctive锛屾瘡娆＄偣鍑诲垽鏂槸鍚﹁dom鍚湁active锛宑lass锛屽鏋滄湁灏辩Щ闄lass锛屽鏋滄病鏈夋坊鍔犺繖涓猚lass锛岃屼綘鐨刢ss锛鐢ㄨ繖涓猚lass娓叉煋鍥剧墖鏀惧ぇ骞跺眳涓瓑绛変綘鎯宠鐨勬晥鏋滐紝鍙互鍔犱笂transition璧峰埌骞虫粦鍔ㄧ敾鐨勬晥鏋 ...
绛旓細杩欐牱锛岀湅涓婂幓灏辨槸涓涓浘鐗囦粠鍙冲埌宸︽笎娓愬彉寰楅忔槑鐨勬晥鏋溿傝繖鏄垜姣旇緝绮楁毚鐨勬柟娉曪紝鍚庢潵鍦ㄧ綉涓婄湅鍒颁竴绉嶆洿鍔犱紭闆呯殑鏂瑰紡锛氬ぇ浣撲笂宸笉澶氾紝閲嶇偣鏄 CSS 鐨 background-image 灞炴у彲浠ヨ缃澶氬紶鍥剧墖锛鐢ㄩ楀彿闅斿紑 銆傚洜涓烘垜涓嶇煡閬撹繖涓睘鎬ф湁杩欎釜鑳藉姏鎵嶄細棰濆鍔犱簡涓笎鍙橀忔槑鍥惧眰鏉瀹炵幇鏁堟灉銆
