jquery图片无缝滚动代码左右 上下无缝滚动图片

<!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=utf-8" />
<title>jquery图片无缝滚动代码左右上下无缝滚动图片</title>
<meta name="description" content="jquery图片无缝滚动插件制作左右无缝滚动图片和上下无缝滚动图片,一款简单的jQuery无缝滚动代码。" />
</head>

<body>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//图片滚动 调用方法 imgscroll({speed: 30,amount: 1,dir: "up"});
$.fn.imgscroll = function(o){
    var defaults = {
        speed: 40,
        amount: 0,
        width: 1,
        dir: "left"
    };
    o = $.extend(defaults, o);

    return this.each(function(){
        var _li = $("li", this);
        _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
        _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
        _li.css({position: "relative", overflow: "hidden"}); //li
        if(o.dir == "left") _li.css({float: "left"});

        //初始大小
        var _li_size = 0;
        for(var i=0; i<_li.size(); i++)
            _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);

        //循环所需要的元素
        if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
        _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
        _li = $("li", this);

        //滚动
        var _li_scroll = 0;
        function goto(){
            _li_scroll += o.width;
            if(_li_scroll > _li_size)
            {
                _li_scroll = 0;
                _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
                _li_scroll += o.width;
            }
                _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
        }

        //开始
        var move = setInterval(function(){ goto(); }, o.speed);
        _li.parent().hover(function(){
            clearInterval(move);
        },function(){
            clearInterval(move);
            move = setInterval(function(){ goto(); }, o.speed);
        });
    });
};
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* scrollleft */
.scrollleft{width:680px;padding:5px 20px 0px 20px;margin:20px auto;}
.scrollleft li{float:left;margin-right:7px;display:inline;width:158px;text-align:center;line-height:19px}
.scrollleft img{width:136px;height:100px;padding:10px;border:solid 1px #ddd;}
/* scrolltop */
.scrolltop{width:158px;height:438px;overflow:hidden;margin:20px auto;}
.scrolltop li{height:156px;overflow:hidden;text-align:center;line-height:19px}
.scrolltop img{width:136px;height:100px;padding:10px;border:solid 1px #ddd;}
</style>

<div class="scrollleft">
    <ul>
        <li>
            <a href="http://www.17sucai.com"><img width="136" height="100" alt="卷板" src="images/123a.jpg"/></a>
            <span>卷板</span>
        </li>
        <li>
            <a href="http://www.17sucai.com"><img width="136" height="100" alt="钢板" src="images/2146.jpg"/></a>
            <span>钢板</span>
        </li>
        <li>
            <a href="http://www.17sucai.com"><img width="136" height="100" alt="卷板" src="images/as12.jpg"/></a>
            <span>卷板</span>
        </li>
    </ul>
</div>

<div class="scrolltop">
    <ul>
        <li>
            <a href="http://www.17sucai.com"><img width="136" height="100" alt="卷板" src="images/123a.jpg"/></a>
            <span>卷板</span>
        </li>
        <li>
            <a href="http://www.17sucai.com"><img width="136" height="100" alt="钢板" src="images/2146.jpg"/></a>
            <span>钢板</span>
        </li>
        <li>
            <a href="http://www.17sucai.com"><img width="136" height="100" alt="卷板" src="images/as12.jpg"/></a>
            <span>卷板</span>
        </li>
    </ul>
</div>

<script type="text/javascript">
$(document).ready(function(){

    $(".scrollleft").imgscroll({
        speed: 40,    //图片滚动速度
        amount: 0,    //图片滚动过渡时间
        width: 1,     //图片滚动步数
        dir: "left"   // "left" 或 "up" 向左或向上滚动
    });

    $(".scrolltop").imgscroll({
        speed: 40,    //图片滚动速度
        amount: 0,    //图片滚动过渡时间
        width: 1,     //图片滚动步数
        dir: "up"   // "left" 或 "up" 向左或向上滚动
    });

});
</script> 

</body>
</html>
时间: 2024-10-07 11:22:05

jquery图片无缝滚动代码左右 上下无缝滚动图片的相关文章

html滚动代码marquee标签熟悉滚动代码大全上下左右(跑马灯效果)

使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direction="滚动方向">...</marquee> 2.滚动方式behavior(scroll:循环滚动,默认效果: slide:只滚动一次就停止

jquery文字垂直滚动代码实例

jquery文字垂直滚动代码实例: 文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂

新闻文字上下滚动代码

新闻文字上下滚动代码新闻文字上下滚动代码,滚动代码,新闻,文字.源于:http://www.huiyi8.com/gundongdaima/

js图片无缝滚动代码

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

图片切换特效(2):JS图片滚动代码(无缝、平滑)

转自:http://www.codefans.net/jscss/code/255.shtml <!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">

JS实现Li列表的无缝垂直文字滚动代码

非Table模式的新闻列表滚动,学习CSS的朋友可能都能做出这种效果来.运用了CSS中的Li列表标签,加上javaScript代码控制,完成完美的无缝滚动效果.在兼容性方面,在ie6,7,8,9,firefox等主流浏览器下均测试通过,用的时候您只需改变一下样式和大小,再将Js封装起来,用时候调用,就更简洁了,相信这款实用的文字滚动正是你需要的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http

图片左右循环连续滚动代码,解决marquee的留白问题

<marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION="LEFT" scrollamount=3 behavior="scroll" loop="-1" deplay="0"> <table> <tr> <td> <a href="htt

JS图片无间断滚动代码合集

JavaScript图片滚动代码合集,向上下左右四个方向的无缝滚动代码,前端设计开发时所能用的一个图片特效,你可只用其中的一种滚动.前端框架分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布