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 相关文章推荐
文本加密解密
Jun 23 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP has encountered an Access Violation
2007/01/15 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Django发送邮件功能实例详解
2019/09/02 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
2015年八一建军节演讲稿
2015/03/19 职场文书
2015员工年度考核评语
2015/03/25 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript