学长给我们稍微将了一下jquery的 图片自动切换 幻灯片效果的原理，然后，在网上搜了一个案例，自己写了些，不错。
具体代码见下：
下载源码地址：
[url]https://skydrive.live.com/redir.aspx?cid=7be31a2a98467d64&resid=7BE31A2A98467D64!103[/url]
<!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>
<title>picture</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <!-自己添加jquery的文件->
<script type="text/javascript">
$(document).ready(function () {
var length = $("#banner_ul li").length;
//alert(length);
//alert($("#banner_ul li").eq(1).clone().find("img").attr("src"));
$("#test").html($("#banner_ul li").eq(0).clone());
var t = 0;
$("#test_list li").click(function () {
$(this).parent().children().removeClass("open");
$(this).addClass("open");
// console.log($(this).attr("value"));
var tt = $(this).attr("value") - 1;
if (tt != t) {
t = tt;
}
$("#test").find("img").filter(":visible").fadeOut(500).parent().html($("#banner_ul li").eq(t).clone().fadeIn(1000));
});
setInterval(function showAuto() {
t++;
if (t == length) {
t = 0;
console.log("从头做起");
}
$("#test_list li").eq(t).trigger('click');
//console.log($("#test_list li").eq(t));
//$("#test").find("img").filter(":visible").fadeOut(500).parent().html($("#banner_ul li").eq(t).clone().fadeIn(1000));
//$("#test").html($("#banner_ul li").eq(t).clone()).find("img").fadeIn(1000);
}, 5000);
})
function showAuto() {
}
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#banner
{
position: relative;
border: 1px solid gray;
margin: 200px 100px 200px 400px;
height: 286px;
width: 478px;
overflow: hidden;
}
#banner_ul
{
position: absolute;
list-style-type: none;
display: none;
}
#test
{
position: absolute;
height: 286px;
width: 478px;
overflow: hidden;
list-style-type: none;
z-index: 1000;
}
#test_bg
{
position: absolute;
width: 478px;
height: 30px;
z-index: 1001;
bottom: 0;
background: #000;
opacity: 0.1; /*FF,Chrome，safari,opera浏览器*/
filter: alpha(opacity=10); /*IE浏览器*/
}
#test_info
{
position: absolute;
height: 30px;
left: 5px;
z-index: 1002;
bottom: 0;
color:blue;
font-size:18px;
}
#test_list
{
position: absolute;
height: 30px;
right: 5px;
z-index: 1002;
bottom: 0px;
list-style-type: none;
}
#test_list li
{
float: left;
display: block;
color: Blue;
border: 1px solid white;
padding:0 8px;
cursor:pointer;
}
.open
{
background-color:Red;
}
</style>
</head>
<body>
<div id="banner">
<ul id="banner_ul"> <!--几张循环的图片-->
<li>
<img src="../images/imgs/p1.jpg" alt="1" /></li>
<li>
<img src="../images/imgs/p2.jpg" alt="2" /></li>
<li>
<img src="../images/imgs/p3.jpg" alt="3" /></li>
<li>
<img src="../images/imgs/p4.jpg" alt="4" /></li>
</ul>
<div id="test"> <!--显示图片的位置-->
</div>
<div id="test_bg"> <!--显示信息的背景图层-->
</div>
<div id="test_info"> <!--显示图片的一些信息-->
Welcome to Jquery Picture!
</div>
<ul id="test_list"> <!-- 图片的编号列表-->
<li class="open" value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
</ul>
</div>
</body>
</html>
具体代码见下：
下载源码地址：
[url]https://skydrive.live.com/redir.aspx?cid=7be31a2a98467d64&resid=7BE31A2A98467D64!103[/url]
<!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>
<title>picture</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <!-自己添加jquery的文件->
<script type="text/javascript">
$(document).ready(function () {
var length = $("#banner_ul li").length;
//alert(length);
//alert($("#banner_ul li").eq(1).clone().find("img").attr("src"));
$("#test").html($("#banner_ul li").eq(0).clone());
var t = 0;
$("#test_list li").click(function () {
$(this).parent().children().removeClass("open");
$(this).addClass("open");
// console.log($(this).attr("value"));
var tt = $(this).attr("value") - 1;
if (tt != t) {
t = tt;
}
$("#test").find("img").filter(":visible").fadeOut(500).parent().html($("#banner_ul li").eq(t).clone().fadeIn(1000));
});
setInterval(function showAuto() {
t++;
if (t == length) {
t = 0;
console.log("从头做起");
}
$("#test_list li").eq(t).trigger('click');
//console.log($("#test_list li").eq(t));
//$("#test").find("img").filter(":visible").fadeOut(500).parent().html($("#banner_ul li").eq(t).clone().fadeIn(1000));
//$("#test").html($("#banner_ul li").eq(t).clone()).find("img").fadeIn(1000);
}, 5000);
})
function showAuto() {
}
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#banner
{
position: relative;
border: 1px solid gray;
margin: 200px 100px 200px 400px;
height: 286px;
width: 478px;
overflow: hidden;
}
#banner_ul
{
position: absolute;
list-style-type: none;
display: none;
}
#test
{
position: absolute;
height: 286px;
width: 478px;
overflow: hidden;
list-style-type: none;
z-index: 1000;
}
#test_bg
{
position: absolute;
width: 478px;
height: 30px;
z-index: 1001;
bottom: 0;
background: #000;
opacity: 0.1; /*FF,Chrome，safari,opera浏览器*/
filter: alpha(opacity=10); /*IE浏览器*/
}
#test_info
{
position: absolute;
height: 30px;
left: 5px;
z-index: 1002;
bottom: 0;
color:blue;
font-size:18px;
}
#test_list
{
position: absolute;
height: 30px;
right: 5px;
z-index: 1002;
bottom: 0px;
list-style-type: none;
}
#test_list li
{
float: left;
display: block;
color: Blue;
border: 1px solid white;
padding:0 8px;
cursor:pointer;
}
.open
{
background-color:Red;
}
</style>
</head>
<body>
<div id="banner">
<ul id="banner_ul"> <!--几张循环的图片-->
<li>
<img src="../images/imgs/p1.jpg" alt="1" /></li>
<li>
<img src="../images/imgs/p2.jpg" alt="2" /></li>
<li>
<img src="../images/imgs/p3.jpg" alt="3" /></li>
<li>
<img src="../images/imgs/p4.jpg" alt="4" /></li>
</ul>
<div id="test"> <!--显示图片的位置-->
</div>
<div id="test_bg"> <!--显示信息的背景图层-->
</div>
<div id="test_info"> <!--显示图片的一些信息-->
Welcome to Jquery Picture!
</div>
<ul id="test_list"> <!-- 图片的编号列表-->
<li class="open" value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
</ul>
</div>
</body>
</html>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
