jQuery图片左右滚动特效



90 356 119



特效描述:jQuery 图片左右滚动,jQuery图片左右滚动特效

代码结构

1. 引入CSS

<link href="css/zzsc.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

3. HTML代码

<div class="device">
<h2><a href="javascript:;" class="pre">上一组</a><a href="javascript:;" class="next">下一组</a></h2>
<div class="scroll">
<ul>
<li><a href="http://www.51qianduan.com/"><img src="images/1.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/2.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/3.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/4.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/5.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/1.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/2.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/3.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/4.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/5.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/1.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/2.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/3.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/4.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/5.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/1.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/2.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/3.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/4.jpg" /></a><a href="#" class="link">51前端</a></li>
<li><a href="http://www.51qianduan.com/"><img src="images/5.jpg" /></a><a href="#" class="link">51前端</a></li>
</ul>
</div>
</div>
<script>
$(function(){
	var $number = Math.ceil($('.scroll ul li').length/4); //获取滚动几屏个数
	var margin = 10; //设置图片间距
	var $w = $('.scroll li').width() + margin; // 一屏图片的宽度
	var $width = $w*$number*2; //设置ul宽度
	var pre = $('.device .pre');
	var next = $('.device .next');
	if($number ==1){pre.hide();next.hide();}
	$('.scroll ul').width($width);
	var num = 0;
	function autoscroll(){
		num++;
		if($number ==1){return false}
		if(num ==$number){
			num = 0;	
		}
		var distance = -2*$w * num;
		$('.scroll ul').stop().animate({left:distance});
	}
	var scrollChange = setInterval(autoscroll,8000);
	//鼠标悬停,暂停滚动
	$(".scroll ul,.pre,.next").mouseover(function(){ 
		$('.scroll ul').stop()
		clearInterval(scrollChange);
	});
	// 鼠标移走,滚动继续
	$('.scroll ul,.pre,.next').mouseout(function(){ 
		scrollChange = setInterval(autoscroll,8000);
	});
	//下一组
	next.click(function(){
		num++;
		if(num >= $number){num = 0}
		var leftdis = -2*$w * num;
		$('.scroll ul').stop().animate({left:leftdis});
	});
	//上一组
	pre.click(function(){
		num--;
		if(num < 0){num = $number-1}
		var rightdis = -2*$w * num;
		$('.scroll ul').stop().animate({left:rightdis});
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到