jQuery实现制作网页轮播图效果

来源：互联网发布：金山软件管家官方编辑：程序博客网时间：2024/06/05 12:50

一、轮播效果:

1.图片每隔2秒从左往右轮播

2.当鼠标移动到底下的某个数字标签时，停止自动轮播，并且播放与下标对应的图片

3.当鼠标点击左/右侧的按钮时，图片会向左/右进行播放，每点一次播放一张

二、html代码和jQuery代码

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery实现轮播图</title>
<style type="text/css">
.div,.main
{
position:absolute;
height:400px;
width:800px;
}
img
{
height:400px;
width:800px;
}
.bon1,.bon2
{
position:absolute;
height:60px;
width:60px;
margin-top:170px;
background:black;
opacity:0.6;
font-size:40px;
color:white;
line-height:60px;
text-align:center;
}
.bon2
{
margin-left:740px;
}
.list
{
position:absolute;
margin-top:340px;
margin-left:250px;
}
.li
{
float:left;
height:36px;
width:36px;
background:orange;
margin-left:10px;
margin-right:10px;
text-align:center;
line-height:36px;
font-family:"微软雅黑";
border-radius:18px;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/photoshow.js"></script>
</head>
<body>
<div class="main">
<div class="div"><img src="./img/0.jpg"></div>
<div class="div"><img src="./img/1.jpg"></div>
<div class="div"><img src="./img/2.jpg"></div>
<div class="div"><img src="./img/3.jpg"></div>
<div class="div"><img src="./img/4.jpg"></div>
</div>

<div class="bon1"><</div>
<div class="bon2">></div>

<div class="list">
<div class="li" index="0">1</div>
<div class="li" index="1">2</div>
<div class="li" index="2">3</div>
<div class="li" index="3">4</div>
<div class="li" index="4">5</div>
</div>

</body>
</html>

jQuery:

$(document).ready(function() {
var i=0;
var timer=null;
start();//初始化函数
time();//定时器函数

//鼠标移入移出事件
$(".li").hover(function(){
i=$(this).index();
start();
clearInterval(timer);
},function(){time();}
);

//点击按钮事件
$(".bon1").click(function()
{
clearInterval(timer);
if(i==0)
{
i=5;
}
i--;
start();
time();
});
$(".bon2").click(function()
{
clearInterval(timer);
if(i==4)
{
i=-1;
}
i++;
start();
time();
});

function start()
{
$(".div").eq(i).show().siblings().hide();
$(".li").eq(i).css("background","red").siblings().css("background","orange");
};

function time()
{
timer=setInterval(function(){
i++;
if(i==6)
{
i=0;
}
start();
},1800);
};
});

阅读全文

1 0