基于JQuery实现图片轮播效果(焦点图)


Posted in Javascript onFebruary 02, 2016

自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。

兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。

效果图如下:

基于JQuery实现图片轮播效果(焦点图)

Html代码如下:

<html>
<head>
 <meta charset="utf-8">
 <title>banner图</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/common.js"></script>
</head>
<body>
 <div class="wrap">
 <div class="banner">
 <div class="bannerCon">
 <ul class="imgList">
  <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
 </ul>
 <ul class="btnList clearfix">
  <li class="cur"><span></span></li>
  <li><span></span></li>
  <li><span></span></li>
 </ul>
 <span class="pre-nex prev"><</span> 
 <span class="pre-nex next">></span> 
 </div>
 </div>
 </div>
</body>
</html>

Css样式如下:

@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
 margin: 0;
 padding: 0;
}
ul, ol {
 list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
} 
/* 具体样式 */
.banner {
 position: relative;
 height: 400px;
 overflow: hidden;
}
.banner .bannerCon {
 position: absolute;
 top: 0;
 left: 50%;
 width: 800px;
 height: 400px;
 margin-left: -400px;
 overflow: hidden;
}
.bannerCon .imgList {
 position: absolute;
 top: 0;
 left: 0;
 width: 99999px;
 height: 400px;
}
.bannerCon .imgList li {
 float: left;
 width: 800px;
 height: 400px;
}
.bannerCon .imgList li a {
 position: relative;
 display: block;
 height: 100%;
}
.bannerCon .imgList li img {
 width: 800px;
 height: 400px;
}
.bannerCon .pre-nex {
 display: none;
 position: absolute;
 top: 50%;
 width: 40px;
 height: 60px;
 margin-top: -40px;
 font: bold 40px/60px Simsun;
 color: #ccc;
 text-align: center;
 border:none;
 background: rgba(0,0,0,.30);
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
 cursor: pointer;
 z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
 position: absolute;
 left: 0;
 bottom: 20px;
 width: 100%;
 height: 12px;
 text-align:center;
 z-index: 2;
 _overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
 display: inline-block;
 width: 12px;
 height: 12px;
 margin: 0 5px;
 border-radius: 6px;
 background-color:#14829e;
 cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }

Js代码如下:

//加载在文本读取之后的js语句 开始 =============================================================
 function Scroll(obj,speed,interval){ //父级容器,轮播速度,切换间隔
 $("."+obj).each(function(){
  var $box = $(this),
  $imgUl = $box.children(".imgList"),
  $imgLi = $imgUl.children("li"),
  $btnUl = $box.children(".btnList"),
  $btnLi = $btnUl.children("li"),
  $btnPreNex = $box.children(".pre-nex"),
  $btnPre = $box.children(".prev"),
  $btnNex = $box.children(".next"),
  n = $imgLi.length,
  width = $imgLi.width(),
  left = parseFloat($imgUl.css("left")),
  k = 0,
  Player;
  $imgUl.css("width",n*width);
  function scroll(){  //轮播事件
  $imgUl.stop().animate({left:-width},speed,function(){
   k += 1;
   $imgUl.css("left",0);
   $imgUl.children("li:first").appendTo($(this));
   $btnLi.removeClass('cur');
   if(k >= n){
   k = 0;
   }
   $btnUl.children("li").eq(k).addClass('cur');  
  });
  }
  $btnLi.click(function(){  //小圆点点击事件
  var index = $btnLi.index(this); 
  $(this).addClass('cur').siblings("li").removeClass('cur');
  if(index >= k){
   var dif = index-k;
   left = -dif*width;
   $imgUl.stop().animate({left:left},speed,function(){
   $imgUl.css("left",0);
   $imgUl.children("li:lt("+dif+")").appendTo($imgUl); 
   });
  }
  else{
   var j = n-(k-index);
   $imgUl.css("left",(index-k)*width);
   $imgUl.children("li:lt("+j+")").appendTo($imgUl);
   $imgUl.stop().animate({left:0},speed); 
  }
  k = index;
  }); 
  $btnPreNex.click(function(){ //左右按钮点击事件
  var index = $btnLi.index(this); 
  if($(this).hasClass('next')){
   if(!$imgUl.is(":animated")){
   k += 1;
   $imgUl.animate({left:-width},speed,function(){
    $imgUl.css("left",0);
    $imgUl.children("li:first").appendTo($(this));
    if(k >= n){
    k = 0;
    }
    $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
   });
   }
  }
  else {
   if(!$imgUl.is(":animated")){
   k += -1;
   $imgUl.css("left",-width);
   $imgUl.children("li:last").prependTo($imgUl);
   $imgUl.stop().animate({left:0},speed);
   if(k < 0){
    k = n-1;
   }
   $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
   }
  }
  }); 
  $box.hover(   //鼠标移入、移出事件
  function(){
   clearInterval(Player);
   $btnPreNex.addClass('show');
  },
  function(){
   Player = setInterval(function(){scroll()},interval);
   $btnPreNex.removeClass('show');
  }
  );
  Player = setInterval(function(){scroll()},interval);
 });
 } 
 $(function () {    //读取轮播事件
 Scroll("bannerCon",600,4000);
 });

注意加载一下jq库,我用的是1.9.1的,其实1.7+的都没问题的。

更多精彩内容大家还可以参考《jQuery焦点图特效汇总》进行学习,希望大家喜欢。

更多关于轮播图效果的专题,请点击下方链接查看学习

以上就是本文的全部内容,希望能够帮助大家。

Javascript 相关文章推荐
javascript使用正则表达式检测IP地址
Dec 03 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
js 函数性能比较方法
Aug 24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 #Javascript
JavaScript实现的MD5算法完整实例
Feb 02 #Javascript
javascript禁止超链接跳转的方法
Feb 02 #Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 #Javascript
Node.js实现JS文件合并小工具
Feb 02 #Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 #Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 #Javascript
You might like
PHP 读取Postgresql中的数组
2013/04/14 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
Python连接mysql数据库的正确姿势
2016/02/03 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
庆元旦演讲稿
2014/09/15 职场文书
新员工考核评语
2014/12/31 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
杨善洲电影观后感
2015/06/04 职场文书
公司车辆管理制度
2015/08/04 职场文书
数学备课组工作总结
2015/08/12 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js