循环滚动

样式:

#hotsel{position: relative; width: 100%; overflow: hidden;}
    #hotselul{width:92%;margin:auto; height: 250px; overflow: hidden;}
    .rxtj{ margin:20px auto; position: relative;width:2000%;}
    .rxtj li{float: left; margin-right:20px; width: 160px; height: 240px;display: block;}
    .rxtj li p{font-size: 14px; text-align: center; width: 100%; margin-bottom:0px;}
    .rxtj img{margin-bottom:10px;}
    .buypre{position: absolute;left: 0px;top:80px; cursor: pointer; display: block; z-index: 9999;}
    .buynext{position: absolute;right: -0px;top:80px; cursor: pointer;  display: block;z-index: 9999;}

html:    <div id="hotsel">
                <div id="hotselul">
                    <ul class="rxtj">
                        <li><img src="images/buy_15.jpg">
                            <p>百度竞价托管</p>
                            <p class="redtext">¥8,800/年起</p>
                        </li>
                        <li><img src="images/buy_17.jpg">
                            <p>新竞价大师</p>
                            <p class="redtext">¥3800起</p>
                        </li>
                        <li><img src="images/buy_19.jpg">
                            <p>百度内容营销</p>
                            <p class="redtext">¥3600/套</p>
                        </li>
                        <li><img src="images/buy_21.jpg">
                            <p>企业百科</p>
                            <p class="redtext">¥1500/个</p>
                        </li>

<li><img src="images/buy_22.jpg">
                            <p>百度口碑 <span class="redtext">限时特价</span></p>
                            <p class="redtext">¥0,1/100条</p>
                        </li>
                        <li><img src="images/buy_23.jpg">
                            <p>微信代运营</p>
                            <p class="redtext">¥4800</p>
                        </li>
                        <li><img src="images/buy_24.jpg">
                            <p>网站托管服务</p>
                            <p class="redtext">¥1800起</p>
                        </li>
                        <li><img src="images/buy_25.jpg">
                            <p>400电话</p>
                            <p class="redtext">¥0.1/个</p>
                        </li>

</ul>
                </div>
                <span class="buypre"><img src="images/buyl.jpg"></span>
                <span class="buynext"><img src="images/buyr.jpg"></span>
            </div>

script:

<script type="text/javascript">
        $(function() {
            var _index5 = 0;
            $(".buynext img").click(function() {
                _index5++;
                var len = $(".rxtj li").length;
                if (_index5 + 5 > len) {
                    $(".rxtj").stop().append($(".rxtj").html());
                }
                $(".rxtj").stop().animate({
                    left: -_index5 * 180
                }, 1000);
            });
            $(".buypre img").click(function() {
                if (_index5 == 0) {
                    $(".rxtj").prepend($(".rxtj").html());
                    //$(".rxtj").css("left","-1300px");
                    _index5 = 6
                }
                _index5--;
                $(".rxtj").stop().animate({
                    left: -_index5 * 180
                }, 1000);
            });
        })
    </script>

时间: 2024-10-06 04:47:13

循环滚动的相关文章

循环滚动图片

1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后

【Android】ViewPager实现无限循环滚动

最近做的一个项目,客户要求在ViewPager实现的主页面中滑动到最后一页后继续滑动能返回到第一页,也就是实现无限循环滚动,效果如下: 看了下ViewPager没有滑到尽头的回调方法,因此想到的解决方案是,在原来的最后一页之后再加上一个第一页,也就是原本有编号为a1,b,c的三个页面,现在在最后面再加一个a页面,变为a1.b.c.a2四个页面,然后使用OnPageChangeListener中的onPageSelected方法来监听到页面切换,当发现是从第三个页面(c)切换到第四个页面(a1)时

循环滚动scrollView---最后一张图片后面紧跟着第一张图片,第一张图片前面挨着最后一张图片

问题描述:循环滚动scrollView---最后一张图片后面紧跟着第一张图片,第一张图片前面挨着最后一张图片,形成环,循环切换图片. 效果图如下: 具体代码如下: //  ViewController.m #import "ViewController.h" #define kW 375 #define kH 500 #define kCount 11 @interface ViewController () <UIScrollViewDelegate> @end @imp

Swift - 多层无缝循环滚动背景(SpriteKit游戏开发)

在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. 样例说明: 1,本样例背景分为两层.第一层更靠近游戏窗口的色彩更鲜艳,移动速度也更快一些.第二层由于要模拟远处的场景,所以颜色也更淡一些,对比度更弱一些,移动速度也更慢一些. 2,要实现循环滚动.我们准备的背景图首尾是要可以无缝衔接的. 3,判断需要多少张无缝衔接图来组成背景?判断标准是:当第一张图

封装scrollView 循环滚动,tableViewCell(连载) mvc

封装 封装 封装 ... 封装的重要性太重要了 给大家在送点干货 从一个项目中抽取出来的,和大家一起分享 封装scrollView 循环滚动,tableViewCell(连载) 明天还会更新 tableView 的封装 使用了mvc 设计模式 代码如下: // // GPMainController.m #import "GPMainController.h" #import "GPAdsView.h" #import "GPSubViewCell.h&q

JS实例——间歇循环滚动

间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="关

css+jQuery制作的文字循环滚动代码

css+jQuery制作的文字循环滚动代码,尺寸只需要在css中调整即可,另外别忘记在function里面修改相关参数 百度网盘下载

简单图片循环滚动

<marquee style="margin-top:5px;" behavior="alternate" loop="1" onmousemove="stop()" onmouseout="start()"> <img src="Image/0.jpg" width="180px"; height="180px" /> &

js-间歇循环滚动

HTML部分: <!DOCTYPE html> <html> <head> <meta charset="gb2312"/> <title>间歇循环滚动</title> </head> <body> <div id="box"> <ul id="con1"> <li>111111111111</li> &

html+css+javascript实现列表循环滚动示例代码

使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内容 1.关键代码:javascript: 代码如下: <script type="text/javascript"> var dome=document.getElementById("dome"); //获取节点 var dome1=document.ge