自己写的轮播插件仿多玩

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/* 在旧版本浏览器中显示HTML5元素 */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}body {font-size: 100%;line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}a{text-decoration: none;}body {font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;}a:hover{text-decoration: none;}a:focus{text-decoration: none;}.slide{width: 430px;height: 260px;position: relative;overflow: hidden;}.slide .img {height: 260px;position: absolute;width: 3440px;left: -430px;}/*本来2580*/.slide .img > li{width: 430px;height: 260px;float: left;}.slide .img > li > a{width: 100%;height: 260px;display: inline-block;position: relative;}.slide .img > li > a .content{position: absolute;bottom: 0px;width: 100%;color: white;background: url(img/mask.png) repeat-x;padding: 110px 0 17px 16px;}.slide .img > li > a .content h2{font-size: 20px;height: 28px;line-height: 28px;}.slide .img > li > a .content p{font-size: 14px;height: 20px;line-height: 20px;}.slide .order{height: 4px;width: 100%;position: absolute;bottom: 0;}.slide .order li{width: 65px;background: #8d8d8d;height: 4px;float: left;cursor: pointer;transition: all 0.4s;}.slide .order li + li{margin-left: 1px;}.slide .order li.order-active{width: 100px;background: #ff6c00;}.slide .cur-order{position: absolute;right: 12px;bottom: 20px;}.slide .cur-order span:first-child{position: relative;top: -10px;color: white;font-size: 30px;left: 4px;}.slide .cur-order span:last-child{font-size: 34px;color: #b2b2b2;}.slide .cur-order span:last-child em{font-size: 20px;}.slide .prev,.slide .next{display: inline-block;width: 26px;height: 45px;line-height: 45px;font-size: 40px;color: transparent;position: absolute;top: 50%;margin-top: -22px;cursor: pointer;transition: all 0.4s;}.slide .prev{left: 0;}.slide .next{right: 0;}</style><script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script><script>(function($){$.fn.slide = function(options){var defaults      = {picWidth: 430, //容器和图片的宽度一致，不一致的自己研究。slideTime: 3000, //轮播相隔时间slideNum: 6 //轮播图片的数量},options         = $.extend({}, defaults, options); //拓展 defaults 、options 会合并。后者会覆盖前者。//轮播var i = 0;function slide(){ //轮播i++;$('.img').animate({'left':(i+1)*(-options.picWidth)+'px'},400,function(){if( i == options.slideNum){    //轮播图的重点就是  在左边添加一张第6的图片，在右边添加一张第1的图片i=0;         //到达 右边添加一张第1的图片 时， 设为0$('.img').css('left',-options.picWidth+'px'); //left也随之变换，但这个left不需要触发动画}});$('.order li').eq(i%options.slideNum).addClass('order-active').siblings().removeClass();//这句话不可以放if前面$('.cur-order span').eq(0).text(i+1);if((i+1)%(options.slideNum+1)==0){$('.cur-order span').eq(0).text(1);}}var timer = setInterval(slide,options.slideTime); //轮播//鼠标移入下面小边的反应$('.order li').on('mouseenter',function(){$(this).addClass('order-active').siblings().removeClass();clearInterval(timer);i=$(this).index();$('.img').animate({'left':(i+1)*(-options.picWidth)+'px'},400);$('.cur-order span').eq(0).text((i+1)%(options.slideNum+1));});//鼠标移出下面小边的反应$('.order li').on('mouseleave',function(){});//鼠标移入整个区域的反应   hover就行了$('.slide').on('mouseenter',function(){clearInterval(timer);$('.prev').css('color','#CCCCCC');$('.next').css('color','#CCCCCC');});//鼠标移出整个区域的反应$('.slide').on('mouseleave',function(){timer = setInterval(slide,options.slideTime);$('.prev').css('color','transparent');$('.next').css('color','transparent');});//回上一页$('.prev').click(function(){if(!$('.img').is(':animated')){i--;$('.img').animate({'left':(i+1)*(-options.picWidth)+'px'},400,function(){if( i == -1){i=options.slideNum-1;$('.img').css('left',-options.slideNum*options.picWidth+'px');}$('.order li').eq(i%options.slideNum).addClass('order-active').siblings().removeClass();//这句话不可以放if前面$('.cur-order span').eq(0).text(i+1);});}});//回下一页$('.next').click(function(){if(!$('.img').is(':animated')){slide();}});    };})(jQuery);$(function() {$.fn.slide({picWidth: 430, //容器和图片的宽度一致，不一致的自己研究。slideTime: 3000, //轮播相隔时间slideNum: 6 //轮播图片的数量});});</script></head><body><div class="slide"><ul class="img"><li><a href="#"><img src="img/slide6.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide1.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide2.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide3.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide4.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide5.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide6.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li><li><a href="#"><img src="img/slide1.jpg" /><div class="content"><h2>2017春节手游礼包专题</h2><p>没有这些礼包 都过不好春节了</p></div></a></li></ul><ul class="order"><li class="order-active"></li><li></li><li></li><li></li><li></li><li></li></ul><span class="prev"><</span><span class="next">></span><div class="cur-order"><span>1</span><span>/<em>6</em></span></div></div></body>
</html>

　　线上demo：http://www.showmyheart.top/slide/

　　JS主要代码可以不看。

                        $(function() {$.fn.slide({picWidth: 430, //容器和图片的宽度一致，不一致的自己研究。slideTime: 3000, //轮播相隔时间slideNum: 6 //轮播图片的数量});});知道是这样调用就行了。  PS：容器、图片宽度  轮播图片数量  跟你们需要的不一样的话，需要自行调CSS代码。竟然说我字体不够

竟然说我字体不够

竟然说我字体不够

竟然说我字体不够

竟然说我字体不够

竟然说我字体不够

转载于:https://www.cnblogs.com/jkinglwj/p/6833051.html

自己写的轮播插件仿多玩相关推荐

html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件学习要点: 1.轮播插件本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
【Vue轮播插件】常用的vue轮播插件整理
写在前面: 现成的轮播插件是很方便,如果只是对文本类的数据进行轮播就很容易满足需求.但是,实际开发中,表格中可能还嵌套了自己封装的组件,组件中又是通过echarts图表来实现的.这个时候,这些vue插 ...
轮播移动端 html,移动端h5如何使用轮播插件swipe
移动端h5如何使用轮播插件swipe 发布时间:2020-07-16 15:36:34 来源:亿速云阅读:100 作者:Leah 本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼 ...
支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
轮播插件——flexslider
轮播插件--flexslider, 首先,当我们需要轮播插件的时候呢,去浏览器中找自己需要的轮播插件,比如,搜索关键词"JQuery轮播插件",就会出来很多网站,选一个点进去,预览 ...
fwslider--属于自己的一个图片轮播插件
一直在学习,一直在提升,一直在想什么时候自己也能写个简单的图片轮播啊? 终于,我写出来了,虽然没有别人写的那么牛逼,我也没有办法和大牛比,所以跟自己比就好了,自己有提升就很开心,这个图片轮播写出来一段 ...

自己写的轮播插件仿多玩

自己写的轮播插件仿多玩相关推荐

最新文章

热门文章

自己写的 轮播插件 仿多玩

自己写的 轮播插件 仿多玩相关推荐

最新文章

热门文章

自己写的轮播插件仿多玩

自己写的轮播插件仿多玩相关推荐