在苹果网上看到的效果，自已写JS练习了下。图片用的原网站上的图片。有什么错误的地方，各位提示下，共同进步。
用鼠标拖拽，实现3D转圈效果。
图片效果如下
<!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" />
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>360苹果</title>
</head>
<body>
<div class="showMain">
<img id="pic" src="images/pic_1.jpg"/>
<span class="actiont start">Start</span>
<span class="actiont stop">Stop</span>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-apple360.js"></script>
</body>
</html>
.showMain{
width:640px;
height:378px;
padding:100px;
background:#e8e8e8;
margin-left:auto;
margin-right:auto;
text-align:center;
position:relative;
}
.showMain .actiont{
position:absolute;
width:80px;
height:30px;
line-height:30px;
bottom:40px;
border:1px solid #336699;
font-size:14px;
cursor:pointer;
}
.showMain .actiont:hover{
border:1px solid #f90;
}
.start{
left:330px;
}
.stop{
right:330px;
}
/*
* apple变量
* picCon : 图片展现所用容器
* begin_number : 默认开始编号
* end_number : 默认停止编号
* now_number : 默认当前编号
* min_number : 图片最小值
* max_number : 图片最大值
* start : 开始自动旋转
* stop : 停止自动旋转
* state : 当前是否自动旋转
* clockwise : 是否为顺时针方向
* det_time : 默认滚动速度
* time : 手动滚动速度
* dragging : 标记拖曳状态
*/
var apple = {
picCon : "#pic",
begin_number : 1,
end_number : 72,
now_number : 1,
min_number :1,
max_number :72,
start : ".start",
stop : ".stop",
state : true,
clockwise : true,
det_time : 100,
time : 100,
dragging : false
}
var baukh = {
init : function(){
//初始化加载
$(apple.start).click(function(){
apple.time = apple.det_time; //恢复默认滚动速度
if(apple.clockwise && apple.state && apple.now_number != apple.end_number){
//顺时针转动 状态进行时 ，不处理转动事件
return false;
}
if(!apple.clockwise && apple.state && apple.now_number != apple.end_number){
//逆时针转动 状态进行时 ，不处理转动事件
return false;
}
//增加开启旋转事件
apple.state = true;
if(apple.clockwise){
apple.end_number = apple.max_number;
}else{
apple.end_number = apple.min_number;
}
baukh.auto();
});
$(apple.stop).click(function(){
//增加关闭旋转事件
apple.state = false;
baukh.auto();
});
baukh.auto(); //页面载入时，进行一次旋转动画
baukh.sliding();//加载拖动事件
},
sliding : function(){
//滑动事件处理
var down,up,sum;
$(apple.picCon).mousedown(function(event){
//鼠标按下时激活拖拽事件
apple.dragging = true;
down = event.clientX;
return false;
});
$(apple.picCon).mousemove(function(event){
//鼠标拖拽时的操作
if(apple.dragging){
}
return false;
});
$(apple.picCon).mouseup(function(event){
//鼠标弹起时冻结拖拽事件
apple.dragging = false;
apple.state = true;
up = event.clientX;
if(down<up){
//向右滑动时
sum = Math.round((up-down)/10);
apple.end_number = apple.now_number - sum;
if(apple.end_number < apple.min_number){
apple.end_number = apple.min_number;
}
apple.clockwise = false;
}else if(down>up){
//向左滑动时
sum = Math.round((down-up)/10);
apple.end_number = apple.now_number + sum;
if(apple.end_number > apple.max_number){
apple.end_number = apple.max_number;
}
apple.clockwise = true;
}
apple.time = Math.floor(apple.det_time/sum);
if(apple.time<50){
apple.time=50;
}
baukh.auto();
return false;
});
},
auto : function(){
//更换图片处理
if(!apple.state){
//当前旋转状态为停止时
return false;
}
if(apple.clockwise && apple.now_number >=apple.end_number){
//顺时针转动 当前值大于等于目标值 ，不处理转动事件
return false;
}
if(!apple.clockwise && apple.now_number <= apple.end_number){
//逆时针转动 当前值小于等于目标值 ，不处理转动事件
return false;
}
if(apple.clockwise){
apple.now_number++;
}else{
apple.now_number--;
}
$(apple.picCon).attr("src","images/pic_"+(apple.now_number)+".jpg");
window.setTimeout(function(){
baukh.auto();
},apple.time)
}
}
$(function(){
baukh.init();
})
基本效果就是通过鼠标拖拽实现转动效果。图片太多，效果不实用，纯属为了好玩。
相关推荐
js 制作的模拟3d效,当鼠标左右移动后可以显现出3d的效果
jQuery仿3D效果三联切换旋转木马插件源码是一款效果非常炫酷的三联切换仿3D效果旋转木马jQuery插件。该旋转木马效果并非正真的3D效果，而是使用PNG图片来模拟图片的阴影，制作出类似图片的3D阴影效果，以达到兼容低...
西班牙人用js写的3d圣诞树。让我们情何以堪啊
Web 前端 Vue+Threejs 3D 实时温度气流仿真效果
高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。
jQuery仿3D效果三联切换旋转木马插件源码是一款效果非常炫酷的三联切换仿3D效果旋转木马jQuery插件。该旋转木马效果并非正真的3D效果，而是使用PNG图片来模拟图片的阴影，制作出类似图片的3D阴影效果，以达到兼容低...
08:___Javascript仿Flash图片轮翻 09:___JavaScript图片滚动（绝对酷） 10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___...
一款非常炫酷的js+css3 3D波浪动画焦点图轮播切换特效，图片切换时的过渡动画仿如波浪翻滚，而且有多种动画效果。
带3D立体旋转效果的，仿英雄杀官网3D游戏制作的幻灯片焦点图，效果很不错哦！
vue3仿抖音视频滑动切换播放
本篇文章主要介绍了three.js实现3D模型展示的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这是一款仿Ken Burns效果的jQuery幻灯片插件。该幻灯片插件是基于smartcrop.js插件的，smartcrop.js是一款用于剪裁图片的js插件。Ken Burns效果是将图片逐渐平移放大的动画效果。
在开源程序中支持几乎所有效果的自定义（如色彩、多边形大小、多边形密度、光照范围、光照强度、光源运动速度、多边形运动速度、色彩落差梯度等等），支持围绕水平轴做3D旋转，同时完美实现了光源对鼠标的软追踪算法...
vue高仿立体卡片效果（第二版）：https://blog.csdn.net/qq_25252769/article/details/123291095
3D切换效果 icebox焦点图 I jQuery右侧晨浮框控制楼层切换-改良版 ToolTip浮动提示框效果 京东楼层 3D切换效果 icebox焦京图 R bootstrap-datetimepicker-masterzip CSs3动画效果自动登录表单zip CS3给图片添加旋转...
PLANETARIUM这个插件将使你能够创建一个互动的星球。演示地址：http://www.jq22.com/jquery-info413 此插件要求ie9以上。
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
仿清华官网，所有页面，附加添加了3D图书馆效果，图书馆类似于网上图书馆，点击图书可以查看图书，并且可以翻页查看；加入了少部分的js代码；
高仿锤子商城官网轮播图，3D视差效果，实现后台可灵活配置，定时自动轮播 原作者 ; 二次开发 ; 本作者三次开发，且本人为后台开发人员，非专业前端，如有错误敬请谅解 Build Setup # install dependencies npm ...