jquery图片滚动轮转

最新推荐文章于 2021-12-26 16:18:12 发布

genius158

最新推荐文章于 2021-12-26 16:18:12 发布

阅读量468

点赞数

分类专栏： web 文章标签： js jquery 图片轮播

本文链接：https://blog.csdn.net/u012882685/article/details/45621319

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

实现思路，把ul中的图片看成一个整体，这里也就是三张图片看成一张图片，整体移动

javascript部分（文件名img.js）

$(document).ready(function(e) {
setTimeout('ReMouseover()',2000);
$('#d ol li').mouseover(disp);
});
var imgindex=0;
function disp(){
imgindex = $(this).index();//图片索引
$('ul').animate({left:(imgindex*950)+'px'});//图片移动动画
$(this).addClass('olli').siblings().removeClass('olli');
}
function ReMouseover() {
$("#d ol li").eq(imgindex).trigger('mouseover'); //自动触发
imgindex = (imgindex + 1) % 3;
setTimeout("ReMouseover()",2000);
}

html部分

<!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>
<link rel="stylesheet" href="图片轮播.css" type="text/css" />
<script language="javascript" src="../JQuery-1.9.1/jquery-1.9.1.js"></script>
<script language="javascript" src="img.js"></script>
</head>
<body>

<div id="d">
<ul>
<li id="img1"><img src="img1.jpg" /></li>
<li id="img2"><img src="img2.jpg" /></li>
<li id="img3"><img src="img3.jpg" /></li>
</ul>
<ol>
<li class="olli">1</li>
<li>2</li>
<li>3</li>
</ol>

</div>
</body>

</html>

css部分文件名（图片轮播.css）

*{
margin:0px;
padding:0px;}
#d{
margin-left:200px;
width:950px;
border:2px solid #CCC;
height:450px;
background-color:#000;
position:relative;
overflow:hidden
}
ul,ol{
list-style:none;
position:absolute;
}
ul li{
float:left;
position:absolute;
width:950px;
}

ol{
right:600px;
bottom:30px;
}
ol li{
float:left;
margin:5px;
text-align:center;
width:20px;
height:20px;
background-color:#F00;
cursor:pointer;
}
#img1{
left:-1900px
}
#img2{
left:-950px
}
#img3{
left:0px
}
.olli{
background-color:#FF0
}

genius158

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery图片滚动轮转

实现思路，把ul中的图片看成一个整体，这里也就是三张图片看成一张图片，整体移动javascript部分（文件名img.js）$(document).ready(function(e) {setTimeout('ReMouseover()',2000);$('#d ol li').mouseover(disp); });var imgindex=0;function di
复制链接

扫一扫