动态轮播图

 1 /// <reference path="jquery-1.10.2.min.js" />
 2 var i = 0;
 3 var timer; //设置定时器
 4 $(function () {
 5     $("#dlunbo").hover(function () {
 6         $(".btn").show();
 7     }, function () {
 8         $(".btn").hide();
 9     });
10     $(".ig").eq(0).show().siblings().hide();           //页面打开之后,第一个图片显示,其余图片隐藏
11     StartLunbo();
12     $("#tabs li").hover(function () {    //鼠标放上去之后执行一个事件,
13         clearInterval(timer);  //鼠标放上去之后,移除定时器,不能轮播
14         i = $(this).index();//获得当前索引
15         ShowPicTab();
16     }, function () {   //鼠标离开之后执行一个事件
17         StartLunbo();
18     });
19     $(".btn1").click(function () { //左箭头
20         clearInterval(timer);
21         i--;
22         if (i == -1) {
23             i = 4;
24         }
25         ShowPicTab();
26         StartLunbo();
27     });
28     $(".btn2").click(function () { //右箭头
29         clearInterval(timer);
30         i++;
31         if (i == 5) {
32             i = 0;
33         }
34         ShowPicTab();
35         StartLunbo();
36     });
37 });
38 
39 
40 //封装相同的部分
41 function ShowPicTab()
42 {
43     $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);//有0.3s的渐变效果,加两个true可以立马将上一个动画结束掉,加一个true则是停止上一个动画
44     $("#tabs li").eq(i).addClass("bg").siblings().removeClass("bg");
45 }
46 function StartLunbo()
47 {
48     timer = setInterval(function () {     //间隔4s执行一个轮播事件
49         i++;
50         if (i == 5) {
51             i = 0;
52         }
53         ShowPicTab();
54     }, 4000);
55 }
 1 *{
 2     padding:0px;
 3     margin:0px;
 4     font-family:"微软雅黑";
 5     list-style-type:none;
 6 }
 7 #dlunbo{
 8     width:520px;
 9     height:280px;
10     position:absolute;
11     left:50%;
12     margin-left:-260px;
13     top:50%;
14     margin-top:-140px;
15 }
16 .ig{
17     position:absolute;
18 }
19 #tabs{
20     position:absolute;
21     bottom:10px;
22     left:200px;
23 }
24 #tabs li{
25     width:20px;
26     height:20px;
27     border:solid 1px #fff;
28     float:left;
29     margin-right:5px;
30     border-radius:100%;
31     cursor:pointer;
32 }
33 .btn{
34     position:absolute;
35     width:30px;
36     height:50px;
37     background:rgba(0,0,0,0.5);
38     color:#fff;
39     text-align:center;
40     line-height:50px;
41     font-size:30px;
42     top:50%;
43     margin-top:-25px;
44     cursor:pointer;
45     display:none;
46 }
47 .btn1{
48     left:0px;
49 }
50 .btn2{
51     right:0px;
52 }
53 #tabs .bg{
54     background-color:#ff0000;
55 }
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <link href="css/demo1.css" rel="stylesheet" />
 7     <script src="js/jquery-1.10.2.min.js"></script>
 8     <script src="js/demo1.js"></script>
 9 </head>
10 <body>
11     <div id="dlunbo">
12         <div id="igs">
13             <div class="ig"><img src="img/1.jpg"/></div>
14             <div class="ig"><img src="img/2.jpg" /></div>
15             <div class="ig"><img src="img/3.jpg" /></div>
16             <div class="ig"><img src="img/4.jpg" /></div>
17             <div class="ig"><img src="img/5.jpg" /></div>
18         </div>
19         <ul id="tabs">
20             <li class="bg"></li>
21             <li></li>
22             <li></li>
23             <li></li>
24             <li></li>
25         </ul>
26         <div class="btn btn1">&lt;</div>
27         <div class="btn btn2">&gt;</div>
28     </div>
29 </body>
30 </html>

转载于:https://www.cnblogs.com/snow52132/p/7233366.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

eos操作系统_EOS相机统一的用户界面

自EOS相机诞生起就未改变的基本布局精心设计的操作系统EOS数码单反相机从普及机型到高端机型的按钮布局都是共通的。快门按钮的位置自不必说&#xff0c;主拨盘位置和背面按钮的配置也基本相同。特点是在手柄一侧集中配置用于进行主要操作的按钮。实现了只用右手就能完成拍摄相…

【C语言简单说】三:变量总结ASCII码扩展(5)

前面几个小节都在说变量&#xff0c;那么这一节我们就来总结一下 int表示整数&#xff0c;float表示小数&#xff0c;char表示字符。他们所匹配的&#xff0c;整数&#xff1a;%d&#xff1b;浮点数&#xff1a;%f&#xff1b;字符&#xff1a;%c。 我们来看一个程序&#xf…

Windows之Fiddler抓HTTP和HTTPS请求

1 Fiddler 1) 介绍:Fiddler是抓包工具,原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改 2)下载地址:到Fiddler官网下载,直接百度 Fiddler官网 2 Fiddler抓HTTP的包 比如我们需要抓谷歌浏览器的http请…

java继承与覆盖_简单的继承,方法重载与方法覆盖

