文档章节

焦点图(轮播)

0000001
 0000001
发布于 2014/06/17 15:45
字数 180
阅读 270
收藏 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
朝阳
前端工程师
私信 提问
27、有赞Vant组件库的引入及轮播图片预览的实现②

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

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

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

awbeci
2013/09/18
0
0
13、优化轮播图组件与vue深度处理器

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

Ewall_
06/22
0
0
pixviewer.swf相关

做网站也蛮久了,有时候经常会遇到一些需要轮播的图片,现在网上比较流行的,使用比较方便的就是pixviewer.swf这段flash了,今天因为有人要在我们网站的焦点图片上投放广告,而这个焦点图就是...

simpower
2015/04/07
0
0
请高手帮忙分析、抓取一个轮播焦点图效果

里面有一个轮播焦点图效果,我把页面代码里涉及到的文件都下载到本地,但还是无法实现网上的效果 朋友们帮帮忙啊 http://www.mix-box.com.cn/join/helper.shtml...

gzdd
2014/07/11
48
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 分布式链路跟踪 Sleuth + Zipkin + Elasticsearch

随着业务越来越复杂,系统也随之进行各种拆分,特别是随着微服务架构的兴起,看似一个简单的应用,后台可能很多服务在支撑;一个请求可能需要多个服务的调用;当请求迟缓或不可用时,无法得知...

编程SHA
8分钟前
1
0
Swift-清除缓存

func removeCache (){ // 取出cache文件夹路径.如果清除其他位子的可以将cachesDirectory换成对应的文件夹 let cachePath = NSSearchPathForDirectoriesInDomains(FileMan...

west_zll
8分钟前
1
0
kl键盘事件

frameworks/base/data/keyboards路径下定义了很对kl文件。如Vendor_0416_Product_0300.kl,定义了某某遥控器的按键事件 # TVkey 103 DPAD_UPkey 108 DPAD_DOWNkey 105 DPAD_LEFTk...

安卓工程师王恒
12分钟前
1
0
CentOS 7 安装 Docker

工具: Oracle VM VirtualBox 虚拟机 ,本地电脑win10 系统: 虚拟机装 centos 7 前置条件: Docker 要求 CentOS 系统的内核版本高于 3.10 1. 通过 uname -r 命令查看当前的内核版本 2. 如果不够...

_大侠__
22分钟前
1
0
webrtc onAddStream回调流程

背景 webrtc代码基于M59 正文 1. 回调设置和处理 (1)java层先在监听器中实现回调处理函数,如下所示: private class PCObserver implements PeerConnection.Observer { @Override...

bill_shen
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部