jQuery自定义图片切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自定义图片切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery自定义图片切换特效代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/L_slide.js"></script>

<style>
* {margin:0;padding:0;}
ul {list-style:none;}

.wrap {width:670px;height:240px;position:relative;overflow:hidden;float:left;margin:20px;}
.slidebox {width:670px;position:absolute;top:0;left:0;height:240px;}
.slidebox li {float:left;width:670px;height:240px;left:0;top:0;}
.slidebox li img {display:block;width:670px;height:240px;}
.dot {position:absolute;width:100%;height:30px;background:rgba(0,0,0,0.3);text-align:right;bottom:0;left:0;}
.dot p {margin-right:10px;}
.dot b {width:17px;height:17px;border-radius:20px;color:#333;display:inline-block;border:1px solid #fff;background:#fff;text-align:center;line-height:17px;margin:0 3px;margin-top:6px;cursor:pointer;font-weight:normal;}
.dot .cur {background:#F63;color:#fff;border:1px solid #f63;}
</style>

<script type="text/javascript">
$(function(){

	//affect:1
	$(".af1").slide({
		affect:1,
		time:3000,
		speed:400,
		dot_text:false,
	});
	
	//affect:2
	$(".af2").slide({
		affect:2,
		time:3000,
		speed:400,
	});
	
	//affect:3
	$(".af3").slide({
		affect:3,
		time:3000,
		speed:400,
	});
	
	//affect:4
	$(".af4").slide({
		affect:4,
		time:3000,
		speed:400,
	});
})
</script>
</head>

<body>

<div class="wrap af1">
	<ul class="slidebox">
		<li><a href="#"><img src="images/p1.jpg" /></a></li>
		<li><a href="#"><img src="images/p2.jpg" /></a></li>
		<li><a href="#"><img src="images/p3.jpg" /></a></li>
		<li><a href="#"><img src="images/p4.jpg" /></a></li>
	</ul>
</div>

<div class="wrap af2">
	<ul class="slidebox">
		<li><a href="#"><img src="images/p1.jpg" /></a></li>
		<li><a href="#"><img src="images/p2.jpg" /></a></li>
		<li><a href="#"><img src="images/p3.jpg" /></a></li>
		<li><a href="#"><img src="images/p4.jpg" /></a></li>
	</ul>
</div>

<div class="wrap af3">
	<ul class="slidebox">
		<li><a href="#"><img src="images/p1.jpg" /></a></li>
		<li><a href="#"><img src="images/p2.jpg" /></a></li>
		<li><a href="#"><img src="images/p3.jpg" /></a></li>
		<li><a href="#"><img src="images/p4.jpg" /></a></li>
	</ul>
</div>

<div class="wrap af4">
	<ul class="slidebox">
		<li><a href="#"><img src="images/p1.jpg" /></a></li>
		<li><a href="#"><img src="images/p2.jpg" /></a></li>
		<li><a href="#"><img src="images/p3.jpg" /></a></li>
		<li><a href="#"><img src="images/p4.jpg" /></a></li>
	</ul>
</div>
</body>
</html>

JS代码(L_slide.js):

/** * @L_slide picutre scroll * @version 1.0 * @author DQ Lee **/
(function($){
	$.fn.slide=function(options){
	var defaults={
	affect:1,//1：上下滚动;
	2:幕布式;
	3:左右滚动；4：淡入淡出 time:4000,//间隔时间 speed:500,//动画快慢 dot_text:true,//按钮上有无序列号}
;
	var opts=$.extend(defaults,options);
	var $this=$(this);
	var ool=$("<div class='dot'><p></p></div>");
	var $box=$this.find("ul");
	var $li=$box.find("li");
	var timer=null;
	var num=0;
	$this.append(ool);
	$box.find("li").each(function(i){
	ool.find("p").append($("<b></b>"));
	if(opts.dot_text){
	ool.find("b").eq(i).html(i+1)}
}
) ool.find("b").eq(0).addClass("cur");
	switch(opts.affect){
	case 1:break;
	case 2:$box.find("li").css("display","none");
	break;
	case 3:$box.css({
	"width":$li.eq(0).width()*$li.length}
);
	$li.css("float","left");
	break;
	case 4:$box.find("li").css("display","none");
	break;
}
$box.find("li").eq(0).show(0);
	ool.find("b").mouseover(function(){
	num=$(this).index();
	run ();
}
)timer=setInterval(auto,opts.time);
	function auto(){
	num<$box.find("li").length-1?num++:num=0;
	run();
}
function run(){
	ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
	switch(opts.affect){
	case 1:$box.stop(true,false).animate({
	"top":-240*num}
,opts.speed);
	break;
	case 2:$box.find("li").css({
	"position":"absolute"}
);
	$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
	break;
	case 3:$box.stop(true,false).animate({
	"left":-670*num}
,opts.speed);
	break;
	case 4:$box.find("li").css({
	"position":"absolute"}
);
	$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
	break;
}
}
$this.mouseover(function(){
	clearInterval(timer);
}
) $this.mouseout(function(){
	timer=setInterval(auto,opts.time);
}
)}
}
)(jQuery)

附件:下载该文件资源,减少时间成本(增值服务)