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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
JavaScript While 循环基础教程
Apr 05 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
javascript每日必学之运算符
Feb 16 Javascript
js实现上传图片及时预览
May 07 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
vue.js的简单自动求和计算实例
Nov 08 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
一个捕获函数输出的函数
2007/02/14 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python如何对实例属性进行类型检查
2018/03/20 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
python conda操作方法
2019/09/11 Python
python 画函数曲线示例
2019/12/04 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
教师求职信范文分享
2013/12/27 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android