多图轮换，自动播放，鼠标悬停

最新推荐文章于 2022-12-15 07:32:43 发布

啦啦噜啦啦

最新推荐文章于 2022-12-15 07:32:43 发布

阅读量1.4k

点赞数

分类专栏：小效果文章标签：图片轮换

本文链接：https://blog.csdn.net/liu__hua/article/details/39371337

版权

小效果专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图：

自动播放，鼠标悬停，按钮鼠标离开时消失，小点可点击

代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
*{padding: 0; text-align: center; margin: 0 auto; border: none;}
.right{float: right;}.left{ float: left;} .clear{clear: both;}
h1{ font-size: 25px; color: orange;}
li{list-style: none;}
.show{ width: 300px; height: 300px; overflow: hidden; position: relative; }
.subnav{width: 100%; height: 50px; border-bottom: 1px solid #ccc; margin-top: 10px;}
.piccontent{width: 100%; height: 217px;position: relative; }
.piclist{position: absolute; left: 0; bottom: 0;}
.piclist ul{ width: 10000px; height: 217px;}
.piclist ul li{float: left; }
.pre,.next{ width: 47px; height: 59px; float: left;}
.pre{ background: url(images/leftbtn.png) no-repeat; position: absolute; left: 0; top: 48%; display: none;}
.next{background: url(images/rightbtn.png) no-repeat; position: absolute; right: 0; top: 48%; display: none;}
.btn{ width: 190px; height: 39px; position: absolute; bottom: -19px; right: -8px;}
.btn span,.btn span.current{width: 12px; height: 10px; float: left;}
.btn span{background: url(images/listdot.png) no-repeat;}
.btn span.current{background: url(images/current.png) no-repeat;}
</style>
</head>
<body>
<div class="show">
<div class="subnav">
<h1 class="left">每日推荐</h1>
</div>
<div class="piccontent clear">
<div class="piclist">
<ul>
<li><img src="images/view2.jpg" width="300" height="213"></li>
<li><img src="images/view3.jpg" width="300" height="213"></li>
<li><img src="images/view1.jpg" width="300" height="213"></li>
<li><img src="images/view4.jpg" width="300" height="213"></li>
<li><img src="images/view4.jpg" width="300" height="213"></li>
<li><img src="images/view4.jpg" width="300" height="213"></li>
</ul>
</div>
<div class="pre"></div>
<div class="next"></div>
<div class="btn">
<span class="current"></span>
<span></span>
<span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<script type="text/javascript">
var i=1;
var page=1;
var $parent=$(".show");
var $content=$(".piccontent");
var $list=$(".piclist");
var width=$content.width();
var len=$content.find("li").length;
var pagecount=Math.ceil(len/i);
$(function(){
//鼠标放上悬停、出现左右标签
var interval=setInterval("rightslid()",500);
$(".show").hover(function(){
$(".pre,.next").css("display","block");
clearInterval(interval);
},function(){
$(".pre,.next").css("display","none");
interval=setInterval("rightslid()",500);
});
//点击按钮
$(".next").click(function(){
rightslid();
});
$(".pre").click(function(){
leftslid();
});
//点击小点
$("span").click(function(){
index=$("span").index(this);
$list.animate({left:"-"+width*index},"slow");
page=index+1;
$parent.find("span").eq((index)).addClass("current").siblings().removeClass("current");
});
})
function rightslid(){
if(!$list.is(":animated")){
if(page==pagecount){
$list.animate({left:"0px"},"fast");
page=1;
}else{
$list.animate({left:"-="+width},"slow");
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
}
function leftslid(){
if(!$list.is(":animated")){
if(page==1){
$list.animate({left:"-="+width*(pagecount-1)},"fast");
page=pagecount;
}else{
$list.animate({left:"+="+width},"slow");
page--;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
}
</script>
</body>
</html>