jquery实现京东淘宝首页的轮番效果图
主要是绑定事件以及实现自动滚轮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
height:650px;
width: 500px;
border: dashed cadetblue 5px;
margin: 0 auto;
position: relative;
}
/*.num{*/
/*position: absolute;*/
/*left:0;*/
/*top:0;*/
/*}*/
.num li{
height:24px;
width: 24px;
background-color: grey;
border-radius:80%;
/*使每个数字在圈圈之内显示*/
text-align: center;
display: inline-block;
font-size: 20px;
margin: 5px;
cursor: pointer;
} ul li{
list-style: none;
}
.outer .img li{
position: absolute;
left:0;
top:0; }
.num{
position: absolute;
left:0;
/*top:0;*/
bottom: 10px;
font-size: 0;
/*情况num下面文本内容*/
text-align: center;
width: 100%; /*告诉按照宽度的100%来居中*/
}
.button{
height: 60px;
width: 40px;
background-color: darkgoldenrod;
position: absolute;
/*left:0;*/
top:50%;
margin-top: -30px;
/*移动正中间*/
opacity: 0.6;
font-size: 40px;
text-align: center;
line-height:60px;
display: none;
/*默认隐藏起来这个框框*/
}
.btn_right{
right:0;
/*把另外一个标签移动到右边*/
}
.outer:hover .button{
display: block;
}
.outer .num li.current{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="11.jpg"></li>
<li><img src="22.jpg"></li>
<li><img src="33.jpg"></li>
<li><img src="44.jpg"></li>
<li><img src="55.jpg"></li>
<!--会先显示最后一张,因为在加载中,后面的内容可以理解为离我们更近,就先显示出来了-->
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> </ul>
<div class="btn_left button" ><</div>
<div class="btn_right button">></div>
</div> <script src="jquery-3.1.1.js"></script>
<script>
$(function () {
$('.num li').first().addClass('current');
$('.num li').mouseover(function () {
$(this).addClass('current').siblings().removeClass('current');
// 当鼠标悬浮上去就触发该事件
var index = $(this).index();
i=index;
//根据索引值取到对应图片的索引值,fadein后面的参数表示过1秒显示出来,fadeout表示隐藏
$('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
}); // 自动播放图片
i = 0;
var time = setInterval(move, 1500); function move() {
i++;
if (i == 5) {
i = 0;
}
$('.num li').eq(i).addClass('current').siblings().removeClass('current');
$('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
//每1.5秒执行一次,改变数字框框的颜色以及控制图片的显示以及隐藏
} $('.outer').hover(function () {
clearInterval(time)
}, function () {
time = setInterval(move, 1500);
}); $('.btn_right').click(function(){
move()
});
//点击有边框直接往右边走
$('.btn_left').click(function(){
if(i==0){
i=3
}else {i=i-2;} move();
});
});
//触碰div则接触自动更换图片,鼠标离开则继续自动滚动图片 </script>
</body>
</html>
效果如图
jquery实现京东淘宝首页的轮番效果图的更多相关文章
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 淘宝首页源码藏美女彩蛋(下)(UED新作2013egg)
我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
- 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 模仿淘宝首页写的高仿页面,脚本全用的原生JS,菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
- Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...
- 浅谈android中只使用一个TextView实现高仿京东,淘宝各种倒计时
今天给大家带来的是只使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.近期公司一直加班也没来得及时间去整理,今天难得歇息想把这个分享给大家.只求共同学习,以及自己兴许 ...
随机推荐
- javaweb基础(35)_jdbc处理oracl大数据
一.Oracle中大数据处理 在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这种 ...
- Maven tomcat插件 远程发布【Learn】
Tomcat配置修改: ①.conf/tomcat-users.xml <role rolename="manager-gui"/> <role rolename ...
- 判断一个Object是否为数组Array的方法
1.constructor constructor 属性是每个有原型对象的原型成员 arr.constructor == Array //true说明arr是数组 2.isArray arr.isA ...
- java.lang.UnsupportedOperationException: Exception occurred during processing request: null
1.Action有问题,Struts2注解拼写错误,注解包版本不匹配! 2.今天还有一个错误,Tomcat服务器异常,无法启动,Remove/clean后还是无法启动 :极大可能是web.xml 写错 ...
- mysql基础 日期类型
- Windows Subsystem for Linux(WSL)安装记录
什么是WSL Windows Subsystem for Linux(简称WSL)是一个为在Windows 10上能够原生运行Linux二进制可执行文件(ELF格式)的兼容层.它是由微软与Canoni ...
- gdb-pada调试实例
先编写个简单的hello的程序 hello.c (ps:有没有头文件行不行,试试不就知道了) int main(){ printf("hello!\n"); int m,n; in ...
- JS下载文件常用的方式
下载附件(image,doc,docx, excel,zip,pdf),应该是实际工作中经常遇到一个问题:这里使用过几种方式分享出来仅供参考; 初次写可能存在问题,有问题望指出 主要了解的几个知识 ...
- 子查询,用户管理,pymysql使用
当我们的一条记录 分散不同的表中时,就需要进行多表查询例如 一对一 一对多 多对多 1.笛卡尔积查询 意思就是将两个表中的所有数据 全部关联在一起例如A表有两条 B表有三条 一共有6条会产生大量的错误 ...
- ZOJ3640 概率DP
Background If thou doest well, shalt thou not be accepted? and if thou doest not well, sin lieth at ...