02-普通轮播图-上下滚动
1、结构
<div class="banner1">
<ul class="w_ul1">
<li><a href="#" target="_blank"><img src="data:images/tu01.jpg" width="755" height="347"></a></li>
<li><a href="#" target="_blank"><img src="data:images/tu02.jpg" width="755" height="347"></a></li>
<li><a href="#" target="_blank"><img src="data:images/tu01.jpg" width="755" height="347"></a></li>
<li><a href="#" target="_blank"><img src="data:images/tu02.jpg" width="755" height="347"></a></li>
</ul>
<ol class="h_num1">
<li class="hover11"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
2、样式
.banner1{ width:755px; height:347px; overflow:hidden; position:relative; margin:40px 0 50px 90px;}
.banner1 .w_ul1{ height:5000px;}
.banner1 .w_ul1 li{ width:755px; height:347px;}
.banner1 .h_num1{ position:absolute; right:0; bottom:10px;}
.banner1 .h_num1 li{ width:50px; height:6px; background:#960; float:left; margin:0 4px; cursor:pointer;}
.banner1 .h_num1 .hover11{ background:#FFEB00;}
3、效果
/*-----------上下轮播----------*/
function ft_1(li_h,wrap_1,num_h,width_1,hover_1){
var lih=li_h.height();
var repeat;
var index=0;
var length_1=li_h.length;
wrap_1.hover(function(){
clearInterval(repeat)
},function(){
repeat=setInterval(function(){
index++;
if(index==length_1)
{ index=0};
ht(index)
},3000)
}).trigger("mouseout");
num_h.mouseover(function(){
index=num_h.index(this);
ht(index)
});
function ht(index){
width_1.stop().animate({"marginTop":-lih*index});
num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
};
};
ft_1($(".w_ul1 li"),$(".banner1"),$(".h_num1 li"),$(".w_ul1"),("hover11"))
转载于:https://www.cnblogs.com/su1637/p/8178177.html
02-普通轮播图-上下滚动相关推荐
- 轮播图自动滚动 无缝连接 js
轮播图自动滚动 无缝连接 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
- JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数 日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- 透明度轮播图和滚动轮播图
js动画 使用的时候请自行修改图片,不然无法显示. 代码示例: 透明度轮播图: <!DOCTYPE html> <html lang="en"> <h ...
- 小程序 · 轮播图——上下滚动消息、禁止滑动
上下滚动的公告消息(滚动消息) 利用swiper组件来实现,通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动. 注意: 只要swiper存在vertical属 ...
- 轮播图功能的全实现(自动播放、小点点、按住停止播放、放手后开始播放...)
MainActivity /*** 1.实现了轮播图自动滚动效果<br>* 2.设置了跟随页面变化的小点点<br>* 3.解决了轮播图手指滑动后,显示页面错位的问题<br ...
- 【重点案例】b站pink老师JavaScript的PC端网页特效 案例代码——网页轮播图
目录 代码段: 1.index.js部分(全是重点) 2.animate.js部分(重点,是之前封装好的动画函数) 3.index.html部分(重点在标红区) 4.index.css部分(重点在标红 ...
- html怎么做产品轮播图,商品轮播图是什么意思(html轮播图怎么制作)
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
最新文章
- HTML5 WebAudioAPI简介(一)
- mysql行级安全_MySQL学习笔记(五):MySQL表级锁和行级锁
- 【转】日服巫术online过驱动保护分析(纯工具)(工具+自写驱动)
- B站、豆瓣都崩了,还有啥技术能靠得住?
- 查看Windows系统的开机、关机时间、开机时长等信息
- python 重定向到其他cmd_python 如何重定向到另一个终端?
- java版微信调小i机器人接口说明书_小i机器人微信公众平台调用api
- TCP/IP-ARP
- IT工作十年总结之14个单据通用字段
- java swing 组件渲染过程,swing组件介绍
- 阿里云邮件推送使用方法
- 第15章卡方检验:拟合优度和独立性检验
- 计算机基础知识(免费、全面)
- java 针对专业技能可能会被问到的面试题
- Opencv学习笔记(三) -- 图像压缩与保存
- 计算机电脑怎么改皮肤,终极:如何更改计算机鼠标的皮肤
- lange耦合器设计步骤_用于承受1000W的3dBLange耦合器及制备方法与流程
- 将谓语动词插在主语之后 指针和数组两种方法实现
- 数学建模-马尔萨斯人口问题
- 怎么学好计算机专业?
热门文章
- 二改注册登录版素材代下载搜索引擎系统源码,自带火车头采集
- NavigationDuplicated vue-router 路由重复点击报错的问题
- JeewxBoot微信管家平台源码v1.3
- 微信壹佰超级名片小程序源码v1.1.16
- MooTools教程(5):事件处理
- jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
- 用history api偷换浏览器历史记录
- jquery 修改下拉条 Ben Plum selecter
- 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容
- chage 用户密码管理