『壹』 js实现图片左右滚动
根据楼上做了点修改,这是用jquery,所以一定要链接jquery库。
<html>
<head>
<title></title>
<styletype="text/css">
body,ul,li{list-style:noneoutsidenone;padding:0;margin:0;}
#picScroll{width:350px;overflow:hidden;}
ul{width:1000%;}
ulli{float:left;}
liimg{width:100px;height:100px;}
</style>
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
</head>
<body>
<divid="picScroll">
<ul>
<li>
<a><imgsrc="../pic/1.jpg"/></a>
<a><imgsrc="../pic/2.jpg"/></a>
<a><imgsrc="../pic/3.jpg"/></a>
<a><imgsrc="../pic/4.jpg"/></a>
<a><imgsrc="../pic/5.jpg"/></a>
</li>
<li></li>
</ul>
</div>
<scripttype="text/javascript">
vartarget=$('#picScroll');//其实标准的写法是var$target=$('#picScroll');
varleft=0;
varspeed=30;
varli=$('#picScrollulli');
li.eq(1).html(li.eq(0).html());//复制第一个li节点内容,赋值给第二个li目的是为了实现无限循环滚动
functionMarqeen(){
if(li[0].offsetWidth<=left){
left-=li[0].offsetWidth;
}
else{
left++;
}
target.scrollLeft(left);
}
$(function(){
varmarQueen=window.setInterval(Marqeen,speed);
target.mouseover(function(){
clearInterval(marQueen);
});
target.mouseout(function(){
marQueen=window.setInterval(Marqeen,speed);
});
});
</script>
</body>
</html>
下面是用 js 写的,不用连接jquery库了,可以对比一下上面的jquery代码
<scripttype="text/javascript">
vartarget=document.getElementById('picScroll');
varleft=0;
varspeed=30;
varLI=target.getElementsByTagName('li');
LI[1].innerHTML=LI[0].innerHTML;
functionMarqeen(){
if(LI[0].offsetWidth<=left){
left-=LI[0].offsetWidth;
}
else{
left++;
}
target.scrollLeft=left;
}
varmarQueen=window.setInterval(Marqeen,speed);
target.mouseover=function(){
clearInterval(marQueen);
};
target.mouseout=function(){
marQueen=window.setInterval(Marqeen,speed);};
</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||{});varimgLen=$(object.scrollImgBox).length;varimgNum=0;vartabNum=0;varnowIndex=0;varindex;varscrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));functionchangeEffectNext(){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)}};functionchangeEffectPrev(){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){vars=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()});functionchangesmallImg(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(){varindex=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){varindex=$(this).index();changesmallImg(index)})}}})})(jQuery);
2.html结构
a,.lbPeo{-webkit-transition:all.2sease-in-out0s;-o-transition:all.2sease-in-out0s;-moz-transition:all.2sease-in-out0s;-ms-transition:all.2sease-in-out0s;transition:all.2sease-in-out0s;}
.lbCon{margin-top:33px;margin-bottom:37px;position:relative;}
.lbBtn{display:block;position:absolute;top:0;width:40px;height:143px;border:1pxsolid#D7D2CA;background:url('../../../images/special/140801/ctr_prev.png')no-repeatcentercenter;}
.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%;}
.lbBoxul{float:left}
.lbBoxli{float:left;width:150px;height:145px;overflow:hidden;}
.lbPeo{text-align:center;line-height:18px;font-family:"微软雅黑";color:#333}
.lbPeoimg{display:block;border:1pxsolid#ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}
.lbPeoh5{font-weight:bold;font-size:12px;padding-top:5px;*padding-top:0}
.lbPeoh6{font-size:12px;}
.lbBoxlia:hover{text-decoration:none}
.lbBoxlia:hover.lbPeo{color:#ff9600}
<!--人物-->
<divclass="lbConcomWithclearfix">
<divclass="lbBox">
<divclass="lbList">
<ul>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
</ul>
<ul>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大2红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李2大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
<li><ahref=""target="_blank">
<divclass="lbPeoclearfix">
<imgsrc="http://img4.cache.netease.com/stock/2014/7/22/201407221627281cd88.jpg"/>
<h5>李大红</h5>
<h6>大公报副社长兼执行总编辑</h6>
</div>
</a></li>
</ul>
</div>
</div>
<ahref="javascript:;"class="lbBtnlbPrev"></a>
<ahref="javascript:;"class="lbBtnlbNext"></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.lbBoxul',
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();
})
})
大体是这么个意思,至于怎么延伸在你
『叁』 让图片从右到左滚动的网页代码是怎么样的
往左是:
<marquee><img src="你的图片地址"></marquee>
往右是:
<marquee direction=right><img src="你的图片地址"></marquee>
往上是:
<marquee direction=up><img src="你的图片地址"></marquee>
往下是:
<marquee direction=down><img src="你的图片地址"></marquee>
如果需要在当鼠标移动到图片上时停止滚动,就在<marquee>里加onmouseover=stop() onmouseout=start(),
例如<marquee direction=down onmouseover=stop() onmouseout=start()><img src="你的图片地址"></marquee>
『肆』 求救啊,用js实现图片左右滚动,鼠标经过图像会在滚动图像下方的固定位置显示放大图像,速度啊!!!!!
<!--
在图片标签里添加onmouseover事件,并且将该图片地址作为参数传给show_big函数
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div align='center' id='demo' style='overflow:hidden;height:125px;width:740px;'><!--滚动区的高度和宽度-->
<table align='center' cellpadding='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD background="image/bg_03.gif"></TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproct&id=2" target=_blank title='免费上网卡'>
<img src="goods/201085233124824.jpg" alt="免费上网卡" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"></a>
</TD>
<TD background="image/bg_03.gif"></TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproct&id=3" target=_blank title='最新款语音监听器'>
<img src="goods/2010322133233752.jpg" alt="最新款语音监听器" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"></a>
</TD>
<TD background="image/bg_03.gif"></TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproct&id=4" target=_blank title='远拍王'>
<img src="goods/20104557186.jpg" alt="远拍王" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"></a>
</TD>
<TD background="image/bg_03.gif"></TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproct&id=8" target=_blank title='手电筒摄像机'>
<img src="goods/20103845747868.jpg" alt="手电筒摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this);"></a>
</TD>
<TD background="image/bg_03.gif"></TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproct&id=9" target=_blank title='打火机摄像机'>
<img src="goods/2009115195532598.jpg" alt="打火机摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this);"></a>
</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<div id="bimg"></div>
<script>
var Picspeed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)
}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)
document.getElementById('bimg').innerHTML='';//当鼠标移出是清空图片
}
function show_big(src){
document.getElementById('bimg').innerHTML='<img src="'+src+'" width=300 height=400>';//在id为bimg的div中显示图片
}
</script>
<!--最新图文代码结束-->
『伍』 图片首尾相接左右循环滚动代码
<marquee behavior=alternate vspace="滚动区距上边框距离" hspace="滚动区距左边框距离" width="滚动区长内度" heiget="60" onmouseout=this.start() onmouseover=this.stop()>
<table border=1 bordercolor=red>
<tr>
<td>
<img src="图片容路径">
........
</td>
</tr>
</table>
</marquee>
『陆』 js实现点击按钮图片左右滚动,不要自动滚动的。谢谢各位了!
文章由贝奇动漫网搜集整理
//XHTML代码
<div class="rollBox">
<img onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()" class="img1" src="../images/life/shqm_left_pic.gif"
width="12" height="31" />
<div class="Cont" id="ISL_Cont">
<div class="ScrCont">
<div id="List1">
<!-- 图片列表 begin -->
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<div class="pic">
<a href="#" target="_blank"><img src="../images/life/show_1.jpg" width="130" height="95" /></a>
<a href="#" target="_blank">从巴黎旧公寓学家装点</a>
</div>
<!-- 图片列表 end -->
</div>
<div id="List2"></div>
</div>
</div>
<img onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" class="img2" src="../images/life/shqm_right_pic.gif"
width="12" height="31" />
</div>
//CSS代码
.rollBox{width:620px;overflow:hidden;margin:0 auto;}
.rollBox .Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
*+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:30px;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
//JS代码
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 10; //速度(毫秒)
var Space = 10; //每次移动(px)
var PageWidth = 160; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementByIdx){return eval_r('document.getElementByIdx("'+objName+'")')}else{return eval
('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj
('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft =
GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
var num;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){ //上翻
if(Comp < -Space){
Comp += Space;
num = Space;
}else{
num = -Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Speed);
}else{ //下翻
if(Comp > Space){
Comp -= Space;
num = Space;
}else{
num = Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',Speed);
}
}
//--><!]]>
</script>
PS:注意CSS里层宽度的设置