简单的slideShow(jQuery实现)
井旺
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script src="js/js2.js" type="text/javascript" ></script>
<link href = "css/style2.css" type="text/css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
$(function() {
$("#slideShow").slideShow($("#slideShow"));
});
</script>
<div id="container">
<ul class="slideShow" id="slideShow">
<li><img src="images/slideshow_large_1.jpg" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_2.jpg" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_3.jpg" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_4.jpg" alt="slideshow_large"/></li>
</ul>
</div>
</body>
</html>
// Copyright 2010 htmldrive.net Inc.
(function($){
$.fn.slideShow = function (slideShowElement) {
var li = slideShowElement.children("li");
var liNumber = li.length;
var index = 0;
init(li);
setTimeout((function(li, index) {
return function() {
play(li, index);
};
})(li ,index),4000);
function play(li, index) {
li.eq(index).fadeToggle(1500,'linear',(function(li,index) {
return function() {
if (index === liNumber - 1) {
index = -1;
}
li.eq(index+1).fadeToggle(1500,'linear');
};
})(li,index));
if (index === liNumber - 1) {
index = -1;
}
index++;
setTimeout((function(li, index) {
return function() {
play(li, index);
};
})(li ,index),4000);
}
function init(li) {
for (var i = 1; i < liNumber; i++) {
li.eq(i).fadeToggle('fase');
}
}
};
})(jQuery);* {
margin:0;
padding:0;
list-style-type:none;
}
#container {
height: 500px;
width: 700px;
margin: auto;
border: 1px;
overflow:hidden;
}
ul.slideShow {
float: left;
position: relative;
width: 100%;
top: 0px;
}
ul.slideShow li img {
height: 500px;
width: 700px;
}
图片什么的，请自备
类似资料：