轮播

jQuery制作无缝轮播的焦点图

社会主义新天地 提交于 2019-11-29 16:16:48
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery无缝轮播的焦点图</title> <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script> <script type="text/javascript"> $(function(){ var i=0; var clone = $(".banner .img li").first().clone(); //复制第一张图片 $(".banner .img").append(clone) ; //把复制好的第一张图片放到最后一张图片的后面 var size = $(".banner .img li").size(); //获得li的个数 for(var j=0;j<size-1;j++){ $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass("on"); //为第一个li添加on的样式 // 鼠标划入圆点 $(".banner .num li").hover(function(){ var index=$(this).index(); i=index; $("

jquery之简单实现无缝轮播

爷,独闯天下 提交于 2019-11-29 16:16:35
不罗嗦,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <style> body,html{ width: 100%; } *{ margin: 0; padding: 0; } li{ list-style-type: none; } .nav{ width: 100%; height: 558px; overflow: hidden; position: relative; } .warp{ width: 100%; height: 558px; position: absolute; } .warp li{ height: 558px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .warp img{ width: 100%; height: auto; } </style> </head> <body> <div class="nav"> <ul class=

jQuery实现淘宝轮播图

三世轮回 提交于 2019-11-29 16:16:21
我爱撸码,撸码使我感到快乐 大家好,我是Counter 今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子,每行基本都打上了我理解的注释,表达的可能不是很好,但是理解理解就OK,欢迎一起技术探讨,一起成长。 再讲讲轮播图的需求吧,一打开网址,轮播图就会自己每3秒切换到下一张,总共5张,一直轮播,当你鼠标进入图片区域,那么图片不再自动轮播,你可以点击向左的按钮,也可以点击向右的按钮,你点左图片就切到上一张,点右就切到下一张,并且你可以点击下面的小原点,点哪跑那张,并且鼠标离开,轮播图又会自己每3秒跑起来,好了,废话不多说,先上效果,可以试试哦,应该没bug,嘿嘿。。。 效果如下: ps:如果效果出不来,那么请刷新下页面 代码给出: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝轮播图</title> <!-- CSS样式 --> <style>

jQuery实现轮播图切换

本小妞迷上赌 提交于 2019-11-29 16:16:07
近来时间有些闲暇,有空写一些东西了,从轮播图开始,就这么愉快的决定了,现在把我前天写的一个渐变方式的轮播分享出来,望大家给指导意见。 轮播嘛,几乎每个网站都有,几张大图,放一些醒目的活动或者公告,用户一眼就能看到。渐变方式的要比滑动方式的简单一点,因为它前后不需要前一页或下一页来衔接,它的原理也很简单,围绕图片的索引,依靠索引来切换。有难度一点的地方可能就在于索引是最后一张的时候要让它切到索引为0,以及点击左边按钮和点击右边按钮都能顺利切换,还有注意的一点是,每张图片定位在同一位置,这样渐变不会闪白。好了,下面上代码。 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>轮播</title> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/lunbo.js"></script> <link rel="stylesheet" href="css/lunbo.css

jquery实现漂亮的轮播图

夙愿已清 提交于 2019-11-29 16:15:55
今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <style> .oop_inner{ margin:0 auto; position:relative; top:10px; width:640px; height:424px; box-shadow:1px 2px 3px #666; overflow:hidden; } .oop_banner{ position:absolute; width:2600px; /* left:-640px; */ } .oop_banner img{ float:left; width:640px; } .oop_li{ position:absolute; left:45%; bottom:20px; } .oop_li span{ display:block; float:left; margin-right: 10px; width:15px; height:7px; background:#fff; box-shadow: 1px 1px; cursor:pointer; } .oop_li

轮播图

帅比萌擦擦* 提交于 2019-11-29 16:15:40
<!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>图片轮播 js原生(左右切换)</title> <style type="text/css"> body,div,ul,li,a,img{margin: 0;padding: 0;} ul,li{list-style: none;} a{text-decoration: none;} #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;} #banner{position:relative;width: 400px;height: 200px;overflow: hidden;} .imgList{position:relative;width:2000px;height:200px;z-index

焦点式轮播图

眉间皱痕 提交于 2019-11-29 16:15:22
编辑本博客 mouseenter()鼠标移入 用index记录层级 .eq根据下标过滤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点式轮播图</title> <script src="js/jquery-3.3.1.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } #lb{ width: 590px; height: 470px; margin: 30px auto; border:1px solid #A9A9A9; overflow: hidden; position: relative; } ul,ol{ list-style:none; } #lb ul{ height: 100%; width: 100%; position: relative; z-index: 1; } #lb>ul>li{ position: absolute; top: 0; right: 0; } #lb ol{ height: 25px; position: absolute; z-index: 2; bottom: 10px; right: 0px; } #lb>ol>li{ cursor: pointer; }

基于Jquery实现的轮播图

╄→гoц情女王★ 提交于 2019-11-29 16:15:06
前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <div class="inner clearfix"> <div class="innerwraper"><img src="img/1.jpg" alt="" /></div> <div class="innerwraper"><img src="img/2.jpg" alt="" /></div> <div class="innerwraper"><img src="img/3.jpg" alt="" /></div> <div class="innerwraper"><img src="img/4.jpg" alt="" /></div> <div class="innerwraper"><img src="img/5.jpg" alt="" /></div> <div class="innerwraper"><img src="img/6

jQuery实现轮播图

纵然是瞬间 提交于 2019-11-29 16:14:50
我用的jQuery库jquery-3.2.1.js可以在官网下载:http://jquery.com/download/ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery实现轮播图</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <style> #lunbo { width: 850px; height: 500px; margin: 0px auto; position: relative; overflow: hidden; } #list { position: absolute; width: 4250px; height: 500px; z-index: 1; } #list img { width: 850px; height: 500px; float: left; } #buttons { position: absolute; width: 90px; height: 15px; z-index: 2; left: 389px

轮播图插件

半腔热情 提交于 2019-11-29 16:14:31
轮播图插件 /** * * @param {ele} ele DOM元素,该元素需要在外面手动添加宽度和高度 * @param {arr} arr 一个数组,每一项包含图片地址imgUrl 和 点击图片后跳转的地址link (link是可选属性) */ function createBannerArea(ele, data){ var imgArea = document.createElement('div'); // 用于包裹角标 var circleArea = document.createElement('div'); // 用于包裹小圆圈 var circleColor = '#ddd'; // 圆圈颜色 var activeCirclecolor = '#aaa' // 选择状态的圆圈颜色 var changeTime = 3000; // 轮播定时器时间间隔 var changeTimer = null; // 轮播定时器 var transtion = null; // 动画定时器 var index = 0; // 当前显示第几张 initImgs(); initNumbers() autoChange() // 初始化图片区域 function initImgs(){ ele.style.overflow = 'hidden'; imgArea.style