js实现图片左右滚动

JavaScript030

js实现图片左右滚动,第1张

代码：

    <title></title>

    <style>

        body{

            margin:0

            padding:0

            background-color:transparent

        }

        div{

            width:350px

            overflow:hidden

        }

        table img{

            width:100px

            height:100px

        }

    </style>

</head>

<body>

    <div id="picScroll">

        <table>

            <tr>

                <td><a><img src="../pic/1.jpg" /></a></td>

                <td><a><img src="../pic/2.jpg"></a></td>

                <td><a><img src="../pic/3.jpg"></a></td>

                <td><a><img src="../pic/4.jpg"></a></td>

                <td><a><img src="../pic/5.jpg"></a></td>

            </tr>

        </table>

    </div>

</body>

</html>

<script>

    var target = $('#picScroll')

    var left = 0

    var speed = 30

    function Marqeen() {

        if (target[0].offsetWidth <= left) {

            left -= target[0].offsetWidth

        }

        else {

            left++

        }

        target.scrollLeft(left)

    }

    $(function () {

        var marQueen = window.setInterval(Marqeen, speed)

        target.mouseover(function () {

            clearInterval(marQueen)

        })

        target.mouseout(function () {

            marQueen = window.setInterval(Marqeen, speed)

        })

    })

</script>

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).lengthvar imgNum=0var tabNum=0var nowIndex=0var indexvar 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=indextabNum=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 0stransition:all .2s ease-in-out 0s}

.lbCon{margin-top:33pxmargin-bottom:37pxposition: relative}

.lbBtn{display:blockposition: absolutetop:0width:40pxheight:143pxborder:1px solid #D7D2CAbackground:url('../../../images/special/140801/ctr_prev.png') no-repeat center center}

.lbPrev{left:0}.lbNext{right:0background-image:url('../../../images/special/140801/ctr_next.png')}

.lbBtn:hover{background-color: #ddd}

.lbBox{width:900pxheight:145pxmargin-left: 50pxoverflow: hiddenposition: relative}

.lbList{width:1000%}

.lbBox ul{float:left}

.lbBox li{float:leftwidth:150pxheight:145pxoverflow: hidden}

.lbPeo{text-align:centerline-height:18pxfont-family:"微软雅黑"color:#333}

.lbPeo img{display:blockborder: 1px solid #dddwidth:84pxheight:103pxmargin-left:32px*margin-left:5px}

.lbPeo h5{font-weight: boldfont-size:12pxpadding-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()

   })

})

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