轮播

jq轮播图插件

由 梦想的初衷 提交于 2020-01-09 06:43:43
/* * 使用说明 * * 1:需要提供一个标签 * 2:lis:图片的个数 * 3:轮播图的大小 width ,height * 4:图片的地址imgs[0].carouselImg[0] 这是本人的地址, $('#mainCarousel').jdCarousel({lis:7,width:800,height:340, imgSrc:[ imgs[0].carouselImg[0], imgs[0].carouselImg[1], imgs[0].carouselImg[2], imgs[0].carouselImg[3], imgs[0].carouselImg[4], imgs[0].carouselImg[5], imgs[0].carouselImg[6] ] }); */ (function($){ $.fn.extend({ jdCarousel:function(options){ //ul var obj = $(this); $(this).append('<ul></ul>') for(var i=0 ; i<options.lis ; i++){ $(this).children('ul').append('<li><a href="#"><img/></a>< >'); } //设置样式 $(this).css({'overflow':'hidden'

swiper轮播图（中间大，两侧小）

由 荒凉一梦 提交于 2020-01-08 14:07:06
<link rel="stylesheet" href="plugins/swiper.min.css"> <div id="certify" class="col-md-12"> <div class="swiper-container" style="width: 90%;height: 450px;"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="img/index/矩形备份 8.png"></a><span>aaa</span></div> <div class="swiper-slide"><a href=""><img src="img/index/矩形(2).png"></a><span>bbb</span></div> <div class="swiper-slide"><a href=""><img src="img/index/矩形备份 7.png"></a><span>ccc</span></div> <div class="swiper-slide"><a href=""><img src="img/index/u14.jpg"></a><span>ddd</span></div> <div class="swiper-slide"><a href="

Jquery基础（动画效果的轮播图特效）

由 [亡魂溺海] 提交于 2020-01-07 19:41:17
jquery文档准备的三种写法： $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery 选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > details') //aside的直接子元素details $('summary + ul') //summary相邻的下一个兄弟元素ul $('summary ~ ul') //summary之后的所有兄弟元素ul 属性选择器 $('[class]') $('[class=tool]') $('[class!=tool]') //class不是tool $('[class^=tool_]') //tool_开头 $('[class$=vs]') // vs结束 $('[class*=vs]') //含有vs $('[type][src]') $('[class][class*=lang][class$=y]') 过滤器 $('details > p:first-child') $(

微信小程序—常用的四种轮播图（间距、顶层、3D翻转、旋转木马）

由 被刻印的时光 ゝ 提交于 2020-01-07 15:39:57
摘要 微信小程序轮播图官方提供的swiper组件已经可以满足大部分轮播图效果，如间距轮播、顶层轮播，可仍有一些像3D翻转、旋转木马等效果需要通过监听滑动动作、利用动画去自定义实现，现就此四种效果提供解决方案及代码参考。 效果图 体验 体验路径：自定义系列>轮播图 代码 3D翻转轮播图与旋转木马轮播图代码 资源文件中包含封装的组件及使用demo，3d组件支持横向、竖向以及任意方向旋转。重要的事情说三遍： 源码免积分下载 点击下载 源码免积分下载 点击下载 源码免积分下载 点击下载 间距轮播图与顶层轮播图代码 js部分 Page ( { data : { currentIndex : 0 , currentIndex1 : 0 , currentIndex2 : 0 , imgList : [ { img : "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000059.jpg" } , { img : "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000064h.jpg" } , { img : "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598

原生JS轮播图

由 笑着哭i 提交于 2020-01-07 03:23:40
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 13 li{ 14 list-style: none; /*取消li默认的前缀*/ 15 } 16 17 img{ 18 display: block; /*解决图片之间3px的问题*/ 19 } 20 21 /*用一个容器包裹起来*/ 22 #container{ 23 position: relative; 24 margin: 0 auto; 25 margin-top: 130px; 26 width: 750px; 27 height: 352px; 28 border: 1px solid #ccc; 29 } 30 31 /*隐藏掉容器所有的图片*/ 32 #container>ul>li{ 33 position:absolute; 34 display: none; 35 36 } 37 38 /*显示容器中的图片active属性的那张*/ 39 #container>ul>li.active{ 40 display: block; 41 } 42 43 #buttons{ 44

轮播图的实现

由 ≯℡__Kan透↙ 提交于 2020-01-06 23:33:32
目录 轮播图： 前端： 配置 banner.vue样式: 后端： views.py: urls.py路由： models.py: serializers.py: 轮播图： 前端： 配置 前端项目目录下的终端： cnpm install vue-cookies cnpm install axios cnpm install element-ui cnpm install jquery cnpm install bootstrap@3 配置jquery：vue.config.js： const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", "window.$": "jquery", Popper: ["popper.js", "default"] }) ] } }; 在main.vue文件 配置： import axios from 'axios' Vue.prototype.$axios = axios; import cookies from 'vue-cookies' Vue.prototype.

原生js轮播图

由 爷，独闯天下 提交于 2020-01-06 19:51:30
< ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 轮播图 < / title > < / head > < style > * { margin : 0 px ; padding : 0 px ; } li { list - style : none ; /*取消li默认的前缀*/ } img { display : block ; /*解决图片之间3px的问题*/ } /*用一个容器包裹起来*/ #container{ position : relative ; margin : 0 auto ; margin - top : 130 px ; width : 750 px ; height : 352 px ; border : 1 px solid #ccc ; } /*隐藏掉容器所有的图片*/ #container>ul>li{ position : absolute ; display : none ; } /*显示容器中的图片active属性的那张*/ #container>ul>li.active{ display : block ; } #buttons{ position : absolute ; width : 180 px ; height : 20 px ;

原生JS轮播图

由 独自空忆成欢 提交于 2020-01-06 09:02:42
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; 10 padding:0px; 11 } 12 13 li{ 14 list-style: none; /*取消li默认的前缀*/ 15 } 16 17 img{ 18 display: block; /*解决图片之间3px的问题*/ 19 } 20 21 /*用一个容器包裹起来*/ 22 #container{ 23 position: relative; 24 margin: 0 auto; 25 margin-top: 130px; 26 width: 750px; 27 height: 352px; 28 border: 1px solid #ccc; 29 } 30 31 /*隐藏掉容器所有的图片*/ 32 #container>ul>li{ 33 position:absolute; 34 display: none; 35 36 } 37 38 /*显示容器中的图片active属性的那张*/ 39 #container>ul>li.active{ 40 display: block; 41 } 42 43 #buttons{ 44

无缝轮播图

由 懵懂的女人 提交于 2020-01-06 04:55:35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0; padding: 0; } ul{ list-style: none; } ul li{ float: left; } img{ vertical-align: top; } #box{ width: 600px; height: 200px; background-color: pink; margin: 100px auto; overflow: hidden; position: relative; } #scroll{ width: 1800px; height: 200px; position: absolute; left: 0; top: 0;

Jquery基础（动画效果的轮播图特效）

由 允我心安 提交于 2020-01-04 18:53:25
jquery文档准备的三种写法： $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery 选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > details') //aside的直接子元素details $('summary + ul') //summary相邻的下一个兄弟元素ul $('summary ~ ul') //summary之后的所有兄弟元素ul 属性选择器 $('[class]') $('[class=tool]') $('[class!=tool]') //class不是tool $('[class^=tool_]') //tool_开头 $('[class$=vs]') // vs结束 $('[class*=vs]') //含有vs $('[type][src]') $('[class][class*=lang][class$=y]') 过滤器 $('details > p:first-child') $(
订阅 轮播