jq实现图片轮播:圆形焦点+左右控制+自动轮播
来源：http://www.ido321.com/862.html
html代码：
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta http-equiv="content-type" content="text/html;charset=utf-8">
5: <title>JQ图片轮播</title>
6: <!-- css -->
7: <link rel="stylesheet" type="text/css" href="style.css">
8: <!-- js -->
9: <script type="text/javascript" src="jquery.min.js"></script>
1:
2: <script type="text/javascript" src="style.js">
</script>
10: </head>
11: <body>
12: <div id="ad">
13: <ul>
14: <li>
15: <a href="#" title="位置1"><img src="ad.png"></a>
16: </li>
17: <li>
18: <a href="#" title="位置2"><img src="1.jpg"></a>
19: </li>
20: <li>
21: <a href="#" title="位置3"><img src="2.jpg"></a>
22: </li>
23: <li>
24: <a href="#" title="位置4"><img src="3.jpg"></a>
25: </li>
26: </ul>
27: </div>
28: <div class="slideshortcut">
29: <a id="SlidePrev" class="prev"><</a>
30: <a id="SlideNext" class="next">></a>
31: </div>
32: <div class="jiaodiandiv">
33: <ul>
34: <li id="selectli"><span>1</span></li>
35: <li><span>2</span></li>
36: <li><span>3</span></li>
37: <li><span>4</span></li>
38: </ul>
39: </div>
40: </body>
41: </html>
css代码
1: #ad
2: {
3: width: 1350px;
4: height: 370px;
5: overflow: hidden;
6: margin-left:-5px;
7: position: relative;
8: }
9: #ad ul
10: {
11: list-style: none;
12: position: absolute;
13: margin-left: -40px;
14: }
15: #ad ul li
16: {
17: float: left;
18: width: 1350px;
19: height: 370px;
20: position: relative;
21: }
22: .slideshortcut a
23: {
24: color: #000000;
25: text-decoration: none;
26: background-color: #fff;
27: display: block;
28: position: absolute;
29: z-index: 500;
30: top: 150px;
31: width: 50px;
32: height: 50px;
33: border: 1px solid red;
34: font-size: 40px;
35: line-height: 40px;
36: text-align: center;
37: opacity: 0;
38: }
39: .slideshortcut a:hover
40: {
41: color: #000000;
42: text-decoration: none;
43: }
44: .prev
45: {
46: left: 150px;
47: }
48: .next
49: {
50: left: 1200px;
51: }
52: .jiaodiandiv
53: {
54: position: absolute;
55: z-index: 200;
56: top: 320px;
57: left: 42%
58: }
59: .jiaodiandiv ul
60: {
61: list-style: none;
62: }
63: .jiaodiandiv ul li
64: {
65: width: 30px;
66: height: 30px;
67: margin-left: 10px;
68: float: left;
69: border: 1px solid #B7B7B7;
70: background-color: #B7B7B7;
71: border-radius:15px;
72: text-align: center;
73: }
74: #selectli
75: {
76: background-color: #FF4400;
77: }
78: .jiaodiandiv li:hover
79: {
80: cursor: pointer;
81: }
82: .jiaodiandiv span
83: {
84: font-size: 20px;
85: line-height: 30px;
86: }
js代码：
1: $(document).ready(function()
2: {
3: /*轮播*/
4: var index = 0;
5: var jdlis = $('.jiaodiandiv li'); /*焦点li元素集合*/
6: var timer;
7: var liWidth = $('#ad').width();
8: var len = $("#ad ul li").length;
9: //左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
10: $("#ad ul").css("width",liWidth * (len));
11:
12: //上一张按钮
13: $("#SlidePrev").click(function() {
14: clearInterval(timer);
15: index -= 1;
16: if(index == -1) {index = len - 1;}
17: showPic(index);
18: });
19:
20: //下一张按钮
21: $("#SlideNext").click(function() {
22: clearInterval(timer);
23: index += 1;
24: if(index == len) {index = 0;}
25: showPic(index);
26: });
27: //轮播
28: $('#ad').hover(
29: function()
30: {
31: clearInterval(timer); /*停止动画*/
32: $('.slideshortcut a').show().css('opacity','0.4');
33: },
34: function()
35: {
36: $('.slideshortcut a').hide();
37: timer=setInterval(function() {
38: showPic(index);
39: index++;
40: if(index == len) {index = 0;}
41: },2000);
42: }).trigger("mouseleave");
43: /*显示index图片*/
44: function showPic(index){
45: var nowLeft = -index*liWidth;
46: jdlis.eq(index).css('backgroundColor','#FF4400');
47: jdlis.not(jdlis.eq(index)).css('backgroundColor','#B7B7B7');
48: $("#ad ul").stop(true,false).animate({"left":nowLeft},300);
49: /*$('#loginimg').hide().fadeIn(1000);*/
50: }
51: $('.slideshortcut a').mouseover(function()
52: {
53: $('.slideshortcut a').show();
54: });
55: $('.prev').mouseover(
56: function()
57: {
58: $(this).css({opacity:'0.95',cursor:'pointer'});
59: });
60: $('.next').mouseover(
61: function()
62: {
63: $(this).css({opacity:'0.95',cursor:'pointer'});
64: });
65: /*点击焦点区的div显示对应图*/
66: jdlis.click(
67: function(){
68: clearInterval(timer);
69: index = jdlis.index(this);
70: showPic(index);
71: });
72: });
打包下载：http://download.csdn.net/detail/u011043843/7994017
jq实现图片轮播:圆形焦点+左右控制+自动轮播的更多相关文章
- jquery特效（4）—轮播图②（定时自动轮播）
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- JQ简单图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- 一、ionic 图片轮播问题
使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...
- swiper插件的简单使用，实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction
swiper4轮播设置autoplay自动切换后,即默认设置: <script> var mySwiper = new Swiper('.swiper-container', { auto ...
- JQ图片轮播
<script src="{staticurl action="jquery.js" type="js"}"></scri ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...
随机推荐
- *[hackerrank]Algorithmic Crush
https://www.hackerrank.com/contests/w4/challenges/crush 第一眼觉得要用线段树,但据说会超时.其实这个可以通过生成pair排序来做. #inclu ...
- 枚举桌面应用程序lnk路径并得到对应程序的绝对路径（使用SHGetDesktopFolder函数枚举，然后使用COM查询IShellFolder，IShellLink和IPersistFile接口）
// 枚举桌面上应用程序的lnk路径 void EnumDesktopLnkPath() { WCHAR szPath[MAX_PATH] = {0}; SHGetSpecialFolderPathW ...
- WCF入门（十）---WCF事务
事务处理在WCF(Windows Communication Foundation)是一套遵循一些性质,统称为ACID的操作.这里,如果一个操作出现故障,整个系统就会自动失败.如网上订单生成,就可能使 ...
- WCF 简单示例
WCF(Windows Communication Foundation,WCF)是基于Windows平台下开发和部署服务的软件开发包(Software Development Kit,SDK).WC ...
- Struts2+JSON+JQUERY DEMO
看到别人用了Struts2和JSON,自己也想练练手.记录下练习过程中遇到的问题,以便参考. 使用Maven新建项目: 先挂上pom.xml <project xmlns="http: ...
- PHP程序员的40点陋习
1.不写注释 2.不使用可以提高生产效率的IDE工具 3.不使用版本控制 4.不按照编程规范写代码 5.不使用统一的方法 6.编码前不去思考和计划 7.在执行sql前不执行编码和安全检测 8.不使用测 ...
- [UESTC1059]秋实大哥与小朋友（线段树, 离散化）
题目链接:http://acm.uestc.edu.cn/#/problem/show/1059 普通线段树+离散化,关键是……离散化后建树和查询都要按照基本法!!!RE了不知道多少次………………我真 ...
- C库函数手册(ctype.h)
ctype.h函数说明:int isalpha(int ch) 若ch是字母('A'-'Z','a'-'z')返回非0值,否则返回0 int isdigit(int ch) 若ch是数字('0'- ...
- Huge CSV and XML Files in Python, Error: field larger than field limit (131072)
Huge CSV and XML Files in Python January 22, 2009. Filed under python twitter facebook pinterest lin ...
- oracle判断一个字符串中是否包含另外一个字符串
select * from a where instr(a,b)>0; 用于实现B字段是A字段中的某一部分的时候,要论顺序或者要相邻的字符. 如果想要不论顺序或者不相邻的字符时,定义函数可以实现 ...