点击图片切换

最新推荐文章于 2023-08-21 13:55:36 发布

tuobayi

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量521

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/tuobayi/article/details/53088422

版权

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图片切换</title>

<style type="text/css">

*{ padding: 0; margin: 0; list-style: none; }

.all{ width: 650px; height: 250px; margin: 100px auto;position: relative;overflow: hidden;}

.all ul{ position: relative; z-index: 1;}

.all ul li{position: absolute; left: 0; top: 0;}

.all ol{ position: absolute; z-index: 2; right: 10px; bottom: 10px;}

.all ol li{ width: 20px; height: 20px; background: #333; border: 1px solid #ccc;

font-weight: bold; text-align: center; line-height: 20px; float: left; margin-left: 10px;

color: white; margin-top: 10px; cursor: pointer;}

.all ol .current{ width: 30px; height: 30px; line-height: 30px; border: 1px solid #f60 ; color: #f60;

margin-top: 0 ; }

</style>

<script type="text/javascript" src="练习/js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

var num2=6;

$("ol li").mouseover(function(){

$(this).attr("class","current");

$(this).siblings().attr("class","");

var num=$(this).index();

num2++;

$("ul li").eq(num).css("z-index",num2);

$("ul li").eq(num).css("left","650px");

$("ul li").eq(num).animate({ left:"0"},500);

})

})

</script>

</head>

<body>

<div class="all">

<ul>

<li><img src="01.jpg" width="650px" height="250px" /></li>

<li><img src="02.jpg" width="650px" height="250px" /></li>

<li><img src="03.jpg" width="650px" height="250px" /></li>

<li><img src="04.jpg" width="650px" height="250px" /></li>

<li><img src="05.jpg" width="650px" height="250px" /></li>

</ul>

<ol>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li class="current">5</li>

</ol>

</div>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。