您的位置：首页 > 其它

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

2012-08-27 11:55 288 查看

[b]效果如下：[/b]

[b]

[/b]

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航