利用jQuery实现的简单轮播效果
利用jQuery实现的简单轮播效果,代码简单容易理解。
效果截图:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>利用jQuery实现的简单轮播效果</title>
<style type="text/css">
* {margin:0;padding:0;}
ul,li {list-style:none;}
.slide {margin:20px auto;width:800px;height:300px;position:relative;overflow:hidden;}
.slide ul {width:2400px;}
.slide ul li {width:800px;height:300px;float:left;}
.slide .btn {margin-top:-50px;width:50px;height:100px;line-height:100px;background:#000;position:absolute;top:50%;opacity:0.6;cursor:pointer;color:#FFF;text-align:center;}
.slide .prev {left:0;}
.slide .next {right:0;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$(".next").click(function(){
$('.slide ul').animate({'marginLeft':-800},600,function(){
$('.slide ul li:first').insertAfter('.slide ul li:last');
$('.slide ul').css('marginLeft',0);
});
});
$(".prev").click(function(){
$('.slide ul').css('marginLeft',-800).find('li:last').insertBefore('.slide ul li:first');
$('.slide ul').animate({'marginLeft':0},600);
});
var timer = setInterval(function(){
$('.next').trigger('click');
},3000);
$('.slide').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
$('.next').trigger('click');
},3000);
});
});
</script>
</head>
<body>
<div class="slide">
<ul>
<li style="background:red;"></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
</ul>
<div class="prev btn">prev</div>
<div class="next btn">next</div>
</div>
</body>
</html>
相关文章
- jQuery日期选择器插件jquery.date_input.js
官网: http://jonathanleighton.com/projects/date-input/ 下载: http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
- jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1
好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略
- jquery.md5.js下载
jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery
- jQuery火箭上升回到顶部效果
jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:
- jQuery实现的返回顶部功能
jQuery实现的返回顶部功能
随机推荐
- jQuery日期选择器插件jquery.date_input.js
官网: http://jonathanleighton.com/projects/date-input/ 下载: http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
- jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1
好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略
- jquery.md5.js下载
jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery
- jQuery火箭上升回到顶部效果
jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:
- jQuery实现的返回顶部功能
jQuery实现的返回顶部功能