jQuery仿iPhone滑块实现图片滑动预览效果

HTML5 herman 939浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

iPhone 有一个滑块功能,看起来非常的炫。今天我们使用 jQuery 来模仿一个 iPhone 滑块。

该 iPhone 滑块的实现很简单,其原理是使用 animate 动画,实现滑动效果。然后在滑动的同时,更换需要浏览的图片即可。

相关运行效果截图如下:

iPhone滑块动画效果图

相关主要的实现代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery苹果解锁滑块幻灯片</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* changeBox_a1 */
.changeBox_a1{position:relative;height:397px;width:732px;overflow:hidden;margin:30px auto;}
.changeBox_imgs{position:relative;height:354px;width:732px;overflow:hidden;clear:both;}
.changeBox_imgs_list{position:absolute;width:9999px;}
.changeBox_imgs_list li{float:left;height:354px;width:732px;}
/* ul_change */
.ul_change,.ul_change .arrow_bar{background:url(images/bannerTag.gif) no-repeat;}
.ul_change{position:relative;width:1000px;height:43px;left:0px;bottom:0px;background-position:0 0;}
.ul_change .arrow_bar{position:absolute;width:181px;height:34px;background-position:-3px -46px;color:#565253;z-index:8;
top:3px;left:3px;cursor:pointer;}
.ul_change li{display:block;_display:inline-block;float:left;position:relative;width:181px;height:40px;
line-height:40px;padding-top:3px;z-index:9;margin:0 84px 0 3px;text-align:center;color:#8F8F8F;font-size:14px;
font-weight:bolder;font-family:'微软雅黑','宋体';cursor:pointer;}
</style>
<div id="change_1" class="changeBox_a1">
	<div class="changeBox_imgs">
		<ul class="changeBox_imgs_list">
			<li><a href="#" target="_blank"><img width="732" height="354" alt="户外摄影" src="images/banner1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img width="732" height="354" alt="户外摄影" src="images/banner2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img width="732" height="354" alt="户外摄影" src="images/banner3.jpg" /></a></li>
		</ul>
	</div>
	<ul class="ul_change">
		<li id="changeBox_arrow_bar" class="arrow_bar"></li>
		<li class="tagLi3" idx="1">户外摄影</li>
		<li class="tagLi2" idx="2">户外摄影</li>
		<li class="tagLi1" idx="3">户外摄影</li>
	</ul>     
</div>
<script type="text/javascript">
function BannerImages(){
	var b = $("#changeBox_arrow_bar"),
		c = $("ul.ul_change li:not(.arrw_bar)"),
		e = $("ul.changeBox_imgs_list"),
		d = true,
		f = 1; 
	var a = function(){
		var j = (732 * f - 732),j = j == 0 ? 0 : -j,i = 500;
		e.animate({ left: j + "px" }, i)
	};	
	e.find("img").hover(function(){
		clearInterval(h)
	},function(){
		g()
	});	
	c.click(function(){
		var j = $(this), i = j.position().left + 3;
		f = j.attr("idx");
		a();
		b.animate({ left: i + "px" },500,function(){
			d = true
		})
	}).mouseover(function(){
		if(!d){
			return
		}
		clearInterval(h);
		d = false; 
		$(this).click()
	}).mouseout(function(){
		if(!d){
			return
		}
		g()
	});	
	var h = null;	
	var g = function(){
		h = setInterval(function(){
			f++;
			if (f > 3){
				f = 1
			}
			c.eq(f).click()
		}, 4000)
	};
	g()
};
$(document).ready(function(){
	BannerImages();//Banner滑动效果
});
</script>
<!-- 业余草:www.xttblog.com -->
</body>
</html>

相关源码已上传至链接:http://pan.baidu.com/s/1bSmfTk 密码:nxit

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » jQuery仿iPhone滑块实现图片滑动预览效果