<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无缝滚动</title>
<style type="text/css">
img{
border:0
height:100pxwidth:150px
}
td img{
margin:0 10px
}
</style>
</head>
<body>
<!-- 纵向向无缝滚动-->
<div id="demo" style="overflow:hiddenheight:350pxwidth:200px">
<div id="demo1">
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=40
var demo2=document.getElementById("demo2")
var demo1=document.getElementById("demo1")
var demo=document.getElementById("demo")
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<!-- 横向无缝滚动-->
<div style="margin-top:20px">
<div id="scroll_div" style="overflow: hiddenWIDTH: 778px" align=center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="scroll_begin">
<a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a></td>
<td id="scroll_end"></td>
</tr>
</table>
</div></div>
<script>
var speed1=40
var scroll_end = document.getElementById("scroll_end")
var scroll_div = document.getElementById("scroll_div")
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee1(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else{
scroll_div.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
scroll_div.onmouseover=function() {clearInterval(MyMar1)}
scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
</script>
</body>
</html>
使用jq更简单，先引入jq文件，再写一下内容<div class="div_lunbo" id="one">
<div class="imge" style="position:relativefloat:left">
<img src="图1" />
<span style="color:whitebackground-color:Blackposition:absoluteright:30pxbottom:10px">1</span>
<span style="color:whitebackground-color:Blackposition:absoluteright:30pxbottom:10px">2</span>
</div>
<div class="article">文章内容</div>
</div>
<div class="div_lunbo" id="two" style="display:none">
<div class="imge" style="position:relativefloat:left">
<img src="图2" />
<span style="color:whitebackground-color:Blackposition:absoluteright:30pxbottom:10px">1</span>
<span style="color:whitebackground-color:Blackposition:absoluteright:30pxbottom:10px">2</span>
</div>
<div class="article">文章内容</div>
</div>
<script>
$(document).ready(function(){
$("span").on("click", function(){
$(".div_lunbo").hide()
if($(this).html() == 1) $("#one").show()
else $("#two").show()
})
})
</script>
以上是基本代码，可以自己再加些美化的css代码，自己写的话很麻烦，建议你去找找插件，现在这样的插件应该很多。
新建一个文件夹dome,
在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。
在新建一个dome.html 文件 内容如下：
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
#a1{
width: 600px
height: 500px
border: 10px silver solid
animation:backgroundImg 5s infinite
-webkit-animation:backgroundImg 5s infinite
}
@keyframes backgroundImg{
0%{background-color: #0000FF}
25%{background-color: #0099FF}
50%{background-color: #00FFFF}
75%{background-color: #99FFFF}
100%{background-color: #FFFFFF}
}
@-webkit-keyframes backgroundImg{
0%{background-color: #0000FF}
25%{background-color: #0099FF}
50%{background-color: #00FFFF}
75%{background-color: #99FFFF}
100%{background-color: #FFFF00}
}
#backImg{
width: 500px
height: 490px
/*border: 5px red solid*/
margin-left:45px
z-index: 100
background-size:100% 100%
}
a:hover{
background-color:#0000FF
border: 5px springgreen solid
width: 20px
}
a{
display: block
z-index:
width: 30px
height: 30px
text-align: center
line-height: 30px
color: beige
font-weight: 300
border-radius:50%
font-size: 2em
background-color:#0099FF
position: absolute
top: 255px
box-shadow: none
}
#right{
left:580px
}
span{
display: block
width: 50px
height: 10px
background-color: #99FFFF
float: right
margin-left: 20px
position: relative
bottom: 50px
right: 100px
}
#show{
width: 200px
height: 100px
border: 1px red solid
position: absolute
bottom: 230px
right: 150px
background-size:100% 100%
}
</style>
</head>
<body>
<div id="a1">
<a id="left"><</a>
<a id="right">></a>
<div id="backImg"></div>
<div id="foot"></div>
</div>
<script type="text/javascript">
var div=document.getElementById("a1")
var backImg=document.getElementById("backImg")
var a_left=document.getElementById("left")
var a_right=document.getElementById("right")
var i=0
function backImage(){
i++
backImg.style.backgroundImage="url(img/" +i+".jpg)"
setTimeout(backImage,7000)
if(i>=5){
i=0
}
}
backImage()
a_left.onclick=function(){
i--
if(i<=0||i>5){
i=5
}
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
a_right.onclick=function(){
i++
if(i<=0||i>5){
i=1
}
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
for (var j = 0j <3j++) {
var span=document.createElement("span")
span.id="span_"+j
div.appendChild(span)
span.onmouseover=function(){
show(event)
}
}
function show(e) {
backImg.style.opacity="0.5"
var span = e.target
var div = document.createElement("div")
div.id = "show"
span.parentNode.appendChild(div)
console.log(span.id)
if(span.id=="span_2"){
i-=1
console.log(i)
if(i<=0||i>5){
i=5
}
div.style.backgroundImage="url(img/" +i+".jpg)"
}else if(span.id=="span_1"){
div.style.backgroundImage="url(img/" +i+".jpg)"
}else if(span.id=="span_0"){
i+=1
if(i<=0||i>5){
i=1
}
div.style.backgroundImage="url(img/" +i+".jpg)"
}
span.onmouseout = function() {
backImg.style.opacity="initial"
this.parentNode.removeChild(div)
}
span.onclick=function(){
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
}
</script>
</body>
</html>
