jquery轮播图插件使用方法详解

本文实例为大家分享了jquery轮播图插件使用案例，供大家参考，具体内容如下

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jQuery.js"></script>
 <script type="text/javascript" src="carousel.js"></script>
 <script type="text/javascript">
 $(function(){
 $(".carousel-content").carousel({
 carousel : ".carousel",//轮播图容器
 indexContainer : ".img-index",//下标容器
 prev : ".carousel-prev",//左按钮
 next : ".carousel-next",//右按钮
 timing : 2000,//自动播放间隔
 animateTime : 700,//动画时间
 autoPlay : true,//是否自动播放 true/false
 direction : "left",//滚动方向 right/left
 });

 $(".carousel-content").hover(function(){
 $(".carousel-prev,.carousel-next").fadeIn(300);
 },function(){
 $(".carousel-prev,.carousel-next").fadeOut(300);
 });

 $(".carousel-prev").hover(function(){
 $(this).find("img").attr("src","img/left2.png");
 },function(){
 $(this).find("img").attr("src","img/left1.png");
 });
 $(".carousel-next").hover(function(){
 $(this).find("img").attr("src","img/right2.png");
 },function(){
 $(this).find("img").attr("src","img/right1.png");
 });
 });
 </script>
 </head>
 <body>
 <div class="content">
 <div class="a-content">
 <div class="carousel-content">
 <ul class="carousel">
 <li><img src="img/1.jpg"></li>
 <li><img src="img/2.jpg"></li>
 <li><img src="img/3.jpg"></li>
 <li><img src="img/4.jpg"></li>
 <li><img src="img/5.jpg"></li>
 </ul>
 <ul class="img-index"></ul>
 <div class="carousel-prev"><img src="img/left1.png"></div>
 <div class="carousel-next"><img src="img/right1.png"></div>
 </div>
 </div>
 </div>
 </body>
</html>

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

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

赞 (0)

相关推荐

  • jquery插件实现轮播图效果

    本文实例为大家分享了jquery插件实现轮播图的具体代码,供大家参考,具体内容如下 轮播图的实现(jquery插件) 需要引入jquery插件,去jquery官网搜索 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

  • jquery实现淡入淡出轮播图效果

    本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码,供大家参考,具体内容如下 如题所述,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&

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

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

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

  • jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(

  • jQuery实现带进度条的轮播图

    本文实例为大家分享了jQuery实现带进度条轮播图的具体代码,供大家参考,具体内容如下 1.html模块 <div class="banner"> <ul> <li style="background: url(img/bg1.jpg) center;"> <img src="img/con1.png" /> <div class="nav"></div>

  • 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带控制按钮轮播图插件

    jQuery带控制按钮轮播图插件

    带控制按钮(点击移动到指定图片)的jQuery轮播图插件 效果图 当点击下方按钮时,轮播动画会停止,按钮所对应的图片在规定时间范围内移动出现,这一动作结束后再从当前图片开始继续轮播动画 $.fn.slider = function(){ //轮播图变量 var $ul =this; //在jQuery原型方法中,this就指的调用该方法的jQuery对象 var $lis = $ul.children();//返回所有的直接子标签 var imgwidth = $lis.width(); //设

  • 利用jquery写的左右轮播图特效

    最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • jQuery实现简单轮播图效果

    本文实例为大家分享了jQuery实现简单轮播图效果的具体代码,供大家参考,具体内容如下 介绍:这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换 1.导入jQuery文件 <script src="jquery-3.5.1.js"></script> 2.设置图片的样式 <style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; b

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

    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

随机推荐