jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果。

1. 不做操作时,自动轮播
 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来
 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片
 4. 手动轮播2:点击左右箭头也可以切换图片

效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了)

下面是代码区域:

**inde.html部分代码**

<div class="box">
 <ul class="img">
  <li class="photo"><a href="#"><img src="images/1.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/2.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/3.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/4.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/5.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/6.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/7.jpg" alt=""/></a></li>
 </ul>
 <div>
  <span class="jt" id="jtLeft"><</span>
  <span class="jt" id="jtRight">></span>
 </div>
 <div class="numList"></div>
</div>

**reset.css代码**

.box{
 padding:0;
 width: 800px;
 height: 500px;
 margin: 0 auto;
 position:relative;
}
ul.img{
 padding:0;
 margin: 0 auto;
}
ul.img .photo{
 list-style: none;
 position: absolute;
 display: none;
}
img{
 width: 800px;
 height: 500px;
}
.box .img .active{
 display: block;
}

.jt{
 width: 40px;
 height: 50px;
 background-color: rgba(0,0,0,0.5);
 position: absolute;
 top:50%;
 margin-top: -25px;
 line-height: 50px;
 font-size: 30px;
 color: white;
 font-weight: 800;
 text-align: center;
 display: none;
}
#jtRight{
 right: 0;
}

.numList{
 font-size: 0;
 position: absolute;
 bottom:10px;
 left: 50%;
 margin-left:-70px;
}
.numList .num{
 background-color: black;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 color: white;
 text-align: center;
 font-size: 14px;
 display: inline-block;
}
.numList .check{
 background-color: red;
}

**main.js代码**

$(function(){
 /*定义全局变量,用来记录表示显示的图片的下标*/
 var i=0;

 /*按图片的数量添加下标*/
 var size=$(".photo").size();
 for (var j=1;j<=size;j++){
  var span=$("<span class='num'>"+j+"</span>");
  $(".numList").append(span);
 }
 /*默认选中第一个下标和显示第一张图片*/
 $(".photo:eq(0)").addClass("active");
 $(".num:eq(0)").addClass("check");

 /*手动轮播*/
 var HandleImgChange=function(){
  $(".num").each(function(){
   $(this).mouseover(function(){
    $(this).siblings().removeClass("check");
    $(this).addClass("check");

    /*获得选择的下标值*/
    i=$(this).index();
    $(".photo").hide();
    $(".photo").eq(i).show();
   });
  });
 };

 /*显示下一张图*/
 var move=function(){
  i++;
  if(i>size-1){
   i=0;
  }
  $(".num").eq(i).addClass("check").siblings().removeClass("check");
  $(".photo").eq(i).show().siblings().hide();
 };

 /*自动轮播*/
 var AutoImgChange=function(){
  var t=setInterval(move,1000);
  $(".box").hover(function(){
   $(this).css({"cursor":"pointer"});
   $(".jt").css({"display":"block"});
   clearInterval(t);
  },function(){
   $(".jt").css({"display":"none"});
   t=setInterval(move,1000);
  })
 };

 /*设置左右箭头点击事件*/
 var jtL=function(){
  $("#jtLeft").click(function(){
   i--;
   if(i<0){
    i=size-1;
   }
   $(".num").eq(i).addClass("check").siblings().removeClass("check");
   $(".photo").eq(i).show().siblings().hide();
  })
 };
 var jtR=function(){
  $("#jtRight").click(function(){
   move();
  })
 };

 HandleImgChange();
 AutoImgChange();
 jtR();
 jtL();
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-09-25

jquery实现轮播图效果

效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <style type="text/css"> *{ margin: 0; padding: 0; } #slideshow{ position: relative; wi

jQuery实现的图片轮播效果完整示例

本文实例讲述了jQuery实现的图片轮播效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ list-

用jQuery实现优酷首页轮播图

大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 思路 思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了 例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动 当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动 基本结构与样式 <div class="lunbo"> &

jquery实现左右无缝轮播图

本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p

jQuery实现大图轮播

css样式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul{ width: 2500px;

jQuery实现圣诞节礼物传送(花式轮播)

大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置最外边的两个礼物旋转一定的角度并隐藏,动画开始,每个礼物向右移动一定的位置,然后再把第五个礼物添加到第一个礼物之前,这样这五个礼物就重新排列了,在写jQ时只管礼物位置的变化就行了,因为礼物的旋转和隐藏在样式中都已经设置好了,某个礼物如果成为第一个礼物就会自动隐藏旋转 基本结构 代码: <div class="

原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

jQuery自适应轮播图插件Swiper用法示例

本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

jQuery简单自定义图片轮播插件及用法示例

本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

jquery 实现轮播图详解及实例代码

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

原生JS实现移动端web轮播图详解(结合Tween算法造轮子)

前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求;  另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要

利用纯js + transition动画实现移动端web轮播图详解

前言 在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍吧. 核心点: 在 我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画. 使用 transition实现的动画效果的轮播图js代码不足100行 ~function () { var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移

jQuery实现轮播图及其原理详解

本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalabl

jQuery无缝轮播图代码

本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">

jquery版轮播图效果和extend扩展

本文实例为大家分享了jquery版本轮播图及extend扩展的具体代码,供大家参考,具体内容如下 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -w

jQuery实现轮播图源码

本文实例为大家分享了jQuery实现轮播图展示的具体代码,供大家参考,具体内容如下 设计: 根据上图可以看出,轮播图需要以下元素:外面的盒子div.放置图片集合的盒子ul.放置两侧按钮的盒子div.下侧顺序按钮div 源代码如下: 一.html源码如下: <div class="outer"> <ul class="img"> <li><a><img src="../static/img/1.jpg&q