文档章节

焦点图(轮播)

0000001
 0000001
发布于 2014/06/17 15:45
字数 180
阅读 272
收藏 4

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

<div>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

</div>

</div>

<script language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>

<script type="text/javascript">

// Banner 轮播

var t = n = 0, count; 

$(function(){

count=$(".slider_list a").length; 

$(".slider_list a:not(:first-child)").hide();  

$(".slider li").click(function() { 

var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4 

n = i; 

if (i >= count) return; 

$(".slider_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); 

$(this).siblings().removeClass("cur").end().addClass("cur");

}); 

t = setInterval("showAuto()", 3000); 

$(".slider").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);}); 

});

function showAuto() 

n = n >=(count - 1) ? 0 : ++n; 

$(".slider li").eq(n).trigger('click');

}; 

</script>

</body>

</html>



© 著作权归作者所有

上一篇: tab
下一篇: 单行文字滚动
0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
加载中

评论(0)

27、有赞Vant组件库的引入及轮播图片预览的实现②

前言:上一章主要是安装并引入了vant组件库;这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单,我可能比较懒。。。 Github:https://github.com/Ewall1106/mall...

Ewall_
2018/09/10
0
0
30款jQuery常用网页焦点图banner图片切换 下载

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 ...

awbeci
2013/09/18
0
0
拓展-教你手把手用纯CSS写轮播图

先看成品图 [示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html 一、随便说几句#### css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也...

osc_2g1pfov3
2019/11/27
4
0
13、优化轮播图组件与vue深度处理器

前言:上篇讲了vue里面轮播图组件的使用,还有有个小问题可以优化一下。 github:https://github.com/Ewall1106/mall 1、焦点问题 我们看到这里的焦点会有一个默认的颜色,改变这个焦点颜色也...

Ewall_
2018/06/22
0
0
【React Natvie】React-native-swiper的安装和配置【ES6】

  react-native-swiper轮播图,是我们开发中特别常见的效果,首先感谢编写react-native-swiper的大神,让我们方便了很多。这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图. g...

osc_7i8xvyz1
2019/05/31
2
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯副总裁魏颖:提瓢入市,倚杖而归

  魏颖,腾讯公司副总裁,2008 年加入腾讯,全面负责公司薪酬福利、绩效管理、员工关系以及海外业务人力资源。   ————————   很多人对人力资源(HR)工作的理解就是一些人事流...

alkcendkljk
31分钟前
13
0
OSChina 周二乱弹 —— 我要一份儿大姐姐的爱

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @Cobbage :分享赵雷的单曲《阿刁 (Diao)》: 《阿刁 (Diao)》- 赵雷 手机党少年们想听歌,请使劲儿戳(这里) @喵星人123 :昨天睡到半夜 突然...

小小编辑
32分钟前
11
0
window下 mongodb开启用户名和密码 权限

在默认情况下,mongod是监听在127.0.0.1之上的,任何客户端都可以直接连接27017,且没有认证。 好处是,用户可以即时上手,不用担心被一堆配置弄的心烦意乱。 坏处是,公网服务器搭建MongoDB...

东东笔记
今天
9
0
数据倾斜

数据倾斜: 两种数据倾斜发生的现象: 80%情况下都发生挂了,只有极少20%情况下能把task执行完成 窄依赖:结构简单,如果发生数据丢失,方便查找丢失的数据 宽依赖:结构复杂,如何发生数据丢...

七宝1
今天
20
0
我的jdk源码(十一):ArrayList

一、概述 ArrayList类是AbstractList的子类,实现了具体的add(), set(), remove()等方法。它是一个可调整大小的数组可以用来存放各种形式的数据。 二、源码分析 (1) 类的声明,源码如下: ...

Java觉浅
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部