<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px; padding:0px; }
#Scroll{width:100%; height:272px;}
#Scroll ul li{list-style-type:none; width:100%; height:272px; border:1px solid #000;display:none; }
#Scroll img.butl{position:absolute; top:120px; left:10%; display:none;}
#Scroll img.butr{position:absolute; top:120px; right:10%; display:none;}
</style>
</head>
<body>
<div id="Scroll">
<img src="images/dirl.png" class="butl" />
<img src="images/dirr.png" class="butr" />
<ul>
<li style="background:url('images/pic1.jpg') center; display:block;"></li>
<li style="background:url('images/pic2.jpg') center;"></li>
<li style="background:url('images/pic3.jpg') center;"></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var index=0;
var isStop=0;
var len=$("#Scroll ul li").length-1;
$(".butl").click(function(){
if (index==0 ) index=len+1;
index--;
$("#Scroll ul li").eq(index).fadeIn(1000).siblings().hide();
});
$(".butr").click(function(){
if (index==len ) index=-1;
index++;
$("#Scroll ul li").eq(index).fadeIn(1000).siblings().hide();
});
$("#Scroll img").mouseover(function(){
isStop=1;
$("#Scroll img").show();
});
$("#Scroll ul li").mouseover(function(){
isStop=1;
if ($("#Scroll img").is(":hidden")) {$("#Scroll img").fadeIn(500);};
});
$("#Scroll ul li").mouseout(function(){
isStop=0;
if (!$("#Scroll img").is(":hidden")) $("#Scroll img").hide();
});
function autop(){
if (isStop==1) return 0;
if (index==len ) index=-1;
index++;
$("#Scroll ul li").eq(index).fadeIn(1000).siblings().hide();
};
setInterval(autop,3500);
});
</script>
</body>
</html>
jQuery+CSS图片轮播 鼠标放图片上可以暂停 可以控制上一张下一张
5星 · 超过95%的资源 需积分: 26 34 浏览量
2014-09-10
11:19:18
上传
评论 6
收藏 420KB RAR 举报 
20140905jQuery图片轮播鼠标放上暂停.rar （8个子文件） 
20140904jQuery图片轮播鼠标放上暂停 
test.htm 2KB images 
pic3.jpg 125KB pic1.jpg 145KB
dirr.png 2KB pic2.jpg 115KB Thumbs.db 14KB dirl.png 2KB js jquery.js 70KB
- 1
- 2
- 3
前往页