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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jquery实现抽奖功能
Oct 22 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
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
Angular简单验证功能示例
2017/12/22 Javascript
vue实现分页栏效果
2019/06/28 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python输出指定字符串的方法
2020/02/06 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
python小白切忌乱用表达式
2020/05/29 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
什么是.net
2015/08/03 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
关于人生的感言
2014/01/17 职场文书
房地产广告策划方案
2014/05/15 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
关于教师节的广播稿
2015/08/19 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书