文档章节

用jquery实现图片左右自动循环滚动

sunshinewyf
 sunshinewyf
发布于 2015/11/12 17:53
字数 496
阅读 3503
收藏 4

  最近要实现一个项目的一个图片循环左右滚动的效果,做了好久也没有搞出来,不是不会,而是忽略了一个细节。

百度了好久,也没有看出来有什么不同,定时器啥的都定义好了,然而它就是不动,简直是碉堡了,之后仔细看,才发现我的ul的样式设置得有问题,原理上应该是外层div的宽度固定,并且overflow属性设置为hidden,然而这并不够,还要设置ul的宽度大于外层div的宽度

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript test</title>
    <style type="text/css">
.picture{
    width:1030px;
    border:1px solid black;
    position: relative;
    height: 120px;
    margin: 10px auto 0;
    overflow: hidden;
}
.picture ul{
    position: relative;
    padding: 0;
    width: 3062px;
    margin:0;
}
.picture li{
    width: 162px;
    height: 100px;
    float: left;
    display: inline-block;
    margin:10px 9.4px 10px 0;
}
.picture li:first-child{
    margin-left: 0;
}
.picture li:last-child{
}
.picture li img{
    height: 100%;
    width: 100%;
    border:none;
}


    </style>
</head>
<body>
      <div id="picture">
          <ul id="area1">
                <li><img src="5.jpg" alt=""></li>
                <li><img src="6.jpg" alt=""></li>
                <li><img src="7.jpg" alt=""></li>
                <li><img src="8.jpg" alt=""></li>
                <li><img src="1.jpg" alt=""></li>
                <li><img src="2.jpg" alt=""></li>
                <li><img src="3.jpg" alt=""></li>
                <li><img src="2.jpg" alt=""></li>
                <li><img src="3.jpg" alt=""></li>
            </ul>
        </div>
</body>
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
      var speed = 10;
      var picture = $('#picture');
      var ul = $('ul',picture);
      var li = $('li',ul);
      ul.append(li.slice(0,6).clone()) ;
      alert(ul.width());
       var timer = setInterval(Marquee,speed);
       alert(picture.scrollLeft());

       picture.hover(function() {
                clearInterval(timer);
                },function(){
                //离开继续调用
                timer=setInterval(Marquee,speed);
                });
       function Marquee(){
              if(picture.scrollLeft()>= 1540){
                picture.scrollLeft(0);
            }
            else
            {
                picture.scrollLeft(picture.scrollLeft()+1);
            }
      }
     console.log(picture.scrollLeft());
 </script>
</html>

这些jquery代码相信一般的人都能看懂,这里就不解释了,有一点很关键,就是为了展示循环的效果,需要将页面中的li追加到已有的li后面,还有就是这里我的js代码picture.scrollLeft()>= 1540中设置的是1540,其实这个值是随便设的,只要你达到你想要的效果就行,还是掌握的知识不够精细啊

© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
7 个简单实用的 jQuery 图片播放器

在网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希...

tp_wire
2012/08/14
7.5K
5
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 21世纪开...

晨曦之光
2012/03/09
452
0
6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的j...

tp_wire
2012/07/04
6.5K
10
10 款提高开发效率的 jQuery/CSS3 组件

前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件。今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件。部分插件可以...

yykj
2013/10/29
577
2
10 个基于 jQuery/CSS3 的图片特效

jQuery作为理想的开源Javascript开发库,已经被广大前端开发者所接受和使用,由jQuery编写的图片插件也数不胜数。CSS3是最近几年刚兴起的新技术,CSS3的应用,可以让图片拥有非常绚丽的特效,...

ruby_chen
2013/10/26
641
0

没有更多内容

加载失败,请刷新页面

加载更多

秒杀系统思路

业务分析 技术挑战 请求响应要快:无论成功失败,需要尽快返回给用户 架构设计   前端:静态化   站点层:限制请求数   服务层:乐观锁写缓存   数据库CAP:读写高可用,一致性,扩容...

雷开你的门
20分钟前
7
0
最全的教育行业大数据解决方案,个个针对痛点

大数据的悄然兴起也带动了教育行业的革新,移动教育、云课堂等的出现,使得教育行业再次成为了可以中长期保持高景气的行业。然而,初涉数据领域的教育行业同时也面临着相当大的难题,还需要更...

朕想上头条
24分钟前
5
0
预约模块设计分析

1.预约功能描述: 预约是小程序中常见的一种商品管理系统,商家可根据商品或服务的特性,灵活设置预约细节,为用户提供线上预约服务,如场地预约,商品预定等,实现高效经营。 预约场景: ...

鱼煎
27分钟前
4
0
阿里云日志服务构建网站实时分析大盘实战

场景分析 挖掘数据价值是当前企业级网站共同面临的问题。买买网是一个电商平台网站,每天拥有大量的用户访问和购买记录。为了引导用户直接消费,提升购买率和转化率,不同的用户类别需要推荐...

阿里云官方博客
28分钟前
2
0
TL665xF-EasyEVM开发板硬件处理器、NAND FLASH、RAM

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
31分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部