jquery点击左右图片切换源码

最新推荐文章于 2022-11-10 08:56:30 发布

web行路人

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量804

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qishuixian/article/details/52447599

版权

前端专栏收录该内容

53 篇文章 0 订阅

订阅专栏

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

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>

web行路人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery点击左右图片切换源码

点击左右箭头进行左右图片切换。如下图：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:rela
复制链接

扫一扫