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 ...
随机推荐
- WPF案例 (六) 动态切换UI布局
原文:WPF案例 (六) 动态切换UI布局 这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTempla ...
- hdu4151(二分)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4151 题意:找出比n小的没有重复数字的总个数,例如12以内11不符合,1~10都符合. 分析:直接利用 ...
- poj2763(树链剖分)
题目链接:http://poj.org/problem?id=2763 题意:定一棵带边权的树,要求支持两种操作:1)询问树中某两点间的距离. 2)修改某条边的权值. 分析:树链剖分,边权修改,路径求 ...
- hdu1159 LCS模板题
题目分析 pid=1159">原题地址 最简单的最长公共子序列(LCS)问题的模板题了.不解释. ------------------------------------------- ...
- 就这样CSDN账号被人盗了??
和往常一样,来到公司后的第一件事情就是看看自己博客.没想到今天一看,小伙伴惊呆了. 莫名其妙地多了这个多不是神马的博文,还好几篇. 这说明CSDN账号也不怎么安全哦,以后小伙伴们要注意了.
- Socket编程实践(12) --UDP编程基础
UDP特点 无连接,面向数据报(基于消息,不会粘包)的传输数据服务; 不可靠(可能会丢包, 乱序, 反复), 但因此普通情况下UDP更加高效; UDP客户/服务器模型 UDP-API使用 #inclu ...
- 安装ecshop提示“安装数据失败”或者“创建管理员帐号”
解决方法: 在install/includes/init.php文件的顶部,<?php 下增加: date_default_timezone_set ('Asia/Shanghai'); 即可 ...
- zend studio 10 实现代码自动换行
在一篇zend framework 的PHP编码标准的文章中看到了这么一段: 一行 80 字符以内是比较合适,就是说,ZF 的开发者应当努力在可能的情况下保持每行代码少于 80 个字符,在有些情况下, ...
- 文件下载-SpringMVC中測试
直接改动文件路径就能够.其它都不须要改动,帮助类已经为大家写好,可直接使用 1.Scroller: /** * 下载文件 * @author liupeng * @param request * @p ...
- JDBC连接数据库和释放连接
用久了hibernate现在对于JDBC是怎么实现数据库的连接和释放,所以特地总结下关于JDBC的知识,目的是用于提醒自己很多Java的基础知识需要健全. package com.ssh.action ...