jquery实现轮播图

 1 /**
 2  * Created by hui on 2015/11/3.
 3  */
 4 $(function(){
 5     var circleLi = $('.poster-item');
 6     var liLength = circleLi.length;
 7     var L = 640;
 8     var n = 640;
 9     var posterUl = $('.poster-ul');
10     var posterUlLeft = posterUl.position().left;
11     var action = {
12         initCss:function(){
13             (function setCss(){
14                 for(var i= 0;i<liLength;++i){
15                     circleLi[i].style.left=i*L-n*2+"px";
16                 }
17             })();
18         },
19         ifOver:function(Left){
20             if(Left<-3*n){
21                 Left=2*n;
22             }
23             if(Left>2*n){
24                 Left = -3*n;
25             }
26             return Left;
27         },
28         moveLeft:function(){
29             posterUlLeft-=n;
30             posterUlLeft = action.ifOver(posterUlLeft);
31             posterUl.animate({left:posterUlLeft+'px'});
32         },
33         moveRight:function(){
34             posterUlLeft+=n;
35             posterUlLeft = action.ifOver(posterUlLeft);
36             posterUl.animate({left:posterUlLeft+"px"});
37         }
38     };
39     action.initCss();
40     $('.poster-left-btn').click(action.moveLeft);
41     $('.poster-right-btn').click(action.moveRight);
42 });

原谅我"无耻"的使用了jquery,不过以后有时间我会尽量用原生的js来实现这个的。

html代码:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
    <script src="js.js"></script>
</head>
<body>
<div class="J_poster poster-main">
    <div class="poster-btn poster-left-btn">&lt;</div>
    <ul class="poster-ul">
            <li class="poster-item" style="left: -1280px;"><a href="#"><img src="./img/1.jpg"></a></li>
            <li class="poster-item" style="left: -640px;"><a href="#"><img src="./img/2.jpg"></a></li>
            <li class="poster-item" style="left: 0px;"><a href="#"><img src="./img/3.jpg"></a></li>
            <li class="poster-item" style="left: 640px;"><a href="#"><img src="./img/4.jpg"></a></li>
            <li class="poster-item" style="left: 1280px;"><a href="#"><img src="./img/5.jpg"></a></li>
            <li class="poster-item" style="left: 1920px;"><a href="#"><img src="./img/6.jpg"></a></li>
    </ul>
    <div class="poster-btn poster-right-btn">&gt;</div>
    <div class="poster-circle-div">
        <ul class="circle-ul">
            <li class="circle-li"></li>
            <li class="circle-li"></li>
            <li class="circle-li"></li>
            <li class="circle-li"></li>
            <li class="circle-li"></li>
            <li class="circle-li"></li>
        </ul>
    </div>
</div>
<script>

</script>

</body></html>

css代码:

 1 html,body,ul,li,p{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 ul,li{
 6     list-style: none;
 7 }
 8 a{
 9     text-decoration: none;
10 }
11 .clearfix{
12     clear: both;
13 }
14 .poster-main{
15     width: 640px;
16     height: 270px;
17     position: relative;
18     margin: auto;
19     overflow: hidden;
20 }
21 .poster-btn{
22     position: absolute;
23     width: 50px;
24     height: 100px;
25     text-align: center;
26     line-height: 100px;
27     font-size: 3.5em;
28     top: 70px;
29     cursor: pointer;
30     z-index: 999;
31     background: rgba(0,0,0,.3);
32     color: #fff;
33     -webkit-transition: all 0.3s;
34     -moz-transition: all 0.3s;
35     -ms-transition: all 0.3s;
36     -o-transition: all 0.3s;
37     transition: all 0.3s;
38     -webkit-user-select: none;
39     -moz-user-select: none;
40     -ms-user-select: none;
41     user-select: none;
42 }
43 .poster-btn:hover{
44     background: rgba(0,0,0,.5);
45 }
46 .poster-left-btn{
47     left: 0;
48 }
49 .poster-right-btn{
50     right: 0;
51 }
52 .poster-ul{
53     position: absolute;
54 }
55 .poster-ul .poster-item{
56     text-align: center;
57     position: absolute;
58     
59     transition: all 2s;
60 }
61 .z{
62     z-index: 888;
63 
64 }
65 .poster-circle-div{
66     position: absolute;
67     bottom: 0;
68     left: 50%;
69     margin-left: -65px;
70     margin-bottom: 30px;
71 
72 }
73 .circle-ul li{
74     float: left;
75     cursor: pointer;
76     color: #fff;
77     background: rgba(255,255,255,.6);
78     width: 12px;
79     height: 12px;
80     text-align: center;
81     border-radius: 50%;
82     margin: 2px;
83 }
84 .show{
85     background: rgba(0,0,0,.3) !important;
86 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

Taints 与 Tolerations

节点亲和性是描述Pods如何分配到一个或一组节点的策略,与之相反 Taints 描述节点拒绝一个或一组Pods的策略。其实现原理为首先通过kubectl tai...

1231
来自专栏岑玉海

hbase源码系列(八)从Snapshot恢复表

在看这一章之前,建议大家先去看一下snapshot的使用。这一章是上一章snapshot的续集,上一章了讲了怎么做snapshot的原理,这一章就怎么从snap...

3066
来自专栏更流畅、简洁的软件开发方式

数据访问层的使用方法

数据访问层的使用方法。 数据访问层的使用方法 一、操作语句部分 简单的说就是传入一个操作语句,然后接收返回值就可以了。为了简化代码和提高效率,所以呢设置了五种返...

3358
来自专栏云霄雨霁

Java--线程同步&线程通信

2907
来自专栏机器学习从入门到成神

各大公司Java后端开发面试题总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

3662
来自专栏互联网开发者交流社区

jsp 内置对象(五)

1265
来自专栏青玉伏案

iOS开发之Alamofire源码解析

今天博客中的Alamofire源码的版本是以3.4版本为例。上篇博客系统的对NSURLSession相关的东西进行了详细的解析,详情请看《详解NSURLSess...

3017
来自专栏开发与安全

linux网络编程之socket(六):利用recv和readn函数实现readline函数

在前面的文章中,我们为了避免粘包问题,实现了一个readn函数读取固定字节的数据。如果应用层协议的各字段长度固定,用readn来读是非常方便的。例如设计一种客户...

2630
来自专栏JavaEE

Java面试题 - 01

其实对于大多数刚入门的初级程序员来说,写代码都还停留在复制粘贴修改阶段(我也一样),虽然可以复制粘贴的时候看上去很厉害了,其实都是假象。面试的时候可能面试官随便...

1674
来自专栏MasiMaro 的技术博文

VC++ 崩溃处理以及打印调用堆栈

一般当程序发生异常时,用户代码停止执行,并将CPU的控制权转交给操作系统,操作系统接到控制权后,将当前线程的环境保存到结构体CONTEXT中,然后查找针对此异常...

4054

扫码关注云+社区

领取腾讯云代金券