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 ...
随机推荐
- 调用微信退款接口时，证书验证出现System.Security.Cryptography.CryptographicException: 出现了内部错误 解决办法
1.证书密码不正确,微信证书密码就是商户号 解决办法:请检查证书密码是不是和商户号一致 2.IIS设置错误,未加载用户配置文件 解决办法:找到网站使用的应用程序池-->右击-->高级设置- ...
- Tkinter隐藏窗口再让他显示出来的例子
隐藏主要是 : withdraw()函数. 重新显示出来主要是: update()和deiconify()函数. 来源:http://www.blog.pythonlibrary.org/2012/0 ...
- 数学之路-python计算实战(19)-机器视觉-卷积滤波
filter2D Convolves an image with the kernel. C++: void filter2D(InputArray src, OutputArray dst, int ...
- Scala的XML操作
8. XML 8.1. 生成 Scala原生支持xml,就如同Java支持String一样,这就让生成xml和xhtml非常easy优雅: val name = "james ...
- Android 学习资源[转]
因为一些大家都知道的原因,android很多官方出品的优秀开发资源在国内无法访问. 国内的同行们对此也做出了很多努力,有很多朋友通过各种手段把很多优秀的资源搬运到了国内,为国内android开发者提供 ...
- 阿里云server（ECS）优惠券领取
CoderMan的博客也是放置在阿里云的ECS上.速度绝对是刚刚的,大家打开的速度肯定不会慢. 有些同志们至今可能还在用虚拟主机吧,其实阿里云server真心不贵,有俩种计费方式:各自是按月计费和按流 ...
- a标签中调用js的几种方法
1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议 ...
- java去全半角空格,trim(), replaceAll(" +",""),replaceAll("\\s*", ""), replaceAll(" | ", "")
JAVA中去掉空格 . String.trim() trim()是去掉首尾空格 .str.replace(" ", ""); 去掉所有空格,包括首尾.中间 St ...
- Source not found for StandardEngine(ContainerBase).initInternal() line: 1078
总是这样 在复制完一个项目,并重新起了个名字后. 再打开网页就怎么也打开不了. 第一反应是tomcat出问题了. 于是有了这样的问题: Source not found for StandardE ...
- POJ 1696 Space Ant（点积的应用）
Space Ant 大意:有一仅仅蚂蚁,每次都仅仅向当前方向的左边走,问蚂蚁走遍全部的点的顺序输出.開始的点是纵坐标最小的那个点,開始的方向是開始点的x轴正方向. 思路:从開始点開始,每次找剩下的点中 ...