1. 技术文章
  2. 各种轮播特效代码，无缝轮播与自动轮播

各种轮播特效代码，无缝轮播与自动轮播

由 核能气质少年 提交于 2020-04-02 18:09:03

有时候做网页的时候会遇到特效，需要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了，先分享这两种，以后再更新更多的特效

标签
speed
轮播
border
margin
em
jquery
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!