<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>
<!-- 循环滚动的图片 -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSign.aspx">
<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWare.aspx">
<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>
</td>
<!DOCTYPE html><html>
<meta charset="utf-8" />
<title></title>
t>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<body>
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_1.jpg) no-repeat center" src="images/alpha.png">
</a>
</li>
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_2.jpg) no-repeat center" src="images/alpha.png">
</a>
</li>
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_3.jpg) no-repeat center" src="images/alpha.png">
</a>
</li>
</ul>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="javascript:">Previous</a></li>
<li><a class="flex-next" href="javascript:">Next</a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li class="active"><a>1</a></li>
<li class=""><a>2</a></li>
<li class=""><a>3</a></li>
</ol>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto:true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
})
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
})
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
})
})
</script>
</body>
</html>
==========================================
slider，jq自己下载，相信不用我教。
顺便可以看看教程，对这些有点了解。
ideahub如何循环播放多张图片IdeaHub可以使用CSS3的animation属性来实现循环播放多张图片。下面是一个简单的示例：
HTML：
<div class="slideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
CSS：
.slideshow {
width: 500px
height: 500px
overflow: hidden
position: relative
}
.slideshow img {
position: absolute
animation: slideshow 5s infinite
}
@keyframes slideshow {
0% {
left: 0px
}
25% {
left: -500px
}
50% {
left: -1000px
}
75% {
left: -1500px
}
100% {
left: 0px
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）