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

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(imgNumimgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({'margin-left':0});imgNum=1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNumimgLen-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(imgNumimgLen-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(imgNum0){imgNum--}else{if(imgNum==0){$(object.scrollBox).css({'margin-left':-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({'margin-left':-scrollWid*imgNum});if(tabNum0){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(imgNum0){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

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

/ul

ul

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大2红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李2大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

h5李大红/h5

h6大公报副社长兼执行总编辑/h6

/div

/a/li

lia href="" target="_blank"

div class="lbPeo clearfix"

img src="" /

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();

})

})

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

网页制作怎么实现图片左右定时自动滚动，用JS jquery代码怎么实现？

函数 描述

$(selector).hide() 隐藏被选元素

$(selector).show() 显示被选元素

$(selector).toggle() 切换（在隐藏与显示之间）被选元素

$(selector).slideDown() 向下滑动（显示）被选元素

$(selector).slideUp() 向上滑动（隐藏）被选元素

$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动

$(selector).fadeIn() 淡入被选元素

$(selector).fadeOut() 淡出被选元素

$(selector).fadeTo() 把被选元素淡出为给定的不透明度

$(selector).animate() 对被选元素执行自定义动画

speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称

自己整理，绝非抄袭!

用JQUERY怎么做出来 图片从右到左自动切换，点击向右的标志，向右移动一张图片

这种插件非常多, 你可以挑一个用

如果你要问原理, 关键点是

外层div是一个窗口, 控制好长宽, 设置overflow为hidden, 那么只有在此区域内的内容才会被显示

内容是一堆图片, 通过js控制位置, 比如用relative定位, 通过css控制left, 就是移动效果

如果要轮播, 注意控制边界图片次序

文章名称：jquery左右滚动图片,jquery 图片左右滚动
转载注明：http://kswjz.com/article/dssppsd.html