灰儿 发表于 2013-1-30 21:06:17

div+css+JS图片滚动代码（无缝、平滑）

非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的应用。

代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">
<html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+css+JS无缝图片滚动代码</title>
</head>
<body>
<style type="text/css">
<!--
#scroll_div {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#scroll_div img {
border: 3px solid #F2F2F2;
}
#in_scroll_div {
float: left;
width: 800%;
}
#scroll_begin {
float: left;
}
#scroll_end {
float: left;
}
-->
</style>
<div id="scroll_div">
<div id="in_scroll_div">
<div id="scroll_begin">
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
<div id="scroll_end"></div>
</div>
</div>
<script>
<!--
var speed=10
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
      scroll_div.scrollLeft-=scroll_begin.offsetWidth
    else
      scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar);}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
-->
</script>
</body>
</html>

灰儿 发表于 2013-1-30 22:09:10

以下三种代码写法在静态页面中都能正常显示与滚动，但是放进PHPCMS V9首页模版里面后只有第二种写法能正常滚动。

第一种写法：tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};第二中写法：tab.onmouseover=function() {clearInterval(MyMar);}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed);}第三中写法：tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}注：
这段代码，最后一句代码管是 ")}; " 或是 ");} "或是 ")}“在静态页面中都能正常显示与滚动，但是放进PHPCMS V9首页模版里面后只有 ");} "能正常显示与滚动，其它两种代码写法都不能正常滚动。



相关链接：
http://bbs.phpcms.cn/forum.php?mod=viewthread&tid=335194

灰儿 发表于 2013-1-30 22:31:46

分三个部分：
js 调用
css 样式
div部分   

代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css+JS图片滚动代码（无缝、平滑）</title>
</head>
<body>
<style type="text/css">
<!--
.scroll_div {
width:600px;
height:80px;
margin:0 auto;
overflow: hidden;
white-space: nowrap;
background:#ccc;
margin-left:5px;}
.scroll_div img {
width:80px;
height:60px;
border: 1px solid #D6D5DA;
border:1px #efefef solid;
margin-right: 12px;
padding: 5px;
clear: both;
}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;} /*设置ul和li横排*/
-->
</style>

<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><a href="#"><img src="images/gy-img01.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img02.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img03.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img04.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img05.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img06.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img07.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img08.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img01.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img02.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img03.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img04.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img05.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img06.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img07.jpg" /></a></li>
<li><a href="#"><img src="images/gy-img08.jpg" /></a></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->

<script>
<!--
var speed=10
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else
scroll_div.scrollLeft++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar);}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
-->
</script>
</body>
</html>
然后刷新页面就可以用了…… 效果可以自己改~！
注：
white-space: nowrap;规定此div中的元素(图片、文本)不进行换行。
display:inline;   规定此元素为行内元素显示，即此元素自动横排，不会另起一行显示。

这段CCS代码非常重要，不然框内的图片不能横排，即图片为竖排，然后不滚动图片。

相关链接：
http://bbs.phpcms.cn/forum.php?mod=viewthread&tid=92264
页: [1]
查看完整版本: div+css+JS图片滚动代码（无缝、平滑）