您的位置：首页 > Web前端 > JQuery

jquery点击左右图片切换源码

2016-09-06 10:25 337 查看

点击左右箭头进行左右图片切换。如下图：

css代码：

<style type="text/css">
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
img{ border:none;}
a{ color:#6cf;}
a:hover{ color:#84B263;}
.box{ width:980px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
.picbox{ width:980px; height:115px; overflow:hidden; position:relative;}
.piclist{ height:115px;position:absolute; left:0px; top:0px}
.piclist li{ background:#eee; margin-right:20px; padding:5px; float:left;}
.copylist{ position:absolute;top:0px}
.tag-right,.tag-left{ width:30px; height:50px; background:url(images/icon.png) no-repeat; background:url(images/icon_ie6.png) no-repeat\9; position:absolute; top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.tag-right{ background-position:0 -60px; left:4px;}
.tag-left{ background-position:0 0; right:4px;}

</style>

jquery代码

<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(e) {
var linum = $('.mainlist li').length;//图片数量
var w = linum * 250;//ul宽度
var num = 0;//图片切换的数量
$('.piclist').css('width', w + 'px');//ul宽度
$('.copylist').html($('.mainlist').html());//复制内容
$('.copylist').css("left",-w);
$('.tag-right').click(function(){
if(num<linum){
num++;
$('.copylist,.mainlist').stop();
$('.copylist').animate({left: -w+num*250+ 'px'},'slow');
$('.mainlist').animate({left: num*250+ 'px'},'slow');
}
})
$('.tag-left').click(function(){
if(num !=0){
num--;
$('.copylist,.mainlist').stop();
$('.copylist').animate({left: -w+num*250+ 'px'},'slow');
$('.mainlist').animate({left: num*250+ 'px'},'slow');
}
})
});

</script>

html代码：

<head>
<meta charset="UTF-8" />
<title>jquery点击左右图片切换源码</title>
</head>
<body>
<!-- 代码开始 -->
<div class="box">
<div class="picbox">
<ul class="piclist mainlist">
<li><a href="javascript:;" target="_blank"><img src="images/1.jpg" width="220" height="105" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/4.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/1.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/4.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/1.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/4.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/2.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/4.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/3.jpg" /></a></li>
<li><a href="javascript:;" target="_blank"><img src="images/4.jpg" /></a></li>
</ul>
<ul class="piclist copylist"></ul>
</div>
<div class="tag-right"></div>
<div class="tag-left"></div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航