<!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 type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".left_btn").click(function(){
var value = 185;
var div_w= $(".con_ul").width();
var w = $(".ul_list > li").width();
var mar_lef =parseInt( $(".ul_list > li").css("margin-left"))
var mar_rig =parseInt( $(".ul_list > li").css("margin-right"))
var size = $(".ul_list > li").size();
var con = (w+mar_lef+mar_rig)*size - mar_rig- div_w;
var con01 = (w+mar_lef+mar_rig)*size - mar_rig
var left = parseInt($(".ul_list").css("left"));
var now_left = left/value;
if(left==0){
$(".ul_list").animate({"left":-con});
}else{
if(now_left == 1){
value = value*2;
}else{
value = value*(now_left+1)
}
$(".ul_list").animate({"left":value});
}
});
$(".right_btn").click(function(){
var value = 185;
var div_w= $(".con_ul").width();
var w = $(".ul_list > li").width();
var mar_lef =parseInt( $(".ul_list > li").css("margin-left"))
var mar_rig =parseInt( $(".ul_list > li").css("margin-right"))
var size = $(".ul_list > li").size();
var con = (w+mar_lef+mar_rig)*size - mar_rig- div_w;
var con01 = ((w+mar_lef+mar_rig)*size - mar_rig)-con
var left = parseInt($(".ul_list").css("left"));
var now_left = left/value;
if(left==-con){
$(".ul_list").animate({"left":0});
}else{
if(now_left == 1){
value = value*2;
}else{
value = value*(now_left-1)
}
$(".ul_list").animate({"left":value});
}
});
})
</script>
<style>
*{ font-size:12px;}
ul,li{ list-style:none;}
img{ border:0px;}
ul,li,div,a{ margin:0; padding:0;}
.clear{ margin:0; padding:0; height:0; width:0; line-height:0; clear:both;}
.change{ width:800px; margin:0 auto; height:130px;}
.left_btn{ width:33px; height:130px; background:url(images/left_btn.gif) no-repeat; float:left; display:inline;}
.right_btn{ width:33px; height:130px; background:url(images/right_btn.jpg) no-repeat; float:left; display:inline; margin-left:5px;}
.con_ul{ width:550px; float:left; display:inline; height:130px; overflow:hidden; margin-left:5px; position:relative;}
.ul_list{ width:2000px; height:130px; position:absolute; left:0; top:0;}
.ul_list li{ width:180px; height:130px; float:left; display:inline; margin-right:5px;}
.ul_list li img{ width:180px; height:130px;}
</style>
</head>
<body>
<div class="change">
<div class="left_btn"></div>
<div class="con_ul">
<ul class="ul_list">
<li><a href="#" title="1"><img src="images/pic_01.gif" alt="1" /></a></li>
<li><a href="#" title="2"><img src="images/pic_01.gif" alt="2" /></a></li>
<li><a href="#" title="3"><img src="images/pic_01.gif" alt="3" /></a></li>
<li><a href="#" title="4"><img src="images/pic_01.gif" alt="4" /></a></li>
<li><a href="#" title="5"><img src="images/pic_01.gif" alt="5" /></a></li>
<li><a href="#" title="6"><img src="images/pic_01.gif" alt="4" /></a></li>
<li><a href="#" title="7"><img src="images/pic_01.gif" alt="5" /></a></li>
</ul>
</div>
<div class="right_btn"></div>
</div>
</body>
</html>
带左右按钮的jquery图片切换效果
4星 · 超过85%的资源 需积分: 34 65 浏览量
2013-03-06
17:37:34
上传
评论
收藏 59KB RAR 举报 
upload.rar （5个子文件） 
手写左右图片滚动 
左右切换.html 3KB images 
left_btn.gif 5KB pic_01.gif 21KB
right_btn.jpg 2KB js 
jquery-1.7.1.min.js 92KB资源评论
YAODASI2013-04-14不是我想要的~~~~- Jusbie2013-10-08好像我运行到最后一个的时候又bug 画面乱了
- 禽兽放开那个大叔2013-05-29很好很强大通过jquery animate实现的就是不是循环的效果
- princeluo2013-09-09很好很实用
binghe580002019-04-28很好很强大通过jquery animate实现的就是不是循环的效果
