【特效】挺不错的一个轮播图
来源：互联网 发布：淘宝唐人阁vip账号 编辑：程序博客网 时间：2024/04/29 23:41
使用前必看：图片换成自己的，样式调成自己喜欢的也可以，一般的项目够用了，如果图片有点多推荐使用插件 swiper
第一种：Bootstrap 无缝轮播版（超级简单版）
特点：无缝轮播、鼠标移入图片暂停
注意：每张图片的宽高要求一致。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap-无缝轮播</title> <link href="css/bootstrap.min.css" rel="stylesheet"></head><body> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"> <!-- 白色圆圈 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- 图片和标题 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/1.jpg"> <!--标题不要可省略--> <div class="carousel-caption">标题1</div> </div> <div class="item"> <img src="img/2.jpg"> <!--标题不要可省略--> <div class="carousel-caption">标题2</div> </div> <div class="item"> <img src="img/3.jpg"> <!--标题不要可省略--> <div class="carousel-caption">标题3</div> </div> <div class="item"> <img src="img/4.jpg"> <!--标题不要可省略--> <div class="carousel-caption">标题4</div> </div> </div> </div> <script src="js/jquery-1.11.3.js"></script> <script src="js/bootstrap.min.js"></script></body></html>第二种：比较实用的jQuery 有缝轮播版
特点：有缝轮播、鼠标移入图片不暂停
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> /*通用样式*/ html,body{ font: 12px 'microsoft yahei',arial,'SimSun',Tabhoma; text-align: left; } html,body,h1,h2,h3,h4,h5,h6, div,p,dl,dt,dd,ol,ul,li, table,th,td,tr,caption, a,img,span,strong,var,em,small, i,sub,sup,form,input,textarea, select,option,iframe,pre{ margin: 0; padding: 0; } ul,ol,li{ list-style: none; } img{ border: 0; } input,select,textarea{ outline:0; } textarea{ resize:none; overflow: auto; } table{ border-collapse: collapse; border-spacing: 0; } th,strong,var,em,i,small{ font-weight: normal; font-style: normal; } a{ text-decoration: none; } /*公共样式*/ .roll,#out,#out2,.con img{ width:870px; height:255px; } .roll{ position: relative; margin:20px auto 0; } #out,#out2,.con,.nav{ overflow:hidden; } /*其它样式*/ .con{ width: 8000px; height: 255px; } .con img{ float: left; } .nav{ position: absolute; bottom: 5px; left: 45%; } .nav li{ width: 16px; height: 16px; border-radius: 50%; background: #B9D4C8; margin: 0 5px; float: left; cursor: pointer; } .left,.right{ position: absolute; top:120px; left:0; width: 30px; height: 40px; font-size: 30px; text-align: center; line-height: 40px; color:#fff; background: #000; cursor: pointer; opacity:0.5; display: none; } .right{ position: absolute; top:120px; left:840px; } #out:hover .left,#out:hover .right{ display: block; } .nav .select{ background: #5CB85C; } </style></head><body> <!-- 最外层包裹元素，用来控制整个大图的位置以及作为子元素定位的参考 --> <div class="roll"> <div id="out"> <!-- 包裹图片，宽要比所有图片的总宽大， --> <div class="con"> <!--<img src="img/4.jpg"/>--> <img src="img/1.jpg"/> <img src="img/2.jpg"/> <img src="img/4.jpg"/> <img src="img/4.jpg"/> <!--<img src="img/1.jpg"/>--> </div> <!-- 放page小圆点 定位控制 z-index比图片大--> <ul class="nav"> <li class="select"></li> <li></li> <li></li> <li></li> </ul> <!-- 左右键 定位控制 z-index比图片大--> <p class="left"><</p> <p class="right">></p> </div> </div> <script src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> $.fn.extend({ datu:function(){ //封装大图滚动函数 var obj=$(this); //先获取这个对象 var fir=obj.find('.con img:first').clone(); //克隆第一张图 var las=obj.find('.con img:last').clone(); //克隆最后一张图 obj.find('.con').append(fir); //最后面插入克隆的第一张图 obj.find('.con').prepend(las); //最前面插入克隆的最后一张图 var imgw=Math.floor(obj.find('.con img').width()); //获取一张图的宽度 var out=obj.find('#out'); //获取元素目标 out.scrollLeft(imgw); //初始化到起点 var x=1,y=0; //图多一步故为1(相比page,中间底部的小圆点) var time1=null; //声明变量 var img=obj.find('.con img'),li=obj.find('.nav li'); //一次性获取元素，优化性能 var left=obj.find('.left'),right=obj.find('.right'); //一次性获取元素，优化性能 function huan(){ //换一张图函数 clearInterval(time1); //先清除计时器 time1=setInterval(function(){ x++; if(x==img.length){ x=2;//跳到第二张 out.scrollLeft(imgw);//滚动条归零 } y++; if(y==li.length){//小圆点走自己的一套 y=0; } bian(); //执行滚动函数 },8000) //控制大图滚动的时间节奏 } function bian(){ //一张图走完的过程函数 li.eq(y).addClass('select').siblings().removeClass('select'); //小圆点走自己的一套 out.animate({scrollLeft:imgw*x}); //jq的动画控制滚动条，这里是x而不是x-1，是因为： // 0 ——> 1,1 ——> 2,2 ——> 3 的顺序，在前一次的基础上再走 // 这里用animate动画就可以自己添加其他效果了 } left.click(function(){ //左点击 clearInterval(time1); //先清除计时器 x--; if(x<0){ x=img.length-3;//length减去本身比x（从0开始）多的1，再减去新增的最后的那张1，再减去要跳到倒数第二张产生的1，共为3 out.scrollLeft(imgw*(x+1),10);//滚动条加1是因为（出现第x张，还要注意插入到最前面的那一张x=5，则滚的是6张图的距离） } y--; if(y<0){ y=li.length-1;// y一直减到最左边时，再点击再减就要跳到最右边 0 1 2 3 length为4，下标为3，故 li.length-1; } bian() //一张图走完的过程函数 huan() //换一张图函数 }) right.click(function(){ //右点击 clearInterval(time1); //先清除计时器 x++; if(x==img.length){ x=2; out.scrollLeft(imgw); } y++; if(y==li.length){ y=0; } bian() //一张图走完的过程函数 huan() //换一张图函数 }) li.click(function(){ //page小圆点onmouseover事件 clearInterval(time1); //先清除计时器 y=$(this).index(); //y管y的 x=y+1; //y为1时，看到的是第一张图，实际上前面还有一张图 ——>此时 x=y+1=1+1=2， bian() //一张图走完的过程函数 huan() //换一张图函数 }) huan(); //自动执行，进页面就开始滚 } }) $(function(){ $('.roll').datu(); //封装完毕 使用时只更换roll 标签即可 $('.roll2').datu(); }) // 样式自己调成想要的，其他复制即可。 </script></body></html>第三种：底部有缝轮播（适用于小图片循环轮播）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap-无缝轮播</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body,ul,li{ margin: 0; padding: 0; } img{ width: 200px; height: 130px; } #div1 { width:1200px; height:130px; margin: 0 auto; position:relative; overflow:hidden; } #div1 ul { position:absolute; left:0; top:0; } #div1 ul li { float:left; list-style:none; } #a{ width: 1200px; margin: 0 auto; margin-top:100px; } #a a{ display: inline-block; width: 33.1%; text-decoration: none; padding: 5px; background: #d2620b; color: #fff; text-align: center; margin-bottom: 20px; } </style></head><body><div id="a"> <--javascript:void(0):代表a标签不做任何动作--> <a href="javascript:void(0)" id="id1"><</a> <a href="javascript:void(0)" id="id3">||</a> <a href="javascript:void(0)" id="id2">></a></div><div id="div1"> <ul> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> </ul></div> <script src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("div1"); var oUl=document.getElementsByTagName("ul")[0]; var oLi=document.getElementsByTagName("li"); oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.style.width=oLi[0].offsetWidth*oLi.length+"px"; //移动速度 var speed=2; //控制滚动的方向 var a1=document.getElementById("id1"); var a2=document.getElementById("id2"); var a3=document.getElementById("id3"); a1.onclick=function(){ speed=2; } a2.onclick=function(){ speed=-2; } a3.onclick=function(){ speed=0; } //鼠标移开 function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left="0"; } if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+"px"; } oUl.style.left=oUl.offsetLeft-speed+"px"; } //定时器 控制移动的时间 var timer=setInterval(move,30); //鼠标移入 oDiv.onmouseover=function(){ clearInterval(timer); } //鼠标移开 oDiv.onmouseout=function(){ timer=setInterval(move,30); } } </script></body></html>第四种：jQuery+CSS 无缝轮播版—简单易懂
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .bg{ background: #fff; } ol,ul{ list-style: none; } #play{ width: 1200px; height:532px; position: relative; overflow: hidden; margin: 5% auto } #play #ul{ position: absolute; } #play #ul li{ float: left; } #play #ul li img{ width: 1200px; height:532px; } #play #ol{ width:100px; position: absolute; top:500px;left:550px; } #play #ol li{ width: 15px; height: 15px; border-radius: 50%; float: left; margin: 3px; border:1px solid #fff; cursor: pointer } #play #prev,#play #next{ display:none; border:none; position: absolute; top:250px; width:30px; font-size: 40px; background:rgba(0,0,0,0.5); cursor: pointer } #play #prev{ left:15px; } #play #next{ right:15px; } </style></head><body> <div id="play"> <ul id="ul"> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> </ul> <ol id="ol"> <li class="bg"></li> <li></li> <li></li> <li></li> </ol> <button id="prev"><</button> <button id="next">></button> </div><script src="js/jquery-1.11.3.js"></script><script> // 获取第一个图片 节点对象 var firstImg = $('#ul li').first().clone(); // 放在 ul 的最后 $('#ul').append(firstImg).width($('#ul li').length*$('#ul img').width()); var i = 0; var timer; autoPlay(); // 下一张 $('#next').click(function(){ i++; moveImg(i); }); // 上一张 $('#prev').click(function(){ i--; moveImg(i); }); // 自动播放 function autoPlay(){ timer = setInterval(function(){ i++; moveImg(i); }, 5000); } //操作图片 function moveImg(num){ // 如果是最后一张图片我们怎么办 if(i==$('#ul li').length){ i = 1; $('#ul').css({left:0}); } // 是第一张 if(i==-1){ i=$('#ul li').length-2; $('#ul').css({left:($('#ul li').length-1)*-800}); } // 移动图片 $('#ul').stop().animate({left:i*-1200},400); // 换小点的标记 if(i==($('#ul li').length-1)){ $('#ol li').eq(0).addClass('bg').siblings().removeClass('bg'); }else{ $('#ol li').eq(i).addClass('bg').siblings().removeClass('bg'); } } //鼠标移入图片显示左右按钮 反之 $('#play').mouseover(function(){ $('#prev').show(); $('#next').show(); clearInterval(timer); }).mouseout(function(){ $('#prev').hide(); $('#next').hide(); autoPlay(); }); // 点击小图标 跳转到指定的页面 $('#ol li').click(function(){ i = $(this).index(); moveImg(i); });</script></body></html> 0 0
- 【特效】挺不错的一个轮播图
- 一个不错的JS特效网站
- 百度联盟中的一个不错的图片切换特效
- 不错的网页特效网站
- 不错的toast特效总结
- 最近收集的一些不错javascript特效
- 几个不错的jquery导航菜单特效
- 【js特效】一款不错的对联广告
- 【js特效】一款不错的相册效果
- 不错的向下缓冲式菜单特效
- 10个不错的jquery幻灯片特效
- 一个挺不错的网站,参考一下
- 分享一个挺不错的Git视频教程
- 给一个配置挺不错的
- 一个不错的计数器
- 一个不错的效果
- 一个不错的网站
- 一个不错的序言
- 第一次安装caffe的步骤
- Android 使用webview 提示 net:ERR_CACHE_MISS错误
- play 中的 restful webservice的实现
- Python图表绘制：matplotlib绘图库入门
- 上传本地代码到github跟着步骤操作就行
- 【特效】挺不错的一个轮播图
- SQL拼串查询
- react-native移植到android项目中详细步骤
- 团体程序设计天梯赛-练习集-L3-004. 肿瘤诊断(三维bfs)
- Unix网络编程 之 进程与信号(2)
- JQ点击区域,变成input框,失去焦点在变回来
- 有一头母牛，它每年年初生一头小母牛。每头小母牛从第四个年头开始，每年年初也生一头小母牛...
- 选择排序
- Android根据内容提供者获得联系人信息实例
