banner图第三版

思路：
定时移动
点击下排按钮移动
点击左右按钮移动

//初始化根据移动方向将所有图片归位
//将下标为0的图片放置在显示框，定时移动下一张图片

//定时移动,根据移动方向，设置css对象
//根据定时标号index判断当前应该是哪一张图片该移动
//所有图片归原，移动对应index的图片
//goBack()和goBackcss()是将所有的图片归原的方法
//定时方法绑定在closeTime变量上
定时任务方法：runtimer

点击下排按钮
当鼠标悬浮到点击按钮时清除定时任务，获取对应点击元素所含的值，赋给图片标号index，移动图片，离开按钮，恢复定时任务

点击左右按钮
鼠标悬浮按钮上清除定时任务，鼠标离开按钮绑定定时任务，鼠标点击是index++，判断index是否合法，调整index，调用下排按钮的点击事件

<!DOCTYPE html>
<html>
<head><title>banner图的封装</title><style type="text/css">body{background: #ccc;}#slide{width:300px;height:300px;}</style>
</head>
<body>
<div style="width:800px;height:400px;border:1px solid red;margin:100px;"><div id="slide"></div>
</div><script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">/*slide:div的idimages：图片的地址数组runDirection:图片的移动方向*/function slideBanner(slide,images,runDirection){$(slide).css({"overflow":"hidden"});//获取显示图片位置的宽度和高度var width = $(slide).width();var height = $(slide).height();//获取图片的数量var len = images.length;//创建点击的小图标var clickBox = $("<div></div>");$(slide).css("position","relative");$(slide).append(clickBox);//position:relative相对于其直接父元素定位,所以先加上这个$(clickBox).css({"z-index":"3","position":"absolute","bottom":"10px","right":"10px","float":"left"});var timemis = "alskdj"+new Date().valueOf();var index =0;//用于轮播的时候记录当前展示的图片的id//创建img元素 和点击图片按钮for(var i=0;i<len;i++){var img = $("<img />");$(img).attr("src",images[i]);$(img).attr("class",timemis);$(img).css({"width":width,"height":height,"position":"absolute"});$(slide).append(img);var divClick = $("<div class='divbannerclick'>"+i+"</div>");$(divClick).css({"width":"20px","height":"20px","border-radius":"50%","background":"#3c3c3c","line-height":"20px","text-align":"center","float":"left","margin-right":"6px","color":"#fff","cursor":"pointer"});$(clickBox).append(divClick);}//添加点击事件$(".divbannerclick").each(function(){$(this).click(function(){var text = $(this).text();index = text;goBack(runDirection);myclick(runDirection);});});//添加左右点击按钮var divLeft = $("<div style=\"position:relative;z-index:999;top:"+(height / 2 - 15)+"px;width:30px;height:30px;line-height:30px;border-radius:30px;text-align:center;cursor:pointer;background:#c1be31b3;font-size:24px;color:red;float:left;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;\"> < </div>")$(slide).append(divLeft);var divRight = $("<div style=\"position:relative;z-index:999;top:"+(height / 2 - 15)+"px;width:30px;height:30px;line-height:30px;border-radius:30px;text-align:center;cursor:pointer;background:#c1be31b3;font-size:24px;color:red;float:right;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;\"> > </div>")$(slide).append(divRight);//鼠标悬浮在左右框时，清除定时任务$(divLeft).hover(function(){clearInterval(closeTime);})$(divRight).hover(function(){clearInterval(closeTime);})//点击是调用下排对应的点击按钮$(divLeft).click(function(){index--;if(index == -1){index= (len - 1);}goBack(runDirection);myclick(runDirection);});$(divRight).click(function(){index++;if(index >=len){index=0;}goBack(runDirection);myclick(runDirection);});//鼠标离开左右框时添加定时任务$(divLeft).mouseleave(function(){rebacktimecss();})$(divRight).mouseleave(function(){rebacktimecss();})//初始化根据移动方向将所有图片归位//将下标为0的图片放置在显示框，定时移动下一张图片//移动的方向switch(runDirection){case 1:goBack(runDirection);$("."+timemis).eq(0).css({"bottom":"0px"});$(".divbannerclick").eq(0).css({"color":"red"});//移动move(runDirection);break;case 2:goBack(2);$("."+timemis).eq(0).css({"left":"0px"});$(".divbannerclick").eq(0).css({"color":"red"});//移动move(2);break;case 3:goBack(3);$("."+timemis).eq(0).css({"top":"0px"});$(".divbannerclick").eq(0).css({"color":"red"});//移动move(3);break;case 4:goBack(4);$("."+timemis).eq(0).css({"right":"0px"});$(".divbannerclick").eq(0).css({"color":"red"});//移动move(4);break;default:goBack(2);$("."+timemis).eq(0).css({"left":"0px"});$(".divbannerclick").eq(0).css({"color":"red"});//移动move(2);break;}var closeTime;function runtimer(obj){var timer =function(){index++;if(index >=len){index=0;}goBack(runDirection);$("."+timemis).eq(index).animate(obj,"slow",function(){console.log("动画的回调函数");});$(".divbannerclick").eq(index).css({"color":"red"});}closeTime = setInterval(timer,4000);}//定时移动,根据移动方向，设置css对象//根据定时标号index判断当前应该是哪一张图片该移动//所有图片归原，移动对应index的图片//goBack()和goBackcss()是将所有的图片归原的方法//移动function move(num){switch(num){case 1:var obj = {"bottom":"0px"};runtimer(obj);break;case 2:var obj = {"left":"0px"};runtimer(obj);break;case 3:var obj = {"top":"0px"};runtimer(obj);break;case 4:var obj = {"right":"0px"};runtimer(obj);break;default:var obj = {"left":"0px"};runtimer(obj);break;}}//当滑动上点击的位置的时候，清除定时任务，//当离开点击的位置时添加定时任务//点击，将对应的图片归原function myclick(num){switch(num){case 1:console.log("myclick1");$("."+timemis).eq(index).animate({"bottom":"0px"},"slow",function(){console.log("动画的回调函数");});$(".divbannerclick").eq(index).css({"color":"red"});break;case 2:$("."+timemis).eq(index).animate({"left":"0px"},"slow",function(){console.log("动画的回调函数");});$(".divbannerclick").eq(index).css({"color":"red"});break;case 3:$("."+timemis).eq(index).animate({"top":"0px"},"slow",function(){console.log("动画的回调函数");});$(".divbannerclick").eq(index).css({"color":"red"});break;case 4:$("."+timemis).eq(index).animate({"right":"0px"},"slow",function(){console.log("动画的回调函数");});$(".divbannerclick").eq(index).css({"color":"red"});break;default:$("."+timemis).eq(index).animate({"left":"0px"},"slow",function(){console.log("动画的回调函数");});$(".divbannerclick").eq(index).css({"color":"red"});break;}}function goBackcss(obj){for(var cxk_i=0;cxk_i<len;cxk_i++){$("."+timemis).eq(cxk_i).css(obj);$(".divbannerclick").eq(cxk_i).css({"color":"#fff"});}}//所有的img归原function goBack(num){switch(num){case 1:var obj = {"bottom":height+"px"};goBackcss(obj);break;case 2:var obj = {"left":width+"px"};goBackcss(obj);break;case 3:var obj = {"top":height+"px"};goBackcss(obj);break;case 4:var obj = {"right":width+"px"};goBackcss(obj);break;default:var obj = {"left":width+"px"};goBackcss(obj);break;}}//当鼠标悬停在按钮外的框上说明要点击，那么应该停止定时，当离开的时候，那么就应该加上定时$(clickBox).hover(function(){clearInterval(closeTime);});//当鼠标离开时添加定时事件$(clickBox).mouseleave(function(){rebacktimecss();});//恢复定时任务function rebacktimecss(){switch(runDirection){case 1:var obj = {"bottom":"0px"};runtimer(obj);break;case 2:var obj = {"left":"0px"};runtimer(obj);break;case 3:var obj = {"top":"0px"};runtimer(obj);break;case 4:var obj = {"right":"0px"};runtimer(obj);break;default:var obj = {"left":"0px"};runtimer(obj);break;};}}var images =["images/slide-2.jpg","images/slide-3.jpg","images/slide-4.jpg","images/slide-5.jpg"];slideBanner("#slide",images,2);
</script>
</body>
</html>

banner图第三版相关推荐

第一行代码-android-第三版-pdf扫描-思维导图-课件-源码
第一行代码-android-第三版-pdf扫描-思维导图-课件-源码一帮公众号各种要你关注, 各种压缩包层层套娃要密码, 还要进群, 真他妈日了gou了,找了半天分享给大家, 毫无套路! pdf扫 ...
计量经济学及stata应用思维导图_人教版A版高中数学必修1第三章《函数的应用》思维导图...
用思维导图复习,一天顶一个月.高中数学必修和选修课本共计13本,通常两年内学完,平均一年6本,每学期3本.每本平均三到四章,每学期5个月,大约半月学完一章.而高考总复习的时间则更为宝贵,如果高考一轮复 ...
《精通 ASP.NET MVC 3 框架（第三版）》----第2章　准备工作 2.1 准备工作站
本节书摘来自异步社区<精通 ASP.NET MVC 3 框架(第三版)>一书中的第2章,第1节,作者: [美]Adam Freeman , Steven Standerson,译者: 林逸 ...
python基础教程第二版和第三版哪个好-python基础教程 2版和3版哪个适合新手？!...
python基础教程 2版和3版哪个适合新手? 现在学是学python3. 两者的差异发者本身影响并不大,个别语法细微的差比如python3的print数方式使用,一些常用模块的名称差异,一些机制的差 ...
python基础教程第三版和第二版选哪个-python基础教程 2版和3版哪个适合新手？!...
python基础教程 2版和3版哪个适合新手? 现在学是学python3. 两者的差异发者本身影响并不大,个别语法细微的差比如python3的print数方式使用,一些常用模块的名称差异,一些机制的差 ...
python学习手册中文版免费下载-Python学习手册第三版
<Python学习手册(第3版)>讲述了:Python可移植.功能强大.易于使用,是编写独立应用程序和脚本应用程序的理想选择.无论你是刚接触编程或者刚接触Python,通过学习<Py ...
《大道至简》一书第三版，与编辑就本书写作风格的讨论
在这一版中,编辑周悦同学曾经给我邮件,对古文的使用,以及整本书的行文风格提出她的看法.借这个机会,我在邮件中回顾了我写这本书的整个历史,以及过程中的思想变化.不过看来,这些回顾还是有一点点成效的,呵呵 ...
MFC与Matlab编程总结（以《Matlab与C/C++混合编程技术（第三版）》-刘维第五章生成DLL为例）
近期要完成一个任务,把人脸超分辨率的算法集成在一个系统中,嵌入人脸库及字典集等.老板的要求是有比较好的界面,目前也只能是VS那一套了,前一段时间完成的项目是用的MFC,这次也就是用MFC来完成吧.但是 ...
超详细轮播图的三种实现方法html+css+javascript
对代码不理解的可以参考我的个人视频 https://www.bilibili.com/video/BV1jA411Y7Ek/ 1.带箭头焦点轮播图js完成版 1.1 html部分 <!DOCTY ...
linux内核设计与实现中文第三版 pdf_大牛推荐的5本 Linux 经典必读书
今天给大家推荐5本Linux学习相关的书籍:这些书籍基本都是很多大牛推荐过,并且深受业界好评的书:虽然只有5本,但是相信把5本全都认真看过的同学应该不多吧?希望这些书能够帮助你进阶为大牛! 5.< ...

banner图第三版

banner图第三版相关推荐

最新文章

热门文章