jq实现无缝轮播

2016-10-14 jq实现无缝轮播

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>jq实现轮播图</title>
  6 <style>
  7     *{
  8         margin: 0 auto;
  9         padding: 0;
 10         text-decoration: none;
 11         list-style: none;
 12         }
 13     #box{
 14         position: relative;
 15         width: 478px;
 16         height: 268px;
 17         margin-top: 50px;
 18         overflow: hidden;
 19         }
 20     #list{
 21         position: absolute;
 22         width: 2868px;
 23         height: 268px;
 24         z-index: -1;
 25         }
 26     #list li{
 27         float: left;
 28         }
 29     #nums{
 30         position: absolute;
 31         left: 205px;
 32         bottom: 20px;
 33         width: 120px;
 34         height: 10px;
 35         }
 36     #nums li{
 37         float: left;
 38         width: 10px;
 39         height: 10px;
 40         margin-right: 10px;
 41         border: 1px solid #ccc;
 42         border-radius: 50%;
 43         background: #333;
 44         cursor: pointer;
 45         }
 46     #nums li.on{
 47         background: #0080FF;
 48         }
 49     #box .btn{
 50         position: absolute;
 51         top: 50%;
 52         width: 28px;
 53         height: 62px;
 54         line-height: 62px;
 55         text-align: center;
 56         color: #fff;
 57         font-size: 36px;
 58         font-weight: 400;
 59         background: rgba(0,0,0,.2);
 60         cursor: pointer;
 61         display: none;
 62         }
 63     #box .prev{
 64         left: 2px;
 65         }
 66     #box .next{
 67         right: 2px;
 68         }
 69
 70      .btn:hover{
 71             background-color: RGBA(0, 0, 0, .7);
 72         }
 73     #box:hover .btn{
 74         display: block;
 75         }
 76 </style>
 77
 78 </head>
 79
 80 <body>
 81     <div id = "box">
 82         <ul id = "list">
 83             <li><img src = "images/img1.jpg"></li>
 84             <li><img src = "images/img2.jpg"></li>
 85             <li><img src = "images/img3.jpg"></li>
 86             <li><img src = "images/img4.jpg"></li>
 87             <li><img src = "images/img5.jpg"></li>
 88         </ul>
 89         <ul id = "nums">
 90             <li class = "on"></li>
 91             <li></li>
 92             <li></li>
 93             <li></li>
 94             <li></li>
 95         </ul>
 96             <a href = "javascript:;" class = "btn prev" >&lt;</a>
 97             <a href = "javascript:;" class = "btn next">&gt;</a>
 98     </div>
 99 <script src = "jquery.js"></script>
100 <script type="text/javascript">
101     $(function(){
102         var clone = $("#list li").first().clone();//复制第一张图片
103         $(‘#list‘).append(clone);//将复制的图片放置在图片最后
104
105         var size = $(‘#list li‘).size();
106         var i = 0;
107
108         //鼠标点击圆点
109         $(‘#nums li‘).mouseover(function(){
110             var index = $(this).index();
111             i = index;
112             $(‘#list‘).stop().animate({left: i*-478},500);
113             $(this).addClass(‘on‘).siblings().removeClass(‘on‘);
114             })
115
116         //向左轮播
117         $(‘.prev‘).click(function(){
118             i--;
119             if(i == -1){
120                 $(‘#list‘).css({left: -(size -1)*478});
121                 i = size -2;
122                 }
123             $(‘#list‘).stop().animate({left: -i*478},500);
124             $(‘#nums li‘).eq(i).addClass(‘on‘).siblings().removeClass(‘on‘);
125
126             });
127
128         //向右轮播
129         $(‘.next‘).click(function(){
130             move();
131             });
132         function move(){
133             i++;
134             if(i == size){
135                 $(‘#list‘).css({left: 0});
136                 i = 1;
137                 }
138             $(‘#list‘).stop().animate({left: -i*478});
139             if(i == size - 1){
140                 $(‘#nums li‘).eq(0).addClass(‘on‘).siblings().removeClass(‘on‘);
141                 }else{
142                     $(‘#nums li‘).eq(i).addClass(‘on‘).siblings().removeClass(‘on‘);
143                     }
144             }
145         //定时器
146         var t = setInterval(function(){
147             move();
148             },1500);
149
150         //鼠标滑过停止自动播放
151         $(‘#box‘).hover(function(){
152             clearInterval(t)
153             },
154              function(){
155                         t=setInterval(function () {
156                             moveR();
157                         },1500)
158              });
159     })
160 </script>
161 </body>
162 </html>
时间: 2024-10-31 01:08:42

jq实现无缝轮播的相关文章

动态添加的无缝轮播

一般的前段都会写百叶窗的无缝轮播,但那种一般局限于静态页面,就是在html后面添加多一屏的图片.但这种遇到程序员后台添加的时候就产生问题,所以我们不能在html页面中直接添加第一屏的图了,那就在jq中获取html中第一屏的内容再添加到最后

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

左右无缝轮播图的实现

无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolute;top: 0;left: 0}

jQuery插件版无缝轮播,重写了之前的代码,显得更高大上一点

轮播图之前也写了好几个,但是对于怎么实现无缝轮播还是有着不小的困惑,趁着周末了解了一下实现原理之后,重写了之前发布的案例(再看那个案例写的代码,真心心塞啊,不过只要努力学习,天天进步就好).好了,下面就来说下如何实现无缝轮播. 百度了很多,各种各样的说法,但说的都不太明白,最后还是看了视频解决的. 我实现的这种思路是这样的:1.假设你是用无序列表实现的哈,里面的每个li 包含着你的一个图片,首先呢,你得克隆一份第一张图片,并将其追加到你的ul 里面.2.通过改变ul 的left 值,你实现了一张

jquery实现图片无缝轮播显示(个人随笔)

纯属个人随笔,不当之处,欢迎指正. 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片无缝轮播显示</title> <script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script&g

jquery无缝轮播事Dome

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <style type=&qu

js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

原生JavaScript实现无缝轮播图

无缝轮播图是页面常用的特效之一,然而在实际的开发过程中,大部分的开发者都会使用插件来对轮播图进行开发,那么它的底层到底是怎么实现的呢,本文章将围绕这一问题展开探讨. 在讨论如何利用原生JS实现图片之间无缝切换轮播的动画效果之前,我们先来谈谈无缝轮播图片的css布局. 首先我们需要一个用来显示图片的DIV容器,然后把想要轮播的图片没有缝隙的排成一行放入DIV容器中,给DIV容器设置 overflow: hidden,这样在页面中就可以只看到一张图片,然后通过利用JS来移动ul的left值就能达到无