jquery+css实现简单的图片轮播效果


Posted in jQuery onAugust 07, 2017

开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用。

ps:

功能比较简单,整个框并不能根据图片的大小自动调节,这里所用的图片是1170*500的,如果需要改成其他大小的图片,自行修改.pic-list下img的宽度。

.pic-list中的宽度为整个横幅的宽度,如果需要轮播的图片数量很多,.pic-list的宽度应大于数量*单张宽度,

html

<div class="banner">
    <!--第一张图片为最后一张,用来做轮播连接使用,所以一开始显示的第一章,应是第二张图片,这里图片的宽度为1170px,所以一开始left为-1170px,同理最后一张图也为第一张图。-->
  <div class="pic-list" style="left: -1170px">
    <img src="/static/img/4.jpg" alt="">
    <img src="/static/img/1.jpg" alt="">
    <img src="/static/img/2.jpg" alt="">
    <img src="/static/img/3.jpg" alt="">
    <img src="/static/img/4.jpg" alt="">
    <img src="/static/img/1.jpg" alt="">
  </div>
  <div id="buttons">
    <!-- 确保span的数量跟img数量一样多,不包括第一张img和最后一张img-->
    <span class='on'></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <a href="javascript:;" class="arrow" id="prev"><</a>
  <a href="javascript:;" class="arrow" id="next">></a>
</div>

css

.banner{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;

}
.banner a{
  text-decoration: none;
}
.banner .pic-list{
  width: 10000px;
  height: 500px;
  position: absolute;
  z-index: 1;
}
.banner .pic-list img{
  width: 1170px;
  float: left;
}
#buttons{
  position: absolute;
  z-index: 2;
  height: 10px;
  bottom: 20px;
  left: 550px;

}
#buttons span{
  cursor: pointer;
  float: left;
  border: 1px solid #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  margin-right: 5px;
}
#buttons .on{
  background: orange;
}
.arrow{
  cursor: pointer;
  line-height: 36px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 200px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: none;
}
.banner:hover .arrow{display: block;}

#prev{
  left: 20px;
}
#next{
  right:20px;
}

js

$(document).ready(function(){
  var picNum = 4;//图片数量,根据实际修改
  var picWidth = 1170;//图片的宽度,根据实际修改
  var picMaxWidth = -1 * picNum * picWidth;
  var currentPic = 1;
  var next = $('#next');
  var prev = $('#prev');
  var flag = false;

  prev.on('click',function(){
    if(!flag){
      calPx(1170);
      currentPic--;
      if (currentPic < 1) {
        currentPic = picNum;
      }
      $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
    }
  });

  next.on('click',function(){
    if(!flag){
      calPx(-1170);
      currentPic++;
      if (currentPic > picNum) {
        currentPic = 1;
      }
      $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
    }


  });
  $('.banner').on('mouseover',function(){
    stop();
  }).on('mouseout',function(){
    play();
  })
  function nextClick(){
    next.click();
  }
  function play(){
    setInt = setInterval(nextClick,2000);
  }
  function stop(){
    clearInterval(setInt);
  }

  function calPx(leftPx){
    flag = true;
    var left = parseInt($('.pic-list').css('left'));
    var newLeft = left+leftPx;
    var time = 300;
    var interval = 10;
    var speed = leftPx/(time/interval);

    function go(){
      var left = parseInt($('.pic-list').css('left'));
      if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft)){
        $('.pic-list').css('left', (left + speed) + 'px');
        setTimeout(go,interval);
      }else{
        flag = false;
        if( newLeft > -1170){
          newLeft = picMaxWidth;
        }else if (newLeft < picMaxWidth ) {
          newLeft = -1170;
        }
        $('.pic-list').css('left',newLeft + 'px');
      }
    }
    go();

  }
  play();

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
You might like
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
调整PHP的性能
2013/10/30 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python中的字典遍历备忘
2015/01/17 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
简述python Scrapy框架
2020/08/17 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
杜甫草堂导游词
2015/02/03 职场文书
雷峰塔导游词
2015/02/09 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2019同学聚会主持词
2019/05/06 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
python blinker 信号库
2022/05/04 Python