jquery.scroller_roll.js图片+标题循环滚动代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.scroller_roll.js图片自动循环滚动代码</title>
<style>
.scroller_roll{padding: 0px;margin: 0px;overflow: hidden;}
.scroller_roll ul{padding: 0px;margin: 0px;float: left;}
.scroller_roll ul li{padding: 0px;margin: 0px;list-style: none;float: left;text-align: center;display: inline;overflow: hidden;}
.scroller_roll ul li a{text-decoration: none;}
.scroller_roll ul li a: hover{text-decoration: underline;}
.scroller_roll ul li a img{border: none;}
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
(function(a) {
  a.fn.scroller_roll = function(p) {
    var p = p || {};
    var g = p && p.time_interval ? p.time_interval: "100";
    var h = p && p.title_show ? p.title_show: "enable";
    var i = p && p.window_background_color ? p.window_background_color: "white";
    var j = p && p.window_padding ? p.window_padding: "5";
    var k = p && p.border_size ? p.border_size: "1";
    var l = p && p.border_color ? p.border_color: "black";
    var m = p && p.images_width ? p.images_width: "45";
    var n = p && p.images_height ? p.images_height: "70";
    var o = p && p.title_size ? p.title_size: "12";
    var q = p && p.title_color ? p.title_color: "blue";
    var r = p && p.show_count ? p.show_count: "5";
    var i_m = p && p.images_margin ? p.images_margin: "3";
    j += "px";
    k += "px";
    m += "px";
    n += "px";
    o += "px";
    var s;
    var t = 0;
    var u;
    var v;
    var w;
    var x;
    var y = a(this);
    var z = y.children("ul").children("li").length;
    var A = Math.ceil(z / r);
    if (y.find("ul").length == 0 || a("li").length == 0) {
      dom.append("Require content");
      return null
    }
    y.children("ul").children("li").children("a").children("img").css("width", m).css("height", n);
    if (h == 'enable') {
      y.children("ul").children("li").children("a").each(function() {
        $(this).append('<br/>' + $(this).attr("title"))
      })
    }
    s_s_ul(y, j, k, l, i);
    m = parseInt(m);
    y.children("ul").children("li").css("width", m + "px");
    y.children("ul").children("li").css("margin-left", i_m + "px");
    y.children("ul").children("li").children("a").css("color", q);
    y.children("ul").children("li").children("a").css("font-size", o);
    y.hover(function() {
      stop()
    },
    function() {
      play()
    });
    begin();
    play();
    function begin() {
      x = y.children("ul").width();
      y.children("ul").children("li").hide();
      y.children("ul").children("li").slice(0, r).show();
      u = y.children("ul").outerWidth();
      v = y.children("ul").outerHeight();
      y.children("ul").width(x);
      y.width(u);
      y.height(v);
      y.children("ul").children("li").show();
      y.css("position", "relative");
      y.children("ul").css("position", "absolute");
      y.children("ul").clone().prependTo(y);
      j = parseInt(j);
      y.children("ul").css("left", "0px");
      y.find("ul:last").css("left", x);
      w = x - i_m
    }
    function play() {
      if (parseInt(y.find("ul").eq(t).css("left")) <= -(x)) {
        var a = x;
        y.find("ul").eq(t).css("left", a);
        if (t == 0) {
          t = 1
        } else {
          t = 0
        }
      }
      y.find("ul").each(function() {
        $(this).css("left", (parseInt($(this).css("left")) - 1) + "px")
      });
      s = setTimeout(play, g)
    }
    function stop() {
      clearTimeout(s)
    }
    function s_s_ul(a, b, c, d, e) {
      b = parseInt(b);
      c = parseInt(c);
      var f = "border: " + d + " solid  " + c + "px; padding:" + b + "px; background-color:" + e;
      a.attr("style", f)
    }
  }
})(jQuery);
$(function() {
  $("#scroller_roll1").scroller_roll({
    title_show: 'enable',
    time_interval: '15',
    window_background_color: "#C1F0FF",
    window_padding: '1',
    border_size: '1',
    border_color: '#0099CC',
    images_width: '75',
    images_height: '70',
    images_margin: '5',
    title_size: '12',
    title_color: 'black',
    show_count: '3'
  });
  $("#scroller_roll2").scroller_roll({
    title_show: 'enable',
    time_interval: '30',
    window_background_color: "#C1F0FF",
    window_padding: '1',
    border_size: '0',
    border_color: '#0099CC',
    images_width: '90',
    images_height: '70',
    images_margin: '5',
    title_size: '12',
    title_color: 'black',
    show_count: '3'
  });
  $("#scroller_roll3").scroller_roll({
    title_show: 'disable',
    time_interval: '30',
    window_background_color: "none",
    window_padding: '1',
    border_size: '0',
    border_color: '#0099CC',
    images_width: '90',
    images_height: '70',
    images_margin: '5',
    title_size: '12',
    title_color: 'black',
    show_count: '4'
  })
});
</script>
</head>
<body>
        <h1>Simple images and title scroller with jquery plugin</h1>
        <h2>Demo1</h2>
        <div id="scroller_roll1" class="scroller_roll">
            <ul>
                <li><a href="#" title="title1"><img src="//ku.shouce.ren/files/images/201601/56a34a023d0da.jpg" /></a></li>
                <li><a href="#" title="title2"><img src="//ku.shouce.ren/files/images/201601/56a34a12a3a9e.jpg" /></a></li>
                <li><a href="#" title="title3"><img src="//ku.shouce.ren/files/images/201601/56a34a1327fbb.jpg" /></a></li>
                <li><a href="#" title="title4"><img src="//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg" /></a></li>
                <li><a href="#" title="title5"><img src="//ku.shouce.ren/files/images/201601/56a34a1422687.jpg" /></a></li>
            </ul>
            <div style="clear: both"></div>
        </div>
