js图片左右滚动怎么弄有没案例代码求帮忙

类似这样的左右滚动的js效果代码谁有就是鼠标经过那个区域左右两边按钮出现按按钮可以左右滚动图片
离开区域按钮消失
效果可以看http://www.u17.com/这里想模仿这个网站首页的图片滚动效果

举报该文章

相关建议推荐于2016-07-15

1.jquery.imgScroll.js

2.html结构

a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}
.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url('../../../images/special/140801/ctr_prev.png') no-repeat center center;}
.lbPrev{left:0}.lbNext{right:0;background-image:url('../../../images/special/140801/ctr_next.png')}
.lbBtn:hover{background-color: #ddd;}
.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}
.lbList{width:1000%;}
.lbBox ul{float:left}
.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}
.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}
.lbPeo h6{font-size:12px;}
.lbBox li a:hover{text-decoration: none}
.lbBox li a:hover .lbPeo{color:#ff9600}

<div class="lbCon comWith clearfix">
   <div class="lbBox">
      <div class="lbList">
      <ul>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
      </ul>
      <ul>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大2红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李2大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
        <li><a href="" target="_blank">
          <div class="lbPeo clearfix">
            <img src="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg" />
            <h5>李大红</h5>
            <h6>大公报副社长兼执行总编辑</h6>
          </div>
        </a></li>
      </ul>
      </div>
   </div>
   <a href="javascript:;" class="lbBtn lbPrev"></a>
   <a href="javascript:;" class="lbBtn lbNext"></a>
</div>

3.页面调用：

$('.lbCon .lbBox .lbList').imgScroll({
        firstDiv: '.lbCon .lbBox',
        scrollBox: '.lbCon .lbBox .lbList',
        scrollImgBox: '.lbCon .lbBox ul',
        botPrev: '.lbCon .lbPrev',
        botNext: '.lbCon .lbNext',
        changeType: "slide",
        thumbNowClass: 'on',
        thumbOverEvent: true,
        changeTime: 5000,
        ImgBoxMar: 0,
        flag: false
    });

4.至于鼠标滑过显示左右按钮,可以这么写（思路:css默认隐藏左右按钮，鼠标滑过显示左右按钮，划出隐藏，需要引入jquery.js）

$(function(){
   $(".wj_jdt_1").bind("onmouseover",function(){
       $(".ctr_btn").show();
   }).bind("onmouseout",function(){
       $(".ctr_btn").hide();
   })
})

大体是这么个意思，至于怎么延伸在你

追问

能不弄成源文件这样看不是很清楚谢谢

追答

参考页面：http://news.takungpao.com/special/fanchangjiang/

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f42ss4q4mfs7fs27sv7.html

其他看法

无其他回答

怎么用JS脚本使多张图片滚动?
direction="up"===>指滚动方向,默认从左往右,可取的值为:up,down,left,right onmouseover="this.stop()"===>指鼠标悬停在图片上时,图片静止 onmouseout="this.start()"===>指鼠标离开图片时,图片运动希望对您有所帮助

js实现点击按钮图片左右滚动,不要自动滚动的。谢谢各位了!
 从巴黎旧公寓学家装点

图片首尾相接左右循环滚动代码
<marquee behavior=alternate vspace="滚动区距上边框距离" hspace="滚动区距左边框距离" width="滚动区长度" heiget="60" onmouseout=this.start() onmouseover=this.stop()> ... <\/marquee>

求救啊,用js实现图片左右滚动,鼠标经过图像会在滚动图像下方的固定位置...
在图片标签里添加onmouseover事件，并且将该图片地址作为参数传给show_big函数 -->  <TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0> <TR

js实现图片左右滚动
代码： body{ margin:0; padding:0; background-color:transparent; } div{ width:350px; overflow:hidden; } table img{ width:100px; height:100px; }

js实现图片自动的滚动效果
自动滚动，主要思路是用js自带的setInterval方法。定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法 set...

图片从右向左无间隙滚动代码
--多个图片从这开始循环---> 图片名称

JS点击左右键滚动中间内容怎么做呢。找了好多案例都不好改
第一种，类似于滑动效果，用强父元素，overflow:hidden了。然后通过点击左右的键，获取当前父元素的宽度，修改父元素css属性的left，注意，position:absolute时left才起作用。第二种就比较简单。就是简单的隐藏，点击左右，隐藏第一屏的信息，再次点击，隐藏第一、第二屏的信息，依次类推，当最后一屏的...

网页中的滚动图片的代码怎么写?
网页中的滚动图片的代码有上下左右四个方向，分别是： <---> <！--向上滚动代码开始--> <

js图片滚动问题。无缝滚动图片做到一半,无法写下去了。4张图片,滚动时...
做无缝滚动的常规思路是：重复第一幅图片到最后，等滚动出位于最后的“第一幅图片”时，将画布位置切换回起始位置，此后重复执行滚动即可。给你个示例：

相似回答

大家正在搜

js图片左右滚动 怎么弄 有没案例代码 求帮忙

js图片左右滚动怎么弄有没案例代码求帮忙