用css+jquery 兑现 图片滑动效果
日期：2014-05-17 浏览次数：20624 次
用css+jquery 实现 图片滑动效果
用css+jquery 实现 图片滑动效果，哪位大侠有代码。
就是那种1234点击每个都会有不同图片显示在同一个地方的。
网上有，结果发现出不来。。。
------解决方案--------------------
用css+jquery 实现 图片滑动效果，哪位大侠有代码。
就是那种1234点击每个都会有不同图片显示在同一个地方的。
网上有，结果发现出不来。。。
------解决方案--------------------
<!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>无标题文档</title>
<script src="http://dealer.xxauto.com/JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tip span").bind("click",function(){
change($(this).html());
});
change(1);
});
var change = function(id){
if (typeof(isround)!='undefined') clearTimeout(isround);
var bigimg =$("#pic img");
var smallimg = $("#tip span");
var text = $("#text p");
smallimg.each(function(i){
bigimg.eq(i).attr("class","undis");
smallimg.eq(i).attr("class","");
text.eq(i).attr("class","undis");
});
bigimg.eq(id-1).attr("class","dis");
smallimg.eq(id-1).attr("class","current");
text.eq(id-1).attr("class","dis");
var next = id >= smallimg.size()?1:parseInt(id)+1;
isround=setTimeout('change('+next+')', 4000);
}
</script>
<style>
body, p, ul, li, dd, dt, dl, ol, form, h1, h2, h3, h4, h5 { margin:0; padding:0; }
body { font-size:12px; color:#000; text-align:left }
i, em { font-style:normal; }
img { border:none; vertical-align:middle; }
ul, li { list-style:none; min-height:12px; }
a { color:#555; text-decoration:none; }
a:hover { color:#cc0000; text-decoration:underline; }
.undis{display:none;}
.dis{display:block!important;}
#pic{position:absolute;top:0;left:0;z-index:9;width:308px;height:258px;}
#pic img{width:308px;height:258px;float:left;}
#textbg{position:absolute;left:0;bottom:0;z-index:99;width:308px;height:27px;background:url
(http://mat1.gtimg.com/sports/nba2011/images/flash_bg.png);_background:none;filter:progid:DX
ImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="http://mat1.gtimg.com/sp
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
