Question

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

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

Answer 1

1.jquery.imgScroll.js

;(function($){$.fn.extend({"imgScroll":function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:"slide",thumbNowClass:'on',thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType=='slide'){if(imgNum<imgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum<imgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum<imgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType=='slide'){if(imgNum>0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum>0){tabNum--}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType=='fadein'){if(imgNum>0){imgNum--}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn('slow');$(object.scrollImgBox).eq(imgNum).siblings().fadeOut('slow');$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)});$(object.botNext).bind("click",function(){clearInterval(s)}).bind("mouseover",function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType=='slide'){$(object.scrollBox).animate({'margin-left':-scrollWid*index})}if(object.changeType=='fadein'){$(object.scrollImgBox).eq(index).fadeIn('slow');$(object.scrollImgBox).eq(index).siblings().fadeOut('slow')}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);

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.页面调用：

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/jquery.imgScroll.js"></script>(上面那个js)

$('.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/