jQuery实现的多屏图像图层切换效果实例


Posted in Javascript onMay 07, 2015

本文实例讲述了jQuery实现多屏图像图层切换效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
ul{list-style:none;margin:0;padding:0;}
li{float:left;}
.Xing_focus{
width:875px; height:800px;
overflow:hidden;border:1px solid red;
}
.Xing_focus ul{
width:3500px;
}
.bnt {
float:left;width:300px;height:20px;
border:1px solid red;
}
.bnt li{
width:18px;height:18px;
background:red; cursor:pointer;
margin-right:10px;float:left;
}
.bnt .sli{
background:blue;
}
.next{
width:100px;height:100px;
background:#990000;float:left;
cursor:pointer;
}
.pre{
width:100px;height:100px;
background:#009;float:left;
cursor:pointer;margin-right:30px;
}
.list1{
width:875px;height:500px;background:red;
}
.list2{
width:875px;height:500px;background:black;
}
.list3{
width:875px;height:500px;background:pink;
}
.list4{
width:875px;height:500px;background:blue;
}
</style>
</head>
<body>
 <div class="Xing_focus" id="box">
 <ul class="imgs" id="actor">
 <li class="list1">
 <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
 </li>
 <li class="list2">
 <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
 </li>
 <li class="list3">
 <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
 </li>
 <li class="list4">
 <img src="http://www.baidu.com/img/baidu_sylogo1.gif" />
 </li>
 </ul>
 <ul class="bnt" id="bnt">
 </ul>
 <div class="pre" id="pre">上一张</div>
 <div class="next" id="next">下一张</div>
 </div>
<script type="text/javascript">
$(window).load(function() {
 var liW = $("#actor li:first").width();
 var liL = $("#actor li").length;
 //alert(liW)
 var lis = $("#actor li").length;
 for(i=0;i<lis;i++){
 $("#bnt").append("<li></li>")
 $("#bnt li:first").addClass("sli");
 };
 $("#bnt li").each(function(index) {
 $(this).click(function(){
 if($("#actor").is(":animated")==false){
 $("#actor").animate({"marginLeft":-index*liW},500,function(){
 $("#bnt li").removeClass("sli");
 $("#bnt li").eq(index).addClass("sli");
 });
 };
 });
 });
 settime=window.setInterval(atuoScroll,2000);
 $("#box").hover(function(){
 window.clearInterval(settime);
 },function(){
 settime=window.setInterval(atuoScroll,2000);
 });
////////////////////////////////////////
$("#next").click(function(){
 var ulM =parseInt( $("#actor").css("margin-left"));
 if(ulM==-((liL-1)*liW)&&$("#actor").is(":animated")==false){
 $("#actor").animate({"marginLeft":0+"px"},500,function(){
 $("#bnt li").removeClass("sli");
 $("#bnt li:first").addClass("sli");
 });
 }
 else if($("#actor").is(":animated")==false){
 $("#actor").animate({"marginLeft":ulM-liW+"px"},500,function(){
 var ulM =parseInt( $("#actor").css("margin-left"));
 var num = -ulM/liW
 $("#bnt li").removeClass("sli");
 $("#bnt li").eq(num).addClass("sli");
 });
 }; 
 }); 
////////////////////////////////////////
$("#pre").click(function(){
 var ulM =parseInt( $("#actor").css("margin-left"));
 if(ulM==0&&$("#actor").is(":animated")==false){
 $("#actor").animate({"marginLeft":-2625+"px"},500,function(){
 $("#bnt li").removeClass("sli");
 $("#bnt li:last").addClass("sli");
 });
 }
 else if($("#actor").is(":animated")==false){
 $("#actor").animate({"marginLeft":ulM+liW+"px"},500,function(){
 var ulM =parseInt( $("#actor").css("margin-left"));
 var num = -ulM/liW
 $("#bnt li").removeClass("sli");
 $("#bnt li").eq(num).addClass("sli");
 });
 };
 });
//////////////////////////////////////
});//END
function atuoScroll(){
 var liW = $("#actor li:first").width();
 var liL = $("#actor li").length;
 var ulM =parseInt( $("#actor").css("margin-left"));
 if(ulM==-((liL-1)*liW)&&$("#actor").is(":animated")==false){
 $("#actor").stop();
 $("#actor").animate({"marginLeft":0},500,function(){
 $("#bnt li").removeClass("sli");
 $("#bnt li:first").addClass("sli"); 
 });
 }
 else if($("#actor").is(":animated")==false){
 $("#actor").stop();
 $("#actor").animate({"marginLeft":ulM-liW},500,function(){
 var ulM =parseInt( $("#actor").css("margin-left"));
 var num = -ulM/liW
 $("#bnt li").removeClass("sli");
 $("#bnt li").eq(num).addClass("sli"); 
 });
 };
 };
</script>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
jquery实现图片左右切换的方法
May 07 #Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 #Javascript
jQuery团购倒计时特效实现方法
May 07 #Javascript
js由下向上不断上升冒气泡效果实例
May 07 #Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 #Javascript
js显示文本框提示文字的方法
May 07 #Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
You might like
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
JavaScript 的继承
2011/10/01 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
Vue.js划分组件的方法
2017/10/29 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
详解Python核心对象类型字符串
2018/02/11 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python实现在线翻译
2020/06/18 Python
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书