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: //上一张button
13: $("#SlidePrev").click(function() {
14: clearInterval(timer);
15: index -= 1;
16: if(index == -1) {index = len - 1;}
17: showPic(index);
18: });
19:
20: //下一张button
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实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马的更多相关文章
- css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
<!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- jquery 焦点轮播图控制每张图片停留不同时间
轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间 *{ padding:0px; border:0px; margin:0px; } ul { list-style: ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
- jq无法获取ng-repeat元素，如何控制ng-repeat元素显示与隐藏？
之前都是在做微信小程序的页面,最近做一些html页面,页面也没什么效果,就弄了几个点击事件,控制一些元素的显示与隐藏.后面用angular来写这些页面,然后就遇到了问题,就是用ng-repeat生成的 ...
- 用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...
- Js 旋转木马 轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- MBR格式无法识别2T以上的硬盘的问题
早上有人打电话说四块2T的sata 硬盘做了raid 5之后安装window server 2012的时候,无法创建分区,安装完系统后无法给剩余的硬盘创建分区,刚开始的时候我还以为是别人分区的数量问题 ...
- ubuntu linux 13.04更新
首先备份源列表: sudo cp /etc/apt/sources.list /etc/apt/sources.list_backup 而后用gedit或其他编辑器打开: gksu gedit /et ...
- Harris角点检测算原理
主要参考了:http://blog.csdn.net/yudingjun0611/article/details/7991601 Harris角点检测算子 本文将该文拷贝了过来,并做了一些数学方面的 ...
- Android Studio 入门（转）
本文适用于从Eclipse转AndroidStudio的开发者 最近打算写一个系列的android初级开发教程,预计40篇以上的文章,结合我实际工作中的经验,写一些工作中经常用到的技术,让初学者可以少 ...
- 怎样改动SVN的地址
改动svn地址的目的有两个,一个是更改默认svn路径.还有一个就是svn库server迁移了. 我碰到的是另外一种情况,SVN的IP地址改了,须要这么切换: 在本地配置库副本根文件夹点击鼠标右键--& ...
- POJ 1184 聪明的打字员
简直难到没朋友. 双向bfs + 剪枝. 剪枝策略: 对于2--5位置上的数,仅仅有当光标在相应位置时通过swap ,up.down来改变.那么当当前位置没有达到目标状态时,left和right无意义 ...
- 在Java中怎样逐行地写文件？
下边是写东西到一个文件里的Java代码. 执行后每一次,一个新的文件被创建,而且之前一个也将会被新的文件替代.这和给文件追加内容是不同的. public static void writeFile1( ...
- XML解析中的namespace初探
原文:XML解析中的namespace初探 初学者在解析XML文件的时候最容易遇到的问题恐怕就是XML的namespace了,本文旨在对namespace做一个简要的介绍. namespace的意义无 ...
- ES6箭头函数和它的作用域
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow- ...
- unity3d 数学的数学基础和辅助类
转载注明smartdot:http://my.oschina.net/u/243648/blog/67193 1. 数学(点乘/叉乘)/unity3d的数学辅助类 2. 坐标系统(本地/世界/屏幕 ...