利用jquery写的左右轮播图特效


Posted in Javascript onFebruary 12, 2014

最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的

将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> 
<style> 
*{margin:0; padding:0;} 
body{min-width:320px; font-size:12px;} 
h1{font-size:18px;} 
h2{font-size:14px} 
h4{font-size:12px;} 
p{ word-break:break-all; line-height:24px;} 
ul,ul li,ol,ol li{list-style:none;} 
a{text-decoration:none;} 
.clear{clear:both;} 
.clearfix:after{ display:block; clear:both; content:"."; visibility:hidden; height:0px;} #pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;} 
.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;} 
.lunbo_pic li{ float:left; overflow:hidden;} 
.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;} 
.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; } 
.lunbo_curso a{ background:url(../images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;} 
.lunbo_curso .small_xz{ color:#F0F;} 
.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;} 
#arr_l{ left:0; background:#CCC;} 
#arr_r{ right:0; background:#CCC;} 
.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;} 
</style> 
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script> 
</head> 
<body> 
<div id="pic_carousel"> 
<ul id="lunbo_pic" class="clearfix lunbo_pic"> 
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p3.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li> 
</ul> 
<div id="lunbo_curso" class="lunbo_curso"> 
<a href="#" class="small_xz">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
</div> 
<span id="arr_l" class="arr"></span> 
<span id="arr_r" class="arr"></span> 
</div> 
<script> 
var b_width = 1000; // 大图的宽度 
var speed = 500; // 图片向左移动速度 
var s_time = 3000 //图片自动滚动速度 
var pic_li = $("#lunbo_pic").children("li"); 
$(document).ready(function(e) { 
var $ul_width= pic_li.width() * pic_li.length; //轮播图的宽度 
$("#lunbo_pic").width($ul_width); 
var small_width = $(".lunbo_curso>a").width() * $(".lunbo_curso>a").length; 
$(".lunbo_curso").width(small_width); 
$(".lunbo_curso").css("margin-left",-small_width/2); 
}); 

$(document).live("click",function(e){ 
$target = $(e.target); 
var id = $target.attr('id'); 
if($target.is("a") && $target.parent($("#lunbo_curso")) ){ 
$target.addClass("small_xz").siblings().removeClass('small_xz'); 
var mar_lf = parseInt($target.index() * b_width); 
$("#lunbo_pic").animate({ 
left : -mar_lf 
},speed); 
} 
if(id == "arr_l"){ 
prePage(); 
} 
if(id == "arr_r"){ 
nextPage(); 
} 
}); 
//上一个 
function prePage(){ 
if($(".small_xz").index() == 0){ 
$("#lunbo_pic").css("left",-4000); 
$("#lunbo_pic").animate({ 
"left": -parseInt(pic_li.length *b_width - b_width) 
},speed); 
$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz"); 
$(".small_xz").index() == pic_li.length - 1; 
}else{ 
$("#lunbo_curso>a").eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz"); 
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_width; 
$("#lunbo_pic").animate({ 
"left": mar_lf2 
},speed); 
} 
} 
//下一个 
function nextPage(){ 
if($(".small_xz").index() == pic_li.length -1){ 
$("#lunbo_pic").css("left",0); 
/*$("#lunbo_pic").animate({ 
"left": 0 
},speed);*/ 
$("#lunbo_curso>a").eq(0).addClass("small_xz").siblings().removeClass("small_xz"); 
$(".small_xz").index() == 0; 
}else{ 
$("#lunbo_curso>a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz"); 
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width; 
$("#lunbo_pic").animate({ 
"left": mar_lf2 
},speed); 
} 
} 
function picRun(){ 
nextPage(); 
} 
intervalTime = setInterval(picRun,s_time); 
$("#pic_carousel").on("mouseover",function(){ 
clearInterval(intervalTime); 
}); 
$("#pic_carousel").on("mouseout",function(){ 
intervalTime = setInterval(picRun,s_time);; 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
canvas 实现中国象棋
Feb 17 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jquery选择checked在ie8普通模式下的问题
Feb 12 #Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 #Javascript
Javascript写入txt和读取txt文件示例
Feb 12 #Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 #Javascript
JavaScript中创建对象和继承示例解读
Feb 12 #Javascript
javascript实现文本域写入字符时限定字数
Feb 12 #Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 #Javascript
You might like
php在线代理转向代码
2012/05/05 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
php车辆违章查询数据示例
2016/10/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
python调用java的Webservice示例
2014/03/10 Python
python实现爬虫下载美女图片
2015/07/14 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Django框架视图介绍与使用详解
2019/07/18 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python实现登录与注册系统
2020/11/30 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
什么是网络协议
2016/04/07 面试题
后勤人员自我鉴定
2013/10/20 职场文书
人事部岗位职责范本
2014/03/05 职场文书
志愿者活动总结范文
2014/04/26 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
检讨书范文
2019/04/16 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android