JQuery实现滚动广告(转)
用JQuery实现简单的滚动广告:
实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。
HTML代码
<div id="d1"> <ul id="adv"> <li><img src="data:images/1.jpg" alt="1" /> </li> <li><img src="data:images/2.jpg" alt="2" /> </li> <li><img src="data:images/3.jpg" alt="3" /> </li> <li><img src="data:images/4.jpg" alt="4" /> </li> <li><img src="data:images/5.jpg" alt="5" /> </li> </ul> <ul id="num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div>
CSS代码
* { margin: 0px; padding: 0px; } #d1 { border: 2px solid #E98C36; width: 548px; height: 177px; margin-left: 30%; margin-top: 10%; position: relative; overflow: hidden; } #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; }
JS代码
<script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript"> var i = 0; $(function() { //当鼠标移到所有的li下标时 $("#num li").mouseover(function() { //获得当前li的下标 var index=$("#num li").index(this); //调用showImage()完成图片的滚动 showImage(index); }).eq(0).mouseover(); //加载页面时触发 var taskId; $("#d1").hover(function(){ //当鼠标移到图片上时停止滚动 clearInterval(taskId); },function(){ //当鼠标移走时开始滚动 taskId=setInterval(function(){ showImage(i); i++; if(i==5) i=0; },2000); }).mouseleave(); }); //完成图片的滚动 function showImage(index) { i=index; //执行当前的动画,如果之前的动画还没有完成,则立即清除之前的动画 $("#adv").stop(true).animate({ top : -177 * index }, 1000) //当前的li下标,高度显亮;并且使之前显亮的下标恢复原来的颜色 $("#num li").eq(index).addClass("on").siblings().removeClass("on"); } </script>
转载于:https://www.cnblogs.com/aijindi/p/3868669.html
JQuery实现滚动广告(转)相关推荐
- css广告跟随,jQuery网页右侧广告跟随滚动代码分享
jQuery广告跟随滚动的两种方法都分享给大家,希望对大家的学习有所启发. 方法一: 方法二: /*页面智能层浮动*/ jQuery(document).ready(function($){ var ...
- 15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
- jQuery 图片滚动效果
2019独角兽企业重金招聘Python工程师标准>>> 使用了网上的一个JS插件,配置起来相当灵活好用,效果如下: 下面整理下使用的过程: 1.在插件网站http://www.gma ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <metahttp-equiv="Content-Type"c ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
- jQuery刻度尺滚动滑块插件
为什么80%的码农都做不了架构师?>>> jQuery刻度尺滚动滑块插件 需要用到一个刻度尺插件,网上找来找去都是那几种,所以用jQuery自己写了一个. <!docty ...
- php中加载图片淡入淡出,jQuery实现滚动图片淡入淡出功能
这次给大家带来jQuery实现滚动图片淡入淡出功能,jQuery实现滚动图片淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下. 下面是上下滚动源码 向上滚动代码带上下翻按钮滚动特效 body{ ...
- “加密解密专区”的“滚动”广告太老了
"加密解密专区"的这几个"滚动"广告都是2007年初的了文章了,好像此后就一直没换过,建议相关负责人员定期更换新文章,特此! 加密解密专区 [url]htt ...
最新文章
- java 修饰符作用_Java关键字修饰符的作用范围
- tomcat命令无法启动 the catalina_home environment variable is not defined correctly this environment variab
- Python基础(6)--条件、循环
- 《Hadoop与大数据挖掘》——2.6 TF-IDF算法原理及Hadoop MapReduce实现
- 必须了解的Web安全知识(第一部分:HTTPS,TLS,SSL,CORS,CSP)
- 一加10 Pro的性能配置还是非常不错的
- 【perl】LWP module
- Replica set 的选举策略之一 (转)
- 哈希函数的构造方法以及哈希表解决冲突的方式
- 百度文库免费下载文档方法
- (转发)详解汽车UDS诊断协议(一)
- 安信可nbiot模块_安信可wifi模块
- OpenModelica.VehicleInterfaces离线库安装
- 阿里内网疯狂传阅的“M8级”分布式架构笔记,GitHub刚上线就霸榜
- jsd 多线程与socket网络通信
- Python练习题024:分数相加
- Shell脚本读取mysql结果集各数据项的值
- html中的src路径怎么写,HTML src路径的用法
- html用字符转换成表情,HTML表情符号
- rxjs_如何阅读rxjs大理石图
热门文章
- java当前月份减一个月_在java编程中怎样用%表示当前月份的上一个月和下一个月...
- windows启动管理器_win7系统任务管理器的五种打开方式,很实用,学习一下
- matlab 生成不重复的随机整数 打乱数据排列 生成深度学习数据集
- java enum 定义属性_java enum(枚举)使用详解 + 总结
- 安装python3.8.0步骤_python3.8.0安装教程_后端开发
- python读取txt行问题
- WPF messagebox生命周期的探讨
- Python 入门建议
- Caffe学习系列(12):训练和测试自己的图片
- 基于当前分支的某一个commit号创建分支