css_jquery_学习

Franciswmf

浏览: 797208 次
性别:
来自: 上海

最近访客更多访客>>

gglzf4

fengqingyebai

kouok

xubbsun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html-JavaScript-前端-调用接口

<body>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";background:#eee;}

/* sliderbox */
.sliderbox{background:url(images/index-bottom.jpg) no-repeat 0 -1px;width:988px;height:200px;overflow:hidden;padding:50px 0 0 0;margin:20px auto;}
.arrow-btn{margin:35px 0 0 0;display:inline;background:url(images/arrow-btn.png) no-repeat;width:26px;height:124px;overflow:hidden;cursor:pointer;}
#btn-left{float:left;margin-left:12px;background-position:0 0;}
#btn-left.dasabled{background-position:0 -124px;}
#btn-right{float:right;margin-right:6px;cursor:pointer;background-position:-26px 0;}
#btn-right.dasabled{background-position:-26px -124px;}
.slider{width:900px;overflow:hidden;position:relative;height:166px;float:left;}
.slider ul{position:absolute;left:0px;top:32px;width:1800px;height:140px;list-style:none;}
.slider li{float:left;width:150px;height:140px;}
.slider a{display:block;text-decoration:none;color:#073a5e;font-size:12px;font-weight:bold;text-align:center;margin-top:24px;}
.slider img{width:90px;display:inline-block!important;}
</style>

<div class="sliderbox">
<!--left btn-->
	<div id="btn-left" class="arrow-btn dasabled"></div>
	
	<!--slider start-->
	<div class="slider">
		<ul>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/go-sms.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/imgwww20120104173328332830083.png"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/imgwww20120222114514451461239.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/ggbook.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/imgwww20120621153035303523388.png"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/lianxiren.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/go-touch.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/3g-android-market.jpg"/></a></li>
			<li><a href="http://www.17sucai.com/" target="_blank"><img src="images/3ggoucai.jpg"/></a></li>
		</ul>
	</div>
	<!--slider end-->
	
	<!--right btn-->
	<div id="btn-right" class="arrow-btn"></div>
</div>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

var $slider = $('.slider ul');
var $slider_child_l = $('.slider ul li').length;
var $slider_width = $('.slider ul li').width();
$slider.width($slider_child_l * $slider_width);

var slider_count = 0;

if ($slider_child_l < 6) {
	$('#btn-right').css({cursor: 'auto'});
	$('#btn-right').removeClass("dasabled");
}

$('#btn-right').click(function() {
	if ($slider_child_l < 6 || slider_count >= $slider_child_l - 6) {
		return false;
	}
	
	slider_count++;
	$slider.animate({left: '-=' + $slider_width + 'px'}, 'slow');
	slider_pic();
});

$('#btn-left').click(function() {
	if (slider_count <= 0) {
		return false;
	}
	
	slider_count--;
	$slider.animate({left: '+=' + $slider_width + 'px'}, 'slow');
	slider_pic();
});

function slider_pic() {
	if (slider_count >= $slider_child_l - 6) {
		$('#btn-right').css({cursor: 'auto'});
		$('#btn-right').addClass("dasabled");
	}
	else if (slider_count > 0 && slider_count <= $slider_child_l - 6) {
		$('#btn-left').css({cursor: 'pointer'});
		$('#btn-left').removeClass("dasabled");
		$('#btn-right').css({cursor: 'pointer'});
		$('#btn-right').removeClass("dasabled");
	}
	else if (slider_count <= 0) {
		$('#btn-left').css({cursor: 'auto'});
		$('#btn-left').addClass("dasabled");
	}
}

$('.slider a').hover(function() {
	if ($(this).find('img:animated').length) return;
	$(this).animate({marginTop: '0px'}, 300);
	$(this).find('img').animate({width: '150px'}, 300);
}, function() {
	
	$(this).animate({marginTop: '24px'}, 200);
	$(this).find('img').animate({width: '90px'}, 200);
});

</script>
</body>

分享到：

html和css 总结 | 主题类别列表导航显示备份

2013-08-14 10:43
浏览 948
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css_jquery_学习

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css_jquery_学习

评论

发表评论

相关推荐

URLEncoder 和 URLDecoder

app接口响应定向跳转页面

接口返回的主动html

html中的meta

form表单数据与json数据的转换

html和css 总结

css border：solid实线，dashed虚线；dotted点状,,double双线

让网站便于搜索

td长度固定，内容过长，超过部分用省略号代替

超链接<a></a>下划线、链接、活动的、悬停的

关于Marguee

最近访客更多访客>>