<h2>Demo2</h2>
        <div id="scroller_roll2" class="scroller_roll">
            <ul>
                <li><a href="#" title="title1"><img src="//ku.shouce.ren/files/images/201601/56a34a023d0da.jpg" /></a></li>
                <li><a href="#" title="title2"><img src="//ku.shouce.ren/files/images/201601/56a34a12a3a9e.jpg" /></a></li>
                <li><a href="#" title="title3"><img src="//ku.shouce.ren/files/images/201601/56a34a1327fbb.jpg" /></a></li>
                <li><a href="#" title="title4"><img src="//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg" /></a></li>
                <li><a href="#" title="title5"><img src="//ku.shouce.ren/files/images/201601/56a34a1422687.jpg" /></a></li>
            </ul>
            <div style="clear: both"></div>
        </div>
        <h2>Demo2</h2>
        <div id="scroller_roll3" class="scroller_roll">
            <ul>
                <li><a href="#" title="title1"><img src="//ku.shouce.ren/files/images/201601/56a34a023d0da.jpg" /></a></li>
                <li><a href="#" title="title2"><img src="//ku.shouce.ren/files/images/201601/56a34a12a3a9e.jpg" /></a></li>
                <li><a href="#" title="title3"><img src="//ku.shouce.ren/files/images/201601/56a34a1327fbb.jpg" /></a></li>
                <li><a href="#" title="手册网"><img src="//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg" /></a></li>
                <li><a href="#" title="title5"><img src="//ku.shouce.ren/files/images/201601/56a34a1422687.jpg" /></a></li>
            </ul>
            <div style="clear: both"></div>
        </div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jquery.scroller_roll.js图片+标题循环滚动代码

分类

图片代码

描述

Js图片滚动特效，基于jquery.scroller_roll.js插件，图片和标题一起滚动，无缝循环滚动那种，一共包括了三个滚动的例子，都是向左滚动，第一个速度快，第二个速度慢些，第三个是只有图片没有文字标题的滚动，当然，滚动速度是可以调节的...