各种轮播特效代码，无缝轮播与自动轮播
有时候做网页的时候会遇到特效，需要js来写，个人对js并不是很擅长，所以遇到需要用js写的特效都比较惆怅，把几组不同类型的代码保存下来，以后遇到就可以粘贴复制了，废话不多说了，下面步入正题
先看一下运行的效果
自动往上走的
来看一下代码部分吧
html文件中
<!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=gb2312" /> <title>文字无缝滚动效果代码</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="http://www.jq22.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.list_lh li:even').addClass('lieven'); }) $(function(){ $("div.list_lh").myScroll({ speed:40, //数值越大，速度越慢 rowHeight:68 //li的高度 }); }); </script> </head> <body> <div class="box"> <div class="bcon"> <h1><b>领号实时播报</b></h1> <!-- 代码开始 --> <div class="list_lh"> <ul> <li> <p><a href="#">1000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">2000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">3000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">4000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">5000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">6000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">7000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">8000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">9000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">1000000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">1100000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> <li> <p><a href="#">1200000</a><a href="#" class="btn_lh">领号</a><em>获得</em></p> <p><a href="#" class="a_blue">jquery使用方法1</a><span>17:28:05</span></p> </li> </ul> </div> <!-- 代码结束 --> </div> </div> </body> </html>
然后这里面有个css和js文件
css文件中代码
/* CSS Document */ *{margin:0;padding:0;font-size:12px;} body{ background:none;} input,button,select,textarea{outline:none;} ul,li,dl,ol{list-style:none;} a{color:#666; text-decoration:none;} .box{ width:980px; margin:0 auto;} .bcon{ width:270px; border:1px solid #eee; margin:30px auto;} .bcon h1{ border-bottom:1px solid #eee; padding:0 10px;} .bcon h1 b{ font:bold 14px/40px '宋体'; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;} .list_lh{ height:400px; overflow:hidden;} .list_lh li{ padding:10px;} .list_lh li.lieven{ background:#F0F2F3;} .list_lh li p{ height:24px; line-height:24px;} .list_lh li p a{ float:left;} .list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;} .list_lh li p span{ color:#999; float:right;} .list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;} .btn_lh:hover{ color:#fff; text-decoration:none;} .btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}
js文件代码
// JavaScript Document (function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: '-=1' },0,function(){ var s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i){ var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery);
这样就可以实现了，最关键的就是不要忘了引入jQuery包
下面再来看一个轮播特效
像是这样的，他会自动一直向左边走
下面来看它的代码
html部分
<!-- 产品展示--> <div class="row" align="center"> <div class="col-sm-12" align="center" style="margin-top:20px;"> <span class="d"><b>产品展示</b></span> </div> </div> <div class="row a4" align="center" > <div class="container"> <div id="m" style="overflow:hidden;width:100%;text-align:center;margin-top:5px; margin-bottom:5px;"> <table cellspacing="0" cellpadding="3" align="center" border="0"> <tr> <td id="m_1" valign="top"> <table width="100%" height="100" border="0" cellpadding="2" cellspacing="0"> <tr> <td><img width="246" height="185" src="img/风格图片1.png" border="0"/></td> <td><img width="246" height="185" src="img/风格图片2.png" border="0"/></td> <td><img width="246" height="185" src="img/58f99332cab69_1024.jpg" border="0"/></td> <td><img width="246" height="185" src="img/风格图片3.png" border="0"/></td> <td><img width="246" height="185" src="img/5386424787dbd.jpg" border="0"/></td> <td><img width="246" height="185" src="img/3.jpg" border="0"/></td> <td><img width="246" height="185" src="img/行业3.png" border="0"/></td> <td><img width="246" height="185" src="img/4.jpg" border="0"/></td> <td><img width="246" height="185" src="img/58f99332cab69_1024.jpg" border="0"/></td> </tr> </table> </td> <td id="m_2" valign="top"></td> </tr> </table> </div> </div> </div> <div class="col-sm-12" style="height:40px"></div>
js部分
var speed=30; m_2.innerHTML=m_1.innerHTML; function Marquee(){ if(m.scrollLeft>=m_1.scrollWidth){ m.scrollLeft=0; } else{ m.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); m.onmouseover=function(){clearInterval(MyMar);} m.onmouseout=function(){MyMar=setInterval(Marquee,speed);}
这样就ok了，先分享这两种，以后再更新更多的特效
