jQuery图片无缝滑动效果的两种实现方式
来源：互联网 发布：linux系统查看文件大小 编辑：程序博客网 时间：2024/06/05 18:53
这是一个非常实用的效果，原理也很简单，网上的插件也很多，但是在我看来别人的始终是别人的，于是，我自己也写了个demo，在这里和大家分享一下
效果：平滑、无缝衔接切换
原理：把第一张添加在最后张的后面，最后张添加在第一张的前面，当图片运动到最后张的时候（也就是添加的第一张）运动结束同时返回第一张
下面是第一种方法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.slider_wrap{width:800px;height:450px;position:relative;overflow:hidden;margin:20px auto;}.slider_wrap .slider_content{width:4000px;height:100%;position:absolute;top:0;}.slider_wrap .slider_item{width:800px;height:100%;float:left;}.slider_wrap .slider_item img{width:100%;height:100%;}.slider_wrap .slider_btn{position:absolute;padding:10px;background:#ccc;top:207px;}.slider_wrap .slider_btn.slider_prev{left:0;}.slider_wrap .slider_btn.slider_next{right:0;}.slider_wrap .slider_btnList{width:100%;position:absolute;bottom:5px;left:0;text-align:center;}.slider_wrap .btnList{width:10px;height:10px;display:inline-block;background:#fff;border-radius:50%;margin:0 3px;}.slider_wrap .btnList.active{background:#ccc;}</style></head><body><div class="slider_wrap"><div class="slider_content"><div class="slider_item"><img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/15/c6/24496455_1376533836899_800x600.jpg" alt=""></div><div class="slider_item"><img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561035_1376699709480_800x600.jpg" alt=""></div><div class="slider_item"><img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/0F/ChMkJ1ZpMZGIB4seAB2BJTKeeGUAAF_IwH1XDcAHYE9922.jpg" alt=""></div><div class="slider_item"><img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561037_1376699725171_800x600.jpg" alt=""></div><div class="slider_item"><img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJ1bKxo2IUKlMABBGn3PconAAALHnABsvKEAEEa3344.jpg" alt=""></div></div><div class="slider_btn slider_prev">prev</div><div class="slider_btn slider_next">next</div></div></body><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script>$(document).ready(function(){var setting = {'index':0,'interval':3000,'duration':500,'autoPlay':true};var sliderWrap = $(".slider_wrap");var sliderCont = sliderWrap.find(".slider_content");var sliderItem = sliderWrap.find(".slider_item");var sliderPrev = sliderWrap.find(".slider_prev");var sliderNext = sliderWrap.find(".slider_next");//创建点击按钮var btnListDom = '';sliderItem.each(function(){btnListDom += '<div class="btnList"></div>';});var sliderBtnList = '<div class="slider_btnList">'+btnListDom+'</div>';sliderWrap.append(sliderBtnList);var btnList = sliderWrap.find('.btnList');var sliderWidth = sliderWrap.width();//最后一张添加到第一张前面，第一张添加到最后一张后面var firstItem = sliderItem.first().clone();var lastItem = sliderItem.last().clone();sliderCont.append(firstItem).prepend(lastItem);sliderItem = sliderCont.children();var index = 0 ;//这里的长度是程序添加后的长度var length = sliderItem.length;var timer = null;sliderCont.css({'width':length*sliderWidth,'left':-sliderWidth});showBtn();sliderPrev.click(function(){animateFn('prev');});sliderNext.click(function(){animateFn('next');});btnList.on('click',function(){index = $(this).index();animateFn('list');});sliderWrap.hover(clearIntervalFn,setIntervalFn);setIntervalFn();function showBtn(){btnList.eq(index).addClass('active').siblings().removeClass('active');}function animateFn(dir){//判断是否正在动画if(!sliderCont.is(":animated")){// 判断传入参数是否为上一张if(dir === 'prev'){index -- ;//如果当前张是否为第一张 运动到添加的最后一张，运动结束回调left值为最后张if(index<0){sliderCont.animate({'left':0},setting.duration,function(){$(this).css('left',-(length-2)*sliderWidth);});index = length-3;}else{move();}}else if(dir === 'next'){index ++ ;if(index>length-3){sliderCont.animate({'left':-(length-1)*sliderWidth},setting.duration,function(){$(this).css('left',-sliderWidth);});index = 0;}else{move();}}else if(dir === 'list'){move();}showBtn();function move(){sliderCont.animate({'left':-(index+1)*sliderWidth},setting.duration);}}}function setIntervalFn(){clearIntervalFn();if(setting.autoPlay){timer = setInterval(function(){animateFn('next');},setting.interval);}}function clearIntervalFn(){clearInterval(timer)}});</script></html>下面是第二种方法，这里用的是css3的transition过渡，但是这里要注意的是，在移动到最后一个的时候添加一个和多度时长相同的计时器来回到第一个 ，再利用transitionend事件来控制用户点击过快出现bug
下面是代码部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.slider_wrap{width:800px;height:450px;position:relative;overflow:hidden;margin:20px auto;}.slider_wrap .slider_content{width:4000px;height:100%;position:absolute;top:0;}.slider_wrap .slider_item{width:800px;height:100%;float:left;}.slider_wrap .slider_item img{width:100%;height:100%;}.slider_wrap .slider_btn{position:absolute;padding:10px;background:#ccc;top:207px;}.slider_wrap .slider_btn.slider_prev{left:0;}.slider_wrap .slider_btn.slider_next{right:0;}.slider_wrap .slider_btnList{width:100%;position:absolute;bottom:5px;left:0;text-align:center;}.slider_wrap .btnList{width:10px;height:10px;display:inline-block;background:#fff;border-radius:50%;margin:0 3px;}.slider_wrap .btnList.active{background:#ccc;}</style></head><body><div class="slider_wrap"><div class="slider_content"><div class="slider_item"><img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/15/c6/24496455_1376533836899_800x600.jpg" alt=""></div><div class="slider_item"><img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561035_1376699709480_800x600.jpg" alt=""></div><div class="slider_item"><img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/0F/ChMkJ1ZpMZGIB4seAB2BJTKeeGUAAF_IwH1XDcAHYE9922.jpg" alt=""></div><div class="slider_item"><img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/17/c2/24561037_1376699725171_800x600.jpg" alt=""></div><div class="slider_item"><img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJ1bKxo2IUKlMABBGn3PconAAALHnABsvKEAEEa3344.jpg" alt=""></div></div><div class="slider_btn slider_prev">prev</div><div class="slider_btn slider_next">next</div></div></body><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script>$(document).ready(function(){var setting = {'index':0,'interval':3000,'duration':500,'autoPlay':true};var sliderWrap = $(".slider_wrap");var sliderCont = sliderWrap.find(".slider_content");var sliderItem = sliderWrap.find(".slider_item");var sliderPrev = sliderWrap.find(".slider_prev");var sliderNext = sliderWrap.find(".slider_next");//创建点击按钮var btnListDom = '';sliderItem.each(function(){btnListDom += '<div class="btnList"></div>';});var sliderBtnList = '<div class="slider_btnList">'+btnListDom+'</div>';sliderWrap.append(sliderBtnList);var btnList = sliderWrap.find('.btnList');var sliderWidth = sliderWrap.width();//最后一张添加到第一张前面，第一张添加到最后一张后面var firstItem = sliderItem.first().clone();var lastItem = sliderItem.last().clone();sliderCont.append(firstItem).prepend(lastItem);sliderItem = sliderCont.children();var index = 0 ;//这里的长度是程序添加后的长度var length = sliderItem.length;var timer = null;var isTransition = true;sliderCont.css({'width':length*sliderWidth,'left':-sliderWidth});showBtn();sliderPrev.click(function(){animateFn('prev');});sliderNext.click(function(){animateFn('next');});btnList.on('click',function(){index = $(this).index();animateFn('list');});sliderWrap.hover(clearIntervalFn,setIntervalFn);setIntervalFn();function showBtn(){btnList.eq(index).addClass('active').siblings().removeClass('active');}function animateFn(dir){//判断是否正在动画if(isTransition){isTransition = false;var timer = null;// 判断传入参数是否为上一张if(dir === 'prev'){index -- ;//如果当前张是否为第一张 运动到添加的最后一张，运动结束回调left值为最后张if(index<0){sliderCont.css({'left':0,'transition':setting.duration+'ms'});setTimeout(function(){sliderCont.css({'left':-(length-2)*sliderWidth,'transition':'0ms'});isTransition = true;},setting.duration);index = length-3;}else{move();}}else if(dir === 'next'){index ++ ;if(index>length-3){sliderCont.css({'left':-(length-1)*sliderWidth,'transition':setting.duration+'ms'});setTimeout(function(){sliderCont.css({'left':-sliderWidth,'transition':'0ms'});isTransition = true;},setting.duration);index = 0;}else{move();}}else if(dir === 'list'){move();}showBtn();function move(){sliderCont.css({'left':-(index+1)*sliderWidth,'transition':setting.duration+'ms'});}sliderCont.on('transitionend webkitTransitionEnd mozTransitionEnd OTransitionEnd',function(){isTransition = true;});}}function setIntervalFn(){clearIntervalFn();if(setting.autoPlay){timer = setInterval(function(){animateFn('next');},setting.interval);}}function clearIntervalFn(){clearInterval(timer)}});</script></html>这个效果非常实用，需要的朋友在明白原理后自己封装成插件来使用吧，如果本文帮助到了你别忘了点个赞哟！
1 0
- jQuery图片无缝滑动效果的两种实现方式
- jQuery动画效果实现图片无缝连续滚动
- jQuery实现图片无缝滚动
- jquery实现的向上无缝循环滚动的新闻效果
- jQuery——图片无缝滚动效果
- css3实现图片横向无缝滚动的效果
- jQuery实现滑动效果
- 引导页圆点的滑动两种实现方式
- Android图片添加阴影效果的两种方式
- Android图片添加阴影效果的两种方式
- Android图片添加阴影效果的两种方式
- ViewPager 实现左右循环滑动图片的两种方法
- 使用ItemCreated事件和onmouseover两种方式 实现Repeater鼠标滑动效果
- JQuery实现漂亮的滑动门效果
- View滑动效果的七种实现方式
- jQuery+CSS3实现图片的无缝轮播
- JavaScript实现图片的滑动切换效果
- 滑动切换图片效果的实现
- openDeviceLocked
- Spring Cloud 配置服务消费者和断路器
- nsq topic和channel的区别
- GOF23的一些总结（十三）
- Blockskits (二)
- jQuery图片无缝滑动效果的两种实现方式
- SpringMVC @ResponseBody 返回json date 转换
- dllimport与dllexport作用与区别
- MySQL5.0+提示字段没有默认值(doesn’t have a default value)的解决方法
- Qt Qwdget 汽车仪表知识点拆解8 淡入效果
- java类加载 Constructor类
- mixsum
- libpcap的安装方法详解
- python基础之---import与from...import....
