高自由度样式JQ图片滚动特效源码
<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>高自由度样式JQ图片滚动特效源码</title>
</head>
<script src="jquery-1.8.0.min.js"></script>
<script src="scorll.js"></script>
<link href="index.css" rel="stylesheet" />
<body>

<div class="scorll">
<div class="pre"></div>
<div class="next"></div>
<div class="innerbox">
<ul>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$1</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$2</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$3</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$4</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$5</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$6</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$1</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$2</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$3</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$4</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$5</font></p></li>
	<li><img src="test.jpg" alt=""><p>有机生菜</p><p>特价<font>$6</font></p></li>
</ul>
</div>
</div>

</body>
</html>


index.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,input,p,blockquote,th,td,hr{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,a{font-size:14px;font-family:'Microsoft YaHei',Tahoma,Verdana,'Simsun';}
ol,ul,li{list-style:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{
	border:0;
}
.scorll{width: 1000px;height: 160px;position: relative;background: blue;}
.scorll .pre,.scorll .next{position: absolute;width: 20px;height: 20px;background: red;top: 50%;cursor: pointer;}
.scorll .pre{left: 0;}
.scorll .next{right: 0;}
.scorll .innerbox{width:960px;height: inherit;display: block;margin: 0 auto;overflow: hidden;background: yellow;}
.scorll .innerbox ul li{float: left;text-align: center;background: green;}
.scorll .innerbox ul{display: block;height: inherit;}

scorll.js

$(document).ready(function(){

var show_num=6;
var step_time=500;//动作完成时长
var clock_time=step_time*2+1500;//执行时差+等待秒速

var sub_num=$(".scorll ul li").length;
var max_box=$(".scorll")
var inner_box=$(".scorll .innerbox")
var pre=$(".scorll .pre")
var next=$(".scorll .next")

var sub_size=inner_box.width()/show_num

$(".scorll ul li").css("width",sub_size)
$(".scorll ul").css("width",sub_size*sub_num)

var start=scorll(sub_num,"right",sub_size,step_time)//启动

var start=setInterval(function(){
	scorll(sub_num,"right",sub_size,step_time)
	},clock_time)

max_box.hover(function(){
	clearInterval(start)
	},function(){
		start=setInterval(function(){
		scorll(sub_num,"right",sub_size,step_time)
		},clock_time)
	})

pre.click(function(){
	clearInterval(start)
	scorll(sub_num,"left",sub_size,step_time)
})

next.click(function(){
	clearInterval(start)
	scorll(sub_num,"right",sub_size,step_time)
})

function scorll(sub_num,direction,step_long,time){
	
	//step_long="-"+step_long+"px"
	
	if(direction=="left"){
		
		$(".scorll ul").animate({marginLeft:"-"+step_long+"px"},time,function(){	
		$(".scorll ul").append($(".scorll ul li").eq(0).clone())
		$(".scorll ul li").eq(0).remove()
		$(this).css("margin-left","0px")
		})
			
	}
	if(direction=="right"){
		
		$(".scorll ul").animate({marginLeft:"0px"},time,function(){	
		$(".scorll ul").prepend($(".scorll ul li").eq(sub_num-1).clone())
		$(".scorll ul li").eq(sub_num).remove()
		$(this).css("margin-left","-"+step_long+"px")
		})
	}


}

})

预览效果:


说明:

需要提前引入jquery库,可左右滚动

红色为左右按钮区域

没有做样式美化,为样式提供最大的可配置空间。



访客评论

暂无评论
发表评论
当前字数:0
评论内容限制在250字以内,提交后经管理员审核后发布。
提交评论