[java]代码库package com.jiarui;public class Demo1 {public static void main(String[] args) {Dog dog1 new Dog(2,"大黄");System.out.println(dog1.name"的年龄为&#xff1a;"dog1.getAge());dog1.Cry();Cat cat1new Cat(3,"小花");cat1.C…

【C语言简单说】四:常量

常量和变量是一种相对的概念&#xff0c;在这里我开始跟大家说说常量和变量的区别。可能前几节的小伙伴们并没有能感受出来&#xff0c;不过有了常量的对比那么将会有很好的理解。 .._|||||.. 头昏眼花 常量&#xff0c;就是一些固定的数据&#xff0c;也就是说你把数据装到…

虚幻4 碰撞过滤

原创翻译&#xff0c;转载请注明出处。&#xff08;http://blog.csdn.net/sinat_24229853/article/details/51090259&#xff09; 英文原文&#xff1a;https://www.unrealengine.com/blog/collision-filtering?langzh-CN 选择什么样的碰撞显然是很重要的。但它可能会很棘手&…

基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客?

前言OK&#xff0c;我也来造轮子了博客系统从一开始用WordPress&#xff0c;再到后来用hexo、hugo之类的静态博客生成放github托管&#xff0c;一直在折腾折腾是为了更好解决问题&#xff0c;最终还是打算自己花时间搞一个好了本系列文章将记录博客的开发过程~ 将会持续更新&am…

Diocp截图

跑了个数据库的查询和插入&#xff0c;删除。 Http SVR DEMO http://123.232.98.202:8081/

【C语言简单说】五:常用运算符

其实。。。这一节我我猜大家几分钟就会了&#xff08;&#xff09;…(⊙_⊙;)… ○圭~○列~~怎麼酱&#xff1f; 因为我相信大家的智商&#xff0c;我就随便给大家提一下就好了。我们看以下的代码&#xff1a; #include<stdio.h> #include<stdlib.h> int main(){…

sql 注入神器sqlmap 源码分析之调试sqlmap

为什么80%的码农都做不了架构师&#xff1f;>>> 相信大家平时 用sqlmap 命令&#xff0c;比如 python sqlmap.py -u"https://team.oschina.net/action/team/create" --data"nameonlyGuest&identonlyGuest&sidentonlyGuest&temp1431349…

【C语言简单说】六:取模运算符以及变量的扩展

┴┴ &#xff08;╰(&#xff40;□′)╯&#xff08; ┴┴ … 这一节我们就来说另外的运算符——取模运算符&#xff08;说白了跟取余数差不多…&#xff1c;—_-)&#xff01;&#xff01;&#xff01;&#xff09; 先看看好难懂的定义&#xff1a;取模运算和取余运算两个…

ExtJs5.0在WebStorm上的使用之入门教程(一)编写第一个网页 HelloExt

首先&#xff0c;必须声明一下笔者使用的软件版本&#xff1a; 前端开发工具&#xff1a;WebStorm 11.0.3 辅助插件&#xff1a;ext-5.0.0-gpl 以上工具包括下面的代码我已经打包上传在此处了&#xff1a;点击打开链接 先上代码&#xff0c;再废话&#xff1a;<!DOCTYPE htm…

腾讯视频涨价:一年多赚74亿!关注我领取腾讯VIP会员,周卡低至7元

不久前&#xff0c;腾讯视频的用户又一次“喜迎会员价格上涨”&#xff0c;甚至让腾讯视频因此登上了微博热搜。但要知道的是&#xff0c;此前在去年4月的时候&#xff0c;腾讯视频就已经涨过一次价了。4月9日&#xff0c;腾讯视频方面发布通知称&#xff0c;将于4月20日零点调…

使用JUnitParams简化Parameterized tests

为什么80%的码农都做不了架构师&#xff1f;>>> 序 junit4的Parameterized tests的使用方法太过费劲了&#xff0c;这里介绍下如何使用JUnitParams来简化Parameterized tests。 junit4原生的Parameterized tests实例 RunWith(Parameterized.class) public class Fi…

无约束优化问题求解(4):牛顿法后续

目录 前言SR1, DFP, BFGS之间的关系 BB方法Reference 前言 Emm&#xff0c;由于上一篇笔记的字数超过了要求&#xff08;这还是第一次- -&#xff09;&#xff0c;就把后续内容放到这篇笔记里面了&#xff0c;公式的标号仍然不变&#xff0c;上一篇笔记的连接在这&#xff1a;…

【C语言简单说】七:自定义函数(1)

在最开始的说过&#xff0c;函数可以比喻工具箱&#xff0c;那么我们现在开始自己开始制作函数了&#xff0c;自己制作函数是很简单的&#xff0c;如下代码&#xff1a; #include<stdio.h> #include<stdlib.h> //头文件下面 void dy(){printf("这里是dy函数\…

哈夫曼编码算法 java_我所知道的算法之哈夫曼编码

上一篇文章中提到数据结构&#xff1a;哈夫曼树&#xff0c;今天接着学习由哈夫曼提出编码方式&#xff0c;一种程序算法。简称&#xff1a;哈夫曼编码一、什么是哈夫曼编码&#xff1f;与哈夫曼树一样&#xff0c;会不会有小伙伴对哈夫曼编码很陌生&#xff0c;有疑惑问题疑惑…

Windows之Wireshake之抓HTTP请求包(过滤目的IP)

1 问题 用Wireshake抓取HTTP请求包 2 解决办法 直接在在WireShare里面过滤条件输入http 然后在浏览器输入http的请求,我的效果如下 看吧,都是http请求 如果数据太多,我只需要过滤一个目的的ip,我们可以这样设置参数 ip.addr == 目的ip && http 如下图 然后我输…

html使用element ui_Kendo UI for jQuery使用教程:自定义小部件(二)

Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。Kendo UI通过继承基本窗口小部件类为您提供创建自定义窗口小部件的选项。处理事件1. 将更…

ASP.NET MVC 个人学习笔记之 Controller传值

2019独角兽企业重金招聘Python工程师标准>>> //ControllerViewBag.Message "Modify this template to jump-start your ASP.NET MVC application."; // View<section class"featured"><div class"content-wrapper"><…