轮播切换效果+点击放大图

来源：互联网发布：新手淘宝工作计划编辑：程序博客网时间：2024/04/27 15:54

效果如下：

css如下：

/*============新品============*/
img{border:0 none}
.more_pro .moreandmore{text-align:left;width:404px;}
.more_pro .moreandmore .more_bt{margin:0 auto 0 30px;width:111px;height:40px;overflow:hidden;clear:both;}
.more_pro .moreandmore .more_bt a{background:url(../images/new_more.gif) no-repeat;display:inline-block;width:111px;height:40px;}
.more_pro .xinpin{overflow:hidden;clear:both;margin-bottom:10px;}
.more_pro .xinpin li{float:left;margin-right:10px;}
.more_pro .xinpin li a{border:1px solid #dedede;display:inline-block;}
.more_pro .xinpin li a:hover{border:1px solid #54cae0}
.big_ad{height:auto;overflow:hidden;}
.more_pro{background:#fff;position: absolute;top:10px;float:left;width:434px;overflow:hidden}

.xinpin,.xinpin .jcarousel-container,.xinpin .jcarousel-skin-tango{float:left;width:434px;overflow:hidden}
.xinpin .jcarousel-clip{width:434px;z-index:2;overflow:hidden;position:relative;height:151px;margin:0;}
.xinpin .jcarousel-clip{width:371px;margin:0 30px;z-index:2;overflow:hidden;position:relative;height:151px;}
.xinpin .jcarousel-skin-tango .jcarousel-container-horizontal{width:404px;}
.xinpin .jcarousel-skin-tango .jcarousel-container-horizontal,.jcarousel-clip{width:434px;padding:0;height:151px;overflow:hidden;z-index:1}
.xinpin .jcarousel-skin-tango li{padding:0;float:left;width:117px;height:151px;overflow:hidden}
/** * Horizontal Buttons */
.xinpin .jcarousel-skin-tango .jcarousel-next-horizontal{position:absolute;z-index:900;margin:0;top:52px;right:0;width:21px;height:48px;cursor:pointer;background:transparent url(../images/xp_next_btn.gif) no-repeat 0 0;}
.xinpin .jcarousel-skin-tango .jcarousel-prev-horizontal{position:absolute;z-index:900;margin:0;top:52px;left:0;width:21px;height:48px;cursor:pointer;background:transparent url(../images/xp_prev_btn.gif) no-repeat 0 0;}
.xinpin .jcarousel-skin-tango .jcarousel-next-disabled-horizontal{position:absolute;z-index:900;margin:0;top:52px;right:0;width:21px;height:48px;cursor:pointer;background:transparent url(../images/xp_no_next_btn.gif) no-repeat 0 0;}
.xinpin .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal{position:absolute;z-index:900;margin:0;top:52px;left:0;width:21px;height:48px;cursor:pointer;background:transparent url(../images/xp_no_prev_btn.gif) no-repeat 0 0;}

demo如下:

<!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>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/style.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(".xinpin li").click(function(){
    jQuery(".big_ad img").attr("src",jQuery(this).find("a").attr('class'));
    })
})
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel_xinpin').jcarousel({
    scroll:1
});
})
</script>
<div class="new_pro">
<div class="big_ad"><img src="images/myslfe01.jpg" alt="" /></div>
<div class="more_pro">
    <div class="xinpin">
      <div class="jcarousel-container">
        <div class="jcarousel-clip">
          <ul id="mycarousel_xinpin" class="jcarousel-skin-tango">
          <li><a class="images/myslfe01.jpg" href="#"><img src="images/new_dd01.gif" alt="" /></a></li>
          <li><a class="images/myslfe02.jpg" href="#"><img src="images/new_dd02.gif" alt="" /></a></li>
          <li><a class="images/myslfe01.jpg" href="#"><img src="images/new_dd03.gif" alt="" /></a></li>
          <li><a class="images/myslfe02.jpg" href="#"><img src="images/new_dd01.gif" alt="" /></a></li>
          <li><a class="images/myslfe01.jpg" href="#"><img src="images/new_dd02.gif" alt="" /></a></li>
          </ul>
        </div>
      </div>
    </div>
<div class="moreandmore">
<div class="more_bt"><a href="/xinpin.html"></a></div>
</div>
</div>
</div>

</body>