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 ...
随机推荐
- 关于CodeReview（java）（转）
关于codereview,在平时的开发中,经常忽略的环节,参照目前介绍写好代码的几本书和之前掉进的坑,做了一个总结,分享出来. 为什么要做 通过review规避一些代码层面的问题 提升可读性,方便后续 ...
- SE 2014年5月23日
两站点 A 和 B,由于业务往来需要,所以工程师提出vpn技术,同时需要保证业务流在internet上的安全性,同时在这里站点均为固定ip地址. 通过分析以上信息,确定这里使用 IPSec VPN的主 ...
- 〖Groovy〗语言使用贴士（Tips）(转)
[Groovy]是一门运行在[JVM]之上的动态语言.由[James Strachan]和[Bob McWhirter]于2003年启动开发,之后于2004年3月成为[JSR 241](Java Sp ...
- A Game of Thrones(5) - Jon
There were times—not many, but a few—when Jon Snow was glad he was a bastard. As he filled his wine ...
- 怎样让你的安卓手机瞬间变Firefox os 畅玩firefox os 应用
Firefox os 手机迟迟不能在国内大面积上市.如今能买到的Firefox os手机国内就一款Firefox os ZET OPEN C ,但这款手机配置确实还不如人意.价格方面也不实惠,对于我们 ...
- Unity3D发布WebPlayer时Failed to download data file解决方案
今天发布WebPlayer时, 发现直接打开html是可以正常运行的, 但是通过iis访问的话就会报错: Failed to download data file. 一开始以为是防火墙, 后来发现不是 ...
- css实现自适应屏幕高度
body,html{ margin:0px; height:100%; }
- asp.net用户身份验证时读不到用户信息的问题 您的登录尝试不成功。请重试。 Login控件
原文:asp.net用户身份验证时读不到用户信息的问题 您的登录尝试不成功.请重试. Login控件 现象1.asp.net使用自定义sql server身份验证数据库,在A机器新增用户A,可以登录成 ...
- 时间复杂度为O(nlogn)的LIS算法
时间复杂度为 n*logn的LIS算法是用一个stack维护一个最长递增子序列 如果存在 x < y 且 a[x] > a[y],那么我们可以用a[y]去替换a[x] 因为a[y]比较小 ...
- 图像特效——摩尔纹 moir
%%% Moir %%% 摩尔纹 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algo ...