利用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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python入门必须知道的11个知识点
2018/03/21 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python中自带的三个装饰器的实现
2019/11/08 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
销售高级职员求职信
2013/10/29 职场文书
社区母亲节活动记录
2014/03/06 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
学生打架检讨书
2014/10/20 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
聘任书格式及范文
2015/09/21 职场文书
德劲DE1105机评
2022/04/05 无线电