利用JQuery实现广告动态滚动特效

今天来复习一下JQuery的知识，JQuery的特点：利用选择器查找要操作的节点，并且会将这些节点封装成一个jQuery对象。通过调用jQuery对象的属性或者方法来实现对底层节点的操作，这样做的好处有两个：一是兼容性更好了，另外，代码得到简化。关于JQuery的一些知识点，譬如选择器、dom对象、事件处理、动画、类数组等，我就不一一说了，下面直接演示上图简单的广告条动态滚动显示。

html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>*{margin:0px;padding:0px;}#d1{border : 1px solid #aaaaaa;margin-left:200px;margin-top:40px;width:548px; height:177px; overflow:hidden;position:relative;}#adv,#num{position:absolute;}ul li{list-style:none;display:inline;}ul img{width:548px; height:177px;display:block;}#num{right:5px;bottom:5px;}#num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;}.on{line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color:red;font-weight: bold;}
</style>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">$(function(){$('#num li').mouseenter(function(){//获得光标指向的li的下标var index = $('#num li').index(this);//滚动图片showImage(index);}).eq(0).mouseenter();var i = 0;var taskId;$('#d1').hover(function(){//光标进入，停止滚动clearInterval(taskId);},function(){//光标离开，开始滚动taskId = setInterval(function(){showImage(i);i++;if(i==5){i = 0;}},2000);}).mouseleave();});function showImage(index){//stop(true):先清空当前对象上累积的所有的动画。$('#adv').stop(true).animate({'top':-index * 177},1000);//加亮光标指向的li$('#num li').eq(index).addClass('on').siblings().removeClass('on');}
</script>
</head>
<body><div id="d1"><ul id="adv"><li><img src="../images/1.jpg"/></li><li><img src="../images/2.jpg"/></li><li><img src="../images/3.jpg"/></li><li><img src="../images/4.jpg"/></li><li><img src="../images/5.jpg"/></li></ul><ul id="num"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body>
</html>

利用JQuery实现广告动态滚动特效相关推荐

html土图片滚动特效,jQuery实现图片左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止 ...
jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)
2019独角兽企业重金招聘Python工程师标准>>> 最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这 ...
html怎样实现动态背景效果,利用jQuery实现动态背景特效
特效描述:利用jQuery实现动态背景特效.利用jQuery实现动态背景特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Example 1 ooh, pretty. Notic ...
利用 JQuery的load函数动态加载页面
利用JQuery的load函数动态加载页面 JQuery有好多Ajax函数,其中load是用来动态加载一个页面的内容到指定的dom元素上. 我们来做个例子: 做一个上下(左右)结构的页面,其中下左部分 ...
利用jquery给指定的table动态添加一行、删除一行
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr"). ...
php把数字倒着展示,jQuery+PHP实现动态数字展示特效
HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 代码如下: 当前在线: jQuery 首先我 ...
jQuery教学－简单好用的视差滚动特效Parallax Effect
若各位有在注意Firefox OS的朋友,应该会发现到,在台湾的官网中,有一个相当特别的效果,当滚动画面时,感觉画面上叠了一层图层,可在某一个区块中,把背景固定住,然后内容不断的更换,当这个单元介 ...
JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图代码: Java代码 <!DOCTYPE html> <html> <head lang=&quo ...
css广告跟随,jQuery网页右侧广告跟随滚动代码分享
jQuery广告跟随滚动的两种方法都分享给大家,希望对大家的学习有所启发. 方法一: 方法二: /*页面智能层浮动*/ jQuery(document).ready(function($){ var ...

利用JQuery实现广告动态滚动特效

html代码如下:

利用JQuery实现广告动态滚动特效相关推荐

最新文章

热门文章