关键词:
我打算做一个自动轮播图,效果如图所示,小圆点点击效果已经OK,我想让图片上那个左右按钮与小圆点对应实现一个图片点击轮播(首尾相连)。
之后再添加一个时间轮播效果(首尾相连)。
以下是css代码
<style type="text/css"> * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; } /*切换按钮*/ .arrow{ width: 50px; height: 50px; color: #000; font-size: 30px; border-radius:25px ; background:rgba(255,255,255,0.7); z-index:2; top: 145px; font-weight:bold ; position: absolute; text-align: center; line-height: 46px; display: none; } #prev{ left: 0px; } #next{right: 0px;} .arrow:hover{background:rgba(255,255,255,0.3);color: #4d4f08;} #box:hover .arrow {display: block;} /*轮播图部分*/ #box{ width: 900px; height: 400px; margin: 0 auto; position: relative; border: 1px solid #ccc; } #list{ width: 100%; height: 350px; float: left; /*overflow: hidden;*/ cursor: pointer; } #list img{ width: 900px; height: 100%; float: left; z-index: 1; margin-right: -100%; } #buttons { position: absolute; height: 10px; width: 100%; z-index: 2; bottom: 20px; } #buttons ul{ height: 10px; width: 130px; margin: 0 auto; } #buttons ul li { cursor: pointer; float: left; border: 1px solid #fff; width: 7px; height: 7px; border-radius: 50%; background: #a4a3a3; margin:3px 6px; } #buttons .on{background-color: #e42929;} #buttons li:hover{background-color: #e42929;} </style>
以下是HTML代码
<div id="box"> <div id="list"> <img src="img/001.jpg" alt="1"> <img src="img/002.jpg" alt="2"> <img src="img/003.jpg" alt="3"> <img src="img/004.jpg" alt="4"> <img src="img/005.jpg" alt="5"> <img src="img/006.jpg" alt="6"> </div> <div id="buttons"> <ul> <li index="1" class="on"></li> <li index="2"></li> <li index="3"></li> <li index="4"></li> <li index="5"></li> <li index="6"></li> </ul> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
下边是jQuery代码,因为不熟所以,比较少。
$(function(){ $("#list img:gt(0)").hide() $("#buttons ul li").on("click",function(){ $(this).addClass("on").siblings().removeClass("on") var TheIndex=$(this).index() $("#list img").eq(TheIndex).fadeIn().siblings().fadeOut() }) // $("#prev").on("click",function(){ // // }) })
前端之jquery(代码片段)
01-jQuery的介绍1.为什么要使用jQuery在用js写代码时,会遇到一些问题:window.onload事件有事件覆盖的问题,因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐,代码量多。代码很乱,各个页面到处都是。动画效... 查看详情
前端jquery部分简单整理
jQuery的介绍为什么要使用jQuery在用js写代码时,会遇到一些问题:window.onload事件有事件覆盖的问题,因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐,代码量多。代码很乱,各个页面到处都是。动画效果很... 查看详情
asp.netjquery调用webservice返回json数据的一些问题
...加深一下自己的印象。有错误的地方还请大神指出。 前端js代码:1<script 查看详情
前端----jquery的介绍(代码片段)
1.为什么要使用jQuery在用js写代码时,会遇到一些问题:window.onload事件有事件覆盖的问题,因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐,代码量多。代码很乱,各个页面到处都是。动画效果很难实... 查看详情
刚学python,抓中文网页遇到编码的问题,怎么转换也不行
可以用现成的框架,比如scrapy,已经帮你处理了编码的问题。如果一定要自己写的话,可以先看一下你抓取站点的编码,一边页面里都会有,比如百度知道里的:<metahttp-equiv="content-type"content="text/html;charset=gbk"/>说明是gbk编码... 查看详情
最近网页开发,遇到的,微信,iphone的一些兼容性问题
最近要做一个移动前端,填字的需求,类似pc上一些程序填写序列号的界面, 填写前: h world 填写后: h e l l o world,&n 查看详情
如何在 jquery 中访问最近的 p 标签?
】如何在jquery中访问最近的p标签?【英文标题】:HowtoAccessClosestptaginjquery?【发布时间】:2012-09-2823:19:09【问题描述】:我在使用jquery中的.closest()方法时遇到问题。这是我遇到问题的html和jquery示例。HTMLERB片段<%@posts.eachdo|post|%... 查看详情
刚学python,遇到nopythoninterpreterconfiguredfortheproject,怎么解决?(代码片段)
...0c;免费领取Python、PyCharm安装教程和Python学习电子书!刚学Python,你肯定遇到过这个问题刚学Python时,拿到一个Python项目,想用pycharm打开运行,pycharm界面却显示NoPythonInterpreterconfiguredfortheproject,翻译一下是... 查看详情
分享一个与jquery相关的typeerror:$isnotafunction问题解决过程
最近碰到一个比较奇葩的问题,估计很多人也遇到过,就是jQuery可能会遇到的‘$isnotafunction’,不过我碰到的这个问题比较怪异,解决该问题也颇费了一番周折,现在给大家分享一下。运行环境描述我是通过requireJS进行js... 查看详情
如何让一个字数不定,行数不定的文字居中?(代码片段)
这两天写页面的时候,遇到一个问题:如何让一段行数和字数不定的文字居于区块的中央下面是我的方法,可能有点麻烦。如果路过的各位前辈,有更好的方法,还请在留言中指出。非常感谢。***结构***<divclass="item"><divcla... 查看详情
话说最近cmdb项目中遇到的问题整理:类方法:classmethodstaticmethod
概述最近在做一个项目:CMDB(ConfigurationManagementDatabase)资产采集,由于当中涉及一个classmethod(类方法)方法,发现不会。还有一个staticmethod(静态方法)方法一直不熟悉,所以从网上查阅的资料,加强理解,遂整理如下:@clas... 查看详情
更流畅的 Jquery 动画
...解决。只是想再试一次,希望我能尽快解决这个问题:我最近的任务是创建一个模拟基本Flash动画(即滑入和淡入淡出元素)的单页网站。当我得到一个交互式模型时,我遇到了一个大问题-不连贯的动画。该问题出现在屏幕大于... 查看详情
对于一个小白来说,遇到的前端问题
1.写在前面自从入了前端的坑。坑是越来越大,快把自己埋了。如今又開始搞样式了。2.CSS样式的写法CSS样式的写法有这么3种,以下我们一一介绍。1.外部样式表链入外部样式表是这种,一般放在<head></head>里:<linkhref=... 查看详情
最近写代码时遇到的一个错误
在刚刚结课的C++课程中,写过一个网络五子棋的大作业,其中遇到了一个关于继承的问题。在整个大作业中,写了一个Panel类,和一个ServerPanel子类继承了Panel类,在另一个class中引用时,本应该是SeverPanel的对象new成了Panel,结果... 查看详情
jquery遇到的问题(代码片段)
1.关于$.fn$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.那么你可以这样子:$("#div").abc();&nb... 查看详情
小弟刚学sql就遇到一条语句,难以理解,求各位大侠给解析!
SELECTnode.account_id,node.name,node.acc_num,node.debit,node.credit,node.balance,(COUNT(parent.name)-1)ASlevel,node.lft,node.rgtFROMaccountsASnode,accountsASparentWHEREnode.lftBETWEENparent.lftANDparent.rgtGROUPBYnode.nameORDERBYnode.lft;首先,你这个sql写的有问题,我先给你解释下... 查看详情
jQuery 可排序问题开/关检查
...述】:我又弄坏了,不知道怎么弄的。我有一个CodePen我最近的活动。我一直在尝试实现的是一个可排序的函数,它首先检查是否只有一个#p_scents。如果有,它不应该是可排序的(即.icon-sort不应该被激活)。但是,如果有多个,... 查看详情
前端备战21秋招之操作系统,线程/进程/死锁(代码片段)
前端备战秋招之操作系统内容根据春招面经整理,文末有面试遇到的相关问题笔者文笔有限,如有不足之处还请斧正文字内容较多,请细细品读,有些点可能有赘述之处,品完此文,面试与此相关的问题,就能得心应手的对付了,还能总结... 查看详情