js图片滚动效果教程(js滚动特效)
怎样用JS实现图片上下滚动
问的不是很清楚哦,上下是指从上到下,从下到上,上去了再下来,还是什么,
JS控件图片移动,无非常是setInterval,setTimeout来控件图片的位置,
示例代码:
img src="a.jpg" style="position:absolute; top:0px; left:40%;" id="movpic"
script
var obj = document.getElementById("movpic");
var tops=0;
function movs1()
{tops+=5;br/obj.style.top = tops;br/}
setInterval('movs1()',500);
/script
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+DIV左右滚动的切换图
在自己网站需要添加切换图的位置放上以下的HTML代码（用来显示切换的8张图片）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。
在网站的CSS文件的底部粘贴下面的CSS文件，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
*案例滚动图片样式*/
.anli8{width:980px; margin:0px auto;}
.anli_fot{width:980px; height:7px; background:url(../images/net2_07.jpg) no-repeat; margin-bottom:15px;}
.infiniteCarousel {
border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#F6F5F5; width:978px; position: relative; height:190px;
}
.infiniteCarousel .wrapper8 {
width:865px; height:198px; position:absolute; top:0; margin-left:53px;
}
.infiniteCarousel ul a img {
border:4px solid #E5E5E5; width:190px; height:130px; overflow:hidden;
}
.infiniteCarousel li{
text-align:center; font-weight:normal; font-size:12px; color:#333; line-height:26px;
}
.infiniteCarousel .wrapper8 ul{
width:865px; margin:0; position:absolute; padding-top:10px;
}
.infiniteCarousel .wrapper8 ul li {
display:block; float:left; padding:10px;
}
.infiniteCarousel .arrow {
display: block; text-indent: -999px; position:absolute; top:65px; cursor:pointer;
}
.infiniteCarousel .forward {
width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px; overflow:hidden;
}
.infiniteCarousel .back {
width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat;left:5px;
}
.infiniteCarousel .forward:hover {
width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px;
}
.infiniteCarousel .back:hover {
width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat; left:5px;
}
添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
下载二个JS文件，然后上传到自己网站空间的根目录下。
完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。
js 图片滚动
你还不如用marqueen标签来实现图片滚动，那不是更简单么
比如：
下面的例子使用了 MARQUEE 元素创建了由左向右的滚动字幕，移动速度为每 200 毫秒 10 像素。
marquee direction="right" behavior="scroll" scrollamount="10" scrolldelay="200"这是一个滚动字幕。/marquee
js图片滚动 多组图片滚动 如何实现
给你封装了下，自己调用函数就行了
function marquee(outElement,childElment,copyElement,speed){
var colee2=document.getElementById(copyElement);
var colee1=document.getElementById(childElment);
var colee=document.getElementById(outElement);
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
}
//============================函数这么调用就行了
marquee("colee","colee1","colee2",30);//自己改参数