JQuery 图片滚动轮播示例代码

  次阅读 作者:智能小宝 来源:互联网 2016-01-26 10:26 我要评论(0)

这篇文章主要介绍了JQuery实现图片滚动轮播,需要的朋友可以参考下

完整的项目在附件中

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>图片切换</title>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<script type="text/javascript" >

var num = 0

$(function(){

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

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

$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空

//alert($('ul').index())

num = $('ul').index() + 2

var index = $(this).index(); //记录选定的li标签在ul中的索引

//图片会出现层叠现象为了显示当前的图片,把当前的图片的z-index 值设置为大于其他的兄弟元素

$("div ul li").eq(index).css({"left":"650px","zIndex":num})

$("div ul li").eq(index).siblings().css("zIndex",num-1);

//动画效果,图片从右侧飞入

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

});

});

</script>

<style type="text/css">

*{margin: 0px;padding: 0px;border: 0px;}

ul,ol{list-style: none;}

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

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

/*子 绝 父 相*/

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

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

.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:

bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}

.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;

cursor: pointer;}

</style>

</head>

<body>

<div class="all">

<ul>

<li><img src="src/1.jpg" /></li>

<li><img src="src/2.jpg" /></li>

<li><img src="src/3.jpg" /></li>

<li><img src="src/4.jpg" /></li>

</ul>

<ol>

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

<li>2</li>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...