以前图片轮播经常用网上的插件，然后想说自己也要认真看看，一步一步弄明白，所以就自己研究写了个图片轮播的代码，我自己觉得还算是挺简单的。如有改进的地方，欢迎你能帮我指出，共同进步。
（ps：博客园如何上传代码就是可以供大家下载那种，一直没找到地方！）
html：
<html><body>
<div class="main">
<div class="myslide">
<ul class="myslidetwo">
<li><img src="img/dn.jpg"/></li>
<li> <img src="img/ey.jpg"/></li>
<li><img src="img/fxh.jpg"/></li>
<li><img src="img/ss.jpg"/></li>
</ul>
<p class="arrows">
<a class="pre"><</a>
<a class="next">></a>
</p>
<ol class="label">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</div>
</body></html>
css：
<style>
body {
background-color: #dddddd;
}
* {
margin: 0px; padding: 0px;list-style: none;
}
a{
cursor: pointer;
}
.main {
position: relative;
width: 500px; height: 350px;margin:40px auto;
}
.myslide {
float: left; position: absolute; overflow: hidden;
width: 500px; height: 350px;
}
.myslidetwo {
position: absolute;
overflow: hidden;
width: 2000px;
}
.myslidetwo img {
float: left; width: 500px; height: 350px;
}
.label{
position: absolute;
bottom: 15px;
left: 210px;
width: 200px;
}
.label li {
float: left;
width:20px;height:20px;line-height:20px;text-align: center;
margin-right: 5px;
border:1px solid #ddd;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.label li.current {
background: #0f0;
}
.arrows{
position: absolute;
left:0px; top:120px;
color:#666; font-size: 40px;font-weight: bold;
}
.arrows a{
background: rgba(0,0,0,0.2);
display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;
}
.arrows a:hover{
color:#fff;
}
.arrows .pre{
margin-right: 420px;
}
</style>
jquey：
<script>
$(document).ready(function () {
var _now=0;
var oul = $(".myslidetwo");
var numl = $(".label li");
var wid = $(".myslide").eq(0).width();
//数字图标实现
numl.click(function () {
var index = $(this).index();
$(this).addClass("current").siblings().removeClass();
oul.animate({‘left‘: -wid * index}, 500);
})
//左右箭头轮播
$(".pre").click(function () {
if (_now>=1) _now--;
else _now=3;
ani();
});
$(".next").click(function () {
if (_now == numl.size() - 1) {
_now = 0;
}
else _now++;
ani();
});
//动画函数
function ani(){
numl.eq(_now).addClass("current").siblings().removeClass();
oul.animate({‘left‘: -wid * _now}, 500);
}
//以下代码如果不需要自动轮播可删除
//自动动画
var _interval=setInterval(showTime,2000);
function showTime() {
if (_now == numl.size() - 1) {
_now = 0;
}
else _now++;
ani();
}
//鼠标停留在画面时停止自动动画，离开恢复
$(".myslide").mouseover(function(){
clearTimeout(_interval);
});
$(".myslide").mouseout(function(){
_interval=setInterval(showTime,2000);
});
});
</script>
时间： 2024-08-01 10:41:19