jQuery无缝滚动图片代码

最新推荐文章于 2022-11-01 11:27:13 发布

转载最新推荐文章于 2022-11-01 11:27:13 发布 · 427 阅读

JavaScript 同时被 2 个专栏收录

40 篇文章

订阅专栏

jquery特效

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的连续水平滑动图片轮播效果。通过设置特殊的图片列表宽度并利用JavaScript控制滚动条的位置，实现了平滑的自动滚动效果。此外，该轮播还支持鼠标悬停暂停、离开后继续播放的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!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>连续滑动</title>

<style type="text/css">
* { margin:0; padding:0; }
img { border: none; }
#slide { overflow:hidden; width:900px; margin:100px auto; }
ul { list-style:none; }
li { float:left; }
.slideul1 { width:3999px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<body>
<div id="slide">
  <ul class="slideul1">
    <li class="slideli1">
      <ul class="slideul2">
        <li> <a href="#"><img src="images/pic.jpg" width="200" height="100" /></a> </li>
            <li> <a href="#"><img src="images/wpic.jpg" width="200" height="100" /></a> </li>
            <li> <a href="#"><img src="images/pic.jpg" width="200" height="100" /></a> </li>
            <li> <a href="#"><img src="images/pic.jpg" width="200" height="100" /></a> </li>
            <li> <a href="#"><img src="images/piwc.jpg" width="200" height="100" /></a> </li>
            <li> <a href="#"><img src="images/pic.jpg" width="200" height="100" /></a> </li>
      </ul>
    <li class="slideli2"></li>
  </ul>
</div>
<script type="text/javascript">
var _speed=30;
var _slide = $("#slide");
var _slideli1 = $(".slideli1");
var _slideli2 = $(".slideli2");
_slideli2.html(_slideli1.html());
function Marquee(){
    if(_slide.scrollLeft() >= _slideli1.width())
        _slide.scrollLeft(0);
    else{
        _slide.scrollLeft(_slide.scrollLeft()+1);
    }
}
$(function(){
    //两秒后调用
    var sliding=setInterval(Marquee,_speed)
    _slide.hover(function() {
        //鼠标移动DIV上停止
        clearInterval(sliding);
    },function(){
        //离开继续调用
        sliding=setInterval(Marquee,_speed);
    });
});
</script>
</body>
</html>

注意：

1：.slideul1的宽度的设置要尽可能大，好像不这样设置看不到效果

2：js代码要放在滚动图片的后面，好像不这样设置看不到效果

3：#slide li 不要在样式里面设置高度、宽度，好像这样设置看不到效果

4：#slide li { float:left; }，这里记得要给li设置float：left

例子：http://ons.me/wp-content/uploads/2011/04/slide2.html

http://ons.me/299.html