<!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/htmlcharset=gb2312" />
<title>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF
overflow:hidden
border: 1px dashed #CCC
width: 500px
}
#demo img {
border: 3px solid #F2F2F2
}
#indemo {
float: left
width: 800%
}
#demo1 {
float: left
}
#demo2 {
float: left
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<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="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10
var tab=document.getElementById("demo")
var tab1=document.getElementById("demo1")
var tab2=document.getElementById("demo2")
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
-->
</script>
</body>
</html>
一、数字键控制代码：
<div style="position:relative top:-50px left:240px">
<a href="javascript:show(1)"><span id="I1" style="width:18px text-align:left background:gray">1</span></a>
<a href="javascript:show(2)"><span id="I2" style="width:18pxtext-align:leftbackground-color:gray">2</span></a>
<a href="javascript:show(3)"><span id="I3" style="width:18pxtext-align:leftbackground-color:gray">3</span></a>
<a href="javascript:show(4)"><span id="I4" style="width:18pxtext-align:leftbackground-color:gray">4</span></a>
<a href="javascript:show(5)"><span id="I5" style="width:18pxtext-align:leftbackground-color:gray">5</span></a>
<a href="javascript:show(6)"><span id="I6" style="width:18pxtext-align:leftbackground-color:gray">6</span></a></div>
<script language="javaScript">
var nowIndex=1
var maxIndex=6
function show(index)
{
if(Number(index)){
clearTimeout(theTimer)
nowIndex=index
}
for(var i=1i<(maxIndex+1)i++){
if(i==nowIndex)
{document.getElementById('pic'+nowIndex).style.display=''
document.getElementById('I'+nowIndex).style.backgroundColor='red'}
else
{document.getElementById('pic'+i).style.display='none'
document.getElementById('I'+i).style.backgroundColor='gray'}
}{
if(nowIndex==maxIndex)
nowIndex=1
else
nowIndex++
}
theTimer=setTimeout('show()',3000)
}
</script>
</div>
二、图片自动播放：
<div id="butong_net_left" style="overflow:hiddenwidth:1000px">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
1、首先输入代码：
<div class="wrapper">
<div id="focus">
<ul>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>
2、然后输入代码：
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li>
3、然后再输入代码：
<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li>
</ul>
</div>
</div><!-- wrapper end -->
</body>
4、然后就完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）