资源：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">&lt;</a>
  30:         <a id="SlideNext" class="next">&gt;</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实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马的更多相关文章

  1. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  2. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  3. jquery 焦点轮播图控制每张图片停留不同时间

    轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间 *{ padding:0px; border:0px; margin:0px; } ul { list-style: ...

  4. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

  5. jq无法获取ng-repeat元素，如何控制ng-repeat元素显示与隐藏？

    之前都是在做微信小程序的页面,最近做一些html页面,页面也没什么效果,就弄了几个点击事件,控制一些元素的显示与隐藏.后面用angular来写这些页面,然后就遇到了问题,就是用ng-repeat生成的 ...

  6. 用JQ去实现一个轮播效果

    前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...

  7. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  8. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  9. Js 旋转木马 轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. POJ 2948 DP

    一个row*col的矩阵,每一个格子内有两种矿yeyenum和bloggium,而且知道它们在每一个格子内的数量是多少.最北边有bloggium的收集站,最西边有 yeyenum 的收集站.如今要在这 ...

  2. dedecms 获取描述信息限制字数

    对于我刚刚刚开始对于获取到了描述的信息,但是有些字数简直是太多了,显示的样式不好看,所以我就希望限制字数,所以我来告诉你们获取描述信息限制字数的语法吧[field:description functi ...

  3. mysql自动备份

    #!/bin/bash MyUSER="SET-MYSQL-USER-NAME"     # USERNAME MyPASS="SET-PASSWORD"    ...

  4. 移动web性能优化笔记

    移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

  5. 学习笔记 Android.mk 搜索自己主动

    最近一直Android.mk这是什么一个令人沮丧的夜晚,点击此处记录. ios你担心更多.不管那么多.xcode自己解决. 文本工具:MACVIM(文本编辑工具 很有用 你可以清楚地分辨tab 和Sp ...

  6. FREESWITCH SEESION

    SESSION SESSION为FS的核心概念之一,所以需要拿出来专门的分析下. 从以下几个方面进行分析,结构类型,资源的管理,对于呼叫的意义,规格. 1.结构类型 每一次呼叫会申请一个session ...

  7. C#遍历FTP文件夹/下载

    原文链接:http://blog.csdn.net/ou8811/article/details/5295780 整个程序大致可以分为2个部分,第一部分是实现单个文件下载的方法 [c-sharp] v ...

  8. 佛祖保佑 永无BUG 永不改动

    //////////////////////////////////////////////////////////////////// // _ooOoo_ // // o8888888o // / ...

  9. Java学习之路：详细解释Java解析XML四种方法

    XML如今已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便. 对于XML本身的语法知识与技术细节,须要阅读相关的技术文献,这里面包含的内容有DO ...

  10. [Django](1093, &quot;You can&#39;t specify target table &#39;fee_details_invoices&#39; for update in FROM clause&quot;) 错误

    dele_id = Fee_details_invoices.objects.filter(fee_detail_id__in=fee_id_list, return_type='2').values ...