JQuery 图片滚动轮播示例代码
程序员文章站
2022-06-20 18:00:50
代码如下:
图片切换</title>...</div>
<div class="content">
<p>代码如下:</p>
<p class="codebody" id="code30599"><br>
<!doctype html><br>
<html><br>
<head><br>
<title>图片切换</title><br>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><br>
<script type="text/javascript" ><br>
var num = 0<br>
$(function(){<br>
$("p ol li").mouver(function(e){<br>
$(this).attr("class","current");<br>
$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空<br>
//alert($('ul').index())<br>
num = $('ul').index() + 2<br>
var index = $(this).index(); //记录选定的li标签在ul中的索引<br>
//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素<br>
$("p ul li").eq(index).css({"left":"650px","zindex":num})<br>
$("p ul li").eq(index).siblings().css("zindex",num-1);<br>
//动画效果，图片从右侧飞入<br>
$("p ul li").eq(index).animate({left:"0"},500)<br><br>
});<br><br>
});<br>
</script><br>
<style type="text/css"><br>
*{margin: 0px;padding: 0px;border: 0px;}<br>
ul,ol{list-style: none;}<br>
.all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;}<br>
.all ul{position: relative;z-index: 1;position: relative;}<br><br>
/*子 绝 父 相*/<br>
.all ul li{position: absolute;left: 0;top: 0px;}<br><br>
.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;}<br>
.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:<br>
bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}<br><br>
.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;<br>
cursor: pointer;}<br>
</style><br>
</head><br>
<body><br>
<p class="all"><br>
<ul><br>
<li><img src="src/1.jpg" /></li><br>
<li><img src="src/2.jpg" /></li><br>
<li><img src="src/3.jpg" /></li><br>
<li><img src="src/4.jpg" /></li><br>
</ul><br>
<ol><br>
<li class="current">1</li><br>
<li>2</li><br>
<li>3</li><br>
<li>4</li><br>
</ol><br>
</p><br>
</body><br>
</html></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1469437.html">
网上赚钱的方法有哪些？教你六种日入一百的网赚方法 </a>
</p>
<p>
下一篇： <a href="/article/1469439.html">
Jquery Ajax 返回的json不执行success的原因详解 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2129179.html" target="_blank" title="JQuery获取表格数据示例代码">
<h2>
JQuery获取表格数据示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2128778.html" target="_blank" title="jQuery实现新闻播报滚动及淡入淡出效果示例">
<h2>
jQuery实现新闻播报滚动及淡入淡出效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2127284.html" target="_blank" title="jQuery简易图片放大特效示例代码">
<h2>
jQuery简易图片放大特效示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2126430.html" target="_blank" title="jQuery中使用Ajax获取JSON格式数据示例代码">
<h2>
jQuery中使用Ajax获取JSON格式数据示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2124565.html" target="_blank" title="jquery中使用循环下拉菜单示例代码">
<h2>
jquery中使用循环下拉菜单示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2121448.html" target="_blank" title="jquery解析JSON数据示例代码">
<h2>
jquery解析JSON数据示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2121435.html" target="_blank" title="JQuery 图片滚动轮播示例代码">
<h2>
JQuery 图片滚动轮播示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2117542.html" target="_blank" title="Javascript实现图片不间断滚动的代码">
<h2>
Javascript实现图片不间断滚动的代码 </h2>
</a>
</li>
<li>
<a href="/article/2115872.html" target="_blank" title="jQuery实现的网站banner图片无缝轮播效果完整实例">
<h2>
jQuery实现的网站banner图片无缝轮播效果完整实例 </h2>
</a>
</li>
<li>
<a href="/article/2115773.html" target="_blank" title="Jquery实现图片左右自动滚动示例">
<h2>
Jquery实现图片左右自动滚动示例 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>