jquery图片轮播特效代码分享


Posted in Javascript onApril 20, 2020

本文实例讲述了jquery图片轮播特效。分享给大家供大家参考。具体如下:

这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效。

运行效果图:

-------------------查看效果 下载源码-------------------

jquery图片轮播特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

为大家分享的jquery图片轮播特效代码如下

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿淘宝首页jquery轮播焦点图</title>
<style>
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
textarea{resize:none;}
a{text-decoration:none;}

/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.banner{width:520px; height:280px; position:relative; overflow:hidden;}
.banner-btn{ display:none;}
.banner-btn a{ display:block; line-height:40px; position:absolute;top:120px; width:40px; height:40px;background-color: #000; opacity:0.3; filter:alpha(opacity=30) color: rgb(255, 255, 255);overflow: hidden; z-index:4;}
.prevBtn{left:5px;}
.nextBtn{right:5px;}
.banner-img{ font-size:0; *word-spacing:-1px;/* IE6、7 */ letter-spacing: -3px; position:relative;}
.banner-img li{ display:inline-block;*display:inline;*zoom:1;/* IE6、7 */ vertical-align: top; letter-spacing: normal;word-spacing: normal; font-size:12px;}
.banner i{ background:url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png) no-repeat; width: 15px;height: 23px; cursor:pointer;margin: 8px 0 0 12px; display:block;}
.banner .nextBtn i{ background-position:-200px -24px;}
.banner .prevBtn i{ background-position:-200px 0px;}

.banner-circle{ position:absolute; left:50%; bottom: 15px;height: 13px;text-align: center;font-size: 0;border-radius: 10px; background:rgba(255,255,255,0.3); filter:alpha(opacity:30); }
.banner-circle li{ border-radius: 10px; margin:2px; display: inline-block; display: -moz-inline-stack; vertical-align: middle;zoom: 1; }
.banner-circle li a{ display: block;padding-top: 9px;width: 9px;height: 0;border-radius: 50%; background: #B7B7B7;overflow: hidden;}
.banner-circle .selected a{ background:#F40; }
</style>

<script src="js/jquery.min.js">
</script>

<script>
$(function(){
 var $banner=$('.banner');
 var $banner_ul=$('.banner-img');
 var $btn=$('.banner-btn');
 var $btn_a=$btn.find('a')
 var v_width=$banner.width();
 
 var page=1;
 
 var timer=null;
 var btnClass=null;

 var page_count=$banner_ul.find('li').length;//把这个值赋给小圆点的个数
 
 var banner_cir="<li class='selected' href='#'><a></a></li>";
 for(var i=1;i<page_count;i++){
 //动态添加小圆点
 banner_cir+="<li><a href='#'></a></li>";
 }
 $('.banner-circle').append(banner_cir);
 
 var cirLeft=$('.banner-circle').width()*(-0.5);
 $('.banner-circle').css({'marginLeft':cirLeft});
 
 $banner_ul.width(page_count*v_width);
 
 function move(obj,classname){
 //手动及自动播放
 if(!$banner_ul.is(':animated')){
 if(classname=='prevBtn'){
  if(page==1){
   $banner_ul.animate({left:-v_width*(page_count-1)});
   page=page_count; 
   cirMove();
  }
  else{
   $banner_ul.animate({left:'+='+v_width},"slow");
   page--;
   cirMove();
  } 
 }
 else{
  if(page==page_count){
   $banner_ul.animate({left:0});
   page=1;
   cirMove();
  }
  else{
   $banner_ul.animate({left:'-='+v_width},"slow");
   page++;
   cirMove();
  }
  }
 }
 }
 
 function cirMove(){
 //检测page的值,使当前的page与selected的小圆点一致
 $('.banner-circle li').eq(page-1).addClass('selected')
      .siblings().removeClass('selected');
 }
 
 $banner.mouseover(function(){
 $btn.css({'display':'block'});
 clearInterval(timer);
  }).mouseout(function(){
 $btn.css({'display':'none'}); 
 clearInterval(timer);
 timer=setInterval(move,3000);
  }).trigger("mouseout");//激活自动播放

 $btn_a.mouseover(function(){
 //实现透明渐变,阻止冒泡
  $(this).animate({opacity:0.6},'fast');
  $btn.css({'display':'block'});
  return false;
 }).mouseleave(function(){
  $(this).animate({opacity:0.3},'fast');
  $btn.css({'display':'none'});
  return false;
 }).click(function(){
  //手动点击清除计时器
  btnClass=this.className;
  clearInterval(timer);
  timer=setInterval(move,3000);
  move($(this),this.className);
 });
 
 $('.banner-circle li').live('click',function(){
  var index=$('.banner-circle li').index(this);
  $banner_ul.animate({left:-v_width*index},'slow');
  page=index+1;
  cirMove();
 });
});
</script>

</head>

<body>
<div align="center" style="width:516px; margin:0 auto">
<div class="banner">
 <div class="banner-btn">
 <a href="javascript:;" class="prevBtn"><i></i></a>
 <a href="javascript:;" class="nextBtn"><i></i></a>
 </div>
 <ul class="banner-img">
 <li><a href="#"><img src="images/T1B1JYFCpdXXazuKP7-520-280.jpg"></a></li>
 <li><a href="#"><img src="images/T16YtiFE4aXXb1upjX.jpg"></a></li>
 <li><a href="#"><img src="images/T1Oi0oFrFkXXb1upjX.jpg"></a></li>
 <li><a href="#"><img src="images/T1LtlPFppjXXb1upjX.jpg"></a></li>
 <li><a href="#"><img src="images/T1GGJWFvpgXXazuKP7-520-280.jpg"></a></li>
 <li><a href="#"><img src="images/T104hZFBVdXXazuKP7-520-280.jpg"></a></li>
 </ul>
 <ul class="banner-circle"></ul>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是为大家分享的jQuery超精致图片轮播幻灯片特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
20个PHP常用类库小结
2011/09/11 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue观察模式浅析
2018/09/25 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
python中property属性的介绍及其应用详解
2019/08/29 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
售后服务经理岗位职责范本
2014/02/22 职场文书
材料化学专业求职信
2014/07/15 职场文书
护士节活动总结
2014/08/29 职场文书
综治工作汇报材料
2014/10/27 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
执行力心得体会范文
2016/01/11 职场文书