php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下
还是先来看一看效果图:
具体代码:
一、HTML代码分析
此效果的层次结构比较清楚:
1. class为data的p是最外层的容器,可以用来控制整个效果图显示的位置。
2. id为content的ul用来存放左侧滚动的图片。
3. id为indicator的ul用来显示右侧的指示栏。
二、CSS代码
*{margin: 0; padding: 0;}
img{
border:0;
}
.dota{
width:570px;
height: 230px;
margin:100px auto;
position: relative;
overflow: hidden;
}
.dota #content{
float: left;
list-style: none;
position: absolute;
width:380px;
height:230px;
}
.dota #content img{
width:380px;
height:230px;
}
.dota #indicator{
float: right;
list-style: none;
width:180px;
height:220px;
padding: 5px;
background-color: #100F13;
}
.dota #indicator li{
width: 180px;
height: 44px;
background: url(images/anniu.png) 0 -44px;
}
.dota #indicator li.current{
background-position: 0 0;
}
.dota #indicator li a{
display: block;
width: 160px;
height: 34px;
padding: 5px 0 5px 25px;
}
.dota #indicator li a:link , .dota #indicator li a:visited{
text-decoration: none;
color: #686477;
font: 12px/145% "宋体";
}
这里,我对indicator中li的代码进行说明:
.dota #indicator li中的css代码就是设置右侧指示栏中的每一项,注意到,这里使用了background属性,也就是说li的背景是一张图片。准备好的图片如下:
这张准备好的图片大小为 180 * 88, 而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分;所以indicator中所有的背景图片显示的是下半部分比较暗的部分; 而.dota #indicator li.current 的position属性大小为 0 0,所以默认情况下indicator的第一个显示高亮,其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 "谁" 身上来切换选中状态。
三、JQuery代码
php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧相关推荐
- html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图 代码 话不多说,先上代码,方便复制粘贴.演示 轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
- html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
- 利用swiper在vue中做轮播图,并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
- HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
- html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法 在页面中引入imgSwitch.min.js ...
- 在html中轮播图怎么做,HTML轮播图怎么做
回答:基础准备工作 1.打开Axure,页面名称命名为"图片轮播":在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,在上方菜单栏将宽调整为400, ...
- css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
- vue项目中使用swiper实现中间大,两边小的轮播图
前言 项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 实现效果如下: 下面我们来看下实现步骤: 第一步:首先在项目index.h ...
- Swiper4.x使用之图片只有一张时不进行轮播,多张才进行轮播
回想初学JavaScript时,写一个图片的轮播:那是写得惨不忍睹.现在我们再去写图片轮播的话:用Swiper(官网:https://www.swiper.com.cn)分分钟就弄好了. 但是老大又提 ...
最新文章
- torch.backends.cudnn.deterministic 使用cuda保证每次结果一样
- 别光发Paper,搞点实际问题
- 计算MySQL的内存峰值公式
- java加按钮_如何从零开始对接第三方登录(Java版):QQ登录和微博登录
- 方向盘左右能摇动_学车这么久了,你还不会打方向盘呢?
- qt 保存文件为utf8
- CentOS8如何修改系统日志的时间戳格式(rsyslog8版本)
- android 4g wifi内外网,android 中判断网络状态5G 4G 3G 还是wifi
- HP5100常见错误代码
- 移动端证件识别,支持离线识别
- joy数据向量化处理
- RTF转HTML(<div>标签)格式的方法(java)
- “蓝桥杯”练习系统——ALGO-847 盾神与简单数独
- Uncaught TypeError: Illegal invocation
- 在龙门吊上,看到破浪而来的智能时代
- mac下 iterm+Zsh+Oh My Zsh+tmux 配置方案
- Linux 系统投屏显示
- 远程连接内网路由器下的电脑
- 八、Linux全套大总结
- The first day。
热门文章
- 通用NPU与针对自动驾驶系统NPU的差异点和挑战
- vue项目中 页面生成pdf并下载,vue 中页面转PDF
- 学习Linux命令(39)
- 区块链-闪电网络示例
- 企业开展新闻软文营销的步骤有哪些?
- 如何批量下载阿里巴巴产品及公司相册
- LC100-A全功能型电感电容表,电感表,电容表,LC meter串口数据
- XXX is not assignable to javax.servlet.Servlet
- java公共和私有的区别_java – 运行时私有,公共,包关键字之间有什么区别吗?
- 深入理解CSS中的层叠上下文和层叠顺序