jQuery实现一组图片循环滚动

本文实例为大家分享了jQuery实现一组图片循环滚动的具体代码，供大家参考，具体内容如下

效果：

代码：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>实现一组图片的循环滚动</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 1066px;/*2张图片的总宽度*/
                height: 300px;
                background-color: #000000;
                margin: 120px auto;
                overflow: hidden;/*超出的隐藏*/
                border: 1px solid #00ff37;
            }
            ul{
                width: 3198px; /*6张图片的总宽度 放在一行*/
                height: 300px;
                list-style: none;
                background-color: #000000;
            }
            ul>li {
                float: left;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
        <script type="text/javascript">
            $(function () {
                //编写一个可以让图片自动循环滚动的函数(弄一个定时器，回调函数里设置它的marginLeft)
                var timer
                var offset = 0 //待会用这个变量设置它的marginLeft (js代码可以不写分号的，我是懒得写了)
                function autoRun(){
                    timer = setInterval(function () {
                        offset += -10 //这是marginLeft
                        if(offset <= -2132){
                            //滚动了四张图片 接着滚动
                            offset = 0
                        }
                        $("ul").css({
                            marginLeft:offset
                        })
                    },131.4)
                }
                autoRun()//滚动起来
                //监听li的移入 移出事件
                $("li").hover(function () {
                    //鼠标指针放上面 不让ta滚动(停掉这个定时器)
                    clearInterval(timer)
                    //鼠标指针没有放上面的图片 给他们一个黑色的背景 这样显得选中的这个亮
                    $(this).siblings().fadeTo(120,0.33)
                    //当前的这个图片亮
                    $(this).fadeTo(120,1)
                },function () {
                    autoRun() //滚动
                    $("li").fadeTo(120,1) //1-->全亮
                })

            })
        </script>
    </head>
    <body>
        <div>
            <ul>
                <li>
                    <img src="img/111.jpg">
                </li>
                <li>
                    <img src="img/222.jpg">
                </li>
                <li>
                    <img src="img/333.jpg">
                </li>
                <li>
                    <img src="img/444.jpg">
                </li>
                <li>
                    <img src="img/111.jpg">
                </li>
                <li>
                    <img src="img/222.jpg">
                </li>
            </ul>
        </div>
    </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find

  • js jquery做的图片连续滚动代码

    核心代码如下,大家可以参考 复制代码 代码如下: <script src="/js/jquery.js"></script>  <script>  $(document).ready(function(){ $(".bannerbutton li").each(                       function(){                              $(this).click(        

  • 基于jquery实现点击左右按钮图片横向滚动

    基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

  • 多种JQuery循环滚动文字图片效果代码

    多种JQuery循环滚动文字图片效果代码

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可以的,如下(效果图上传后都加速了,实际效果比这个要慢很多): html代码如下: <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <

  • 基于jQuery的图片左右无缝滚动插件

    在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

  • jquery实现图片左右间隔滚动特效(可自动播放)

    jquery实现图片左右间隔滚动特效(可自动播放)

    复制代码 代码如下: <!DOCTYPE html > <html> <head> <meta content="text/html; charset=utf-8" /> <title>图片左右间隔滚动Jquery特效</title> <style type="text/css"> *{ margin:0px; padding:0px; font-size:12px;} a{ tex

  • JQuery循环滚动图片代码

    复制代码 代码如下: function refresh() { var s = $(".box1"); if (!s.is(":animated")) $(".box1").animate({ marginLeft: "0px" }, "slow", function () { $('.box1 img:first').before($('.box1 img:last')); $(".box1&q

  • 基于jQuery图片平滑连续滚动插件

    * 此插件要求运行在jQuery v1.3 或更高版本上 * 插件可以实现图片平滑向上或向左滚动 * 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件 * 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术

  • jQuery循环滚动展示代码 可应用到文字和图片上

    jQuery循环滚动展示代码 可应用到文字和图片上

    看见有的同学用 Adam Cai 的代码,感觉稍显复杂而且不够 jQuery.我用只依靠 jQuery 入门的思路写了一版,代码更少使用也更简单. 在线演示: http://demo.jb51.net/js/2012/jquery_xhpic/[JavaScript]代码 复制代码 代码如下: $(document).ready(function(){ $("#sItem li:not(:first)").css("display","none"

随机推荐