轮播图-如果一个页面有多个轮播,代码重用怎么考虑?

问题描述

如果一个页面有多个轮播,代码重用怎么考虑?

如题!!用的是swiper这个插件 各路大神求解脱啊
还有弱弱问一下 是不是一个页面多个轮播图很怪??

解决方案

把轮播的代码封装成JS组件的方式。

解决方案二:

这有什么奇怪的,很多新闻和门户网站就有很多组轮播

解决方案三:

做成类的形式,new 实例出来,不用用过程式编程,这个不好控制作用域

时间: 2024-12-22 21:49:24

轮播图-如果一个页面有多个轮播,代码重用怎么考虑?的相关文章

自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

  引言      学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现. 实现原理      1.除第一张图片外,其余图片全部隐藏,4张图片重叠起来.      2.导航按钮添加mouseover和mouseleave事件.      3.设置interval函数,启动定时器调用ShowImg函数.      4.动态修改marginT

基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)_jquery

比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码 代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var par

一个页面放2段图片滚动代码出现冲突的问题如何解决_javascript技巧

为什么我在首页同时复制出二段代码后图片不能流动显示了? 复制代码 代码如下: <div align="center"> <table style="TABLE-LAYOUT: fixed; border-collapse:collapse" cellSpacing=0 cellPadding=0 width=760 border=1 height="150" bordercolor="#1989D7">

banner-关于jq轮播图的后台可配置

问题描述 关于jq轮播图的后台可配置 请叫各位大神,现在有这么一个功能,关于轮播图.一个页面里多次用到轮播图,大概分两种,一种是单个循环或者三四张一起循环,另一种是十张为一组,然后这样一组组的轮播.要求做成后台上传图片,然后前端的轮播图显示出来,单张倒是还好说,但是多张的怎么样实现可配置,思路是怎样的,我后台用的php 解决方案 页面生成轮播图的html代码,jquery写个插件初始化html为轮播就行了:js图片特效 解决方案二: http://blog.163.com/lgh_2002/bl

简单实现轮播图效果的实例_javascript技巧

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

基于jQuery实现淡入淡出效果轮播图_jquery

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div.  html结构如下:  <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

R5 DSAPI 用户认证之后,Domino没有建立session,导致进入每一个页面都需要重复认证

问题描述 在R5上,进行DSAPI用户认证之后,认证信息是从其他的cookie得到的,在cAPI中设置,Domino没有建立session,导致进入每一个页面都需要重复认证,代码如下intAuthenticate(FilterContext*context,FilterAuthenticate*authData){char*user;if(!authData||authData->foundInCache){printf("founduserincache~~~~~~~~~~~~~~~~~

PHP 页面跳转到另一个页面的多种方法方法总结_php技巧

一.用HTTP头信息 也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如声明返回信息的类型("Context-type: xxx/xxx"),页面的属性("No cache", "Expire")等等. 用HTTP头信息重定向到另外一个页面的方法如下: 复制代码 代码如下: <? if (isset($url)) { Header("HTT

蘑菇街-在一个页面中,同样的布局方式,如何调用同时调用一个定时器实现多个轮播图进行同时轮播

问题描述 在一个页面中,同样的布局方式,如何调用同时调用一个定时器实现多个轮播图进行同时轮播 请用蘑菇街里的"买手推荐"写一个同时调用一个定时器的实例,谢谢! 解决方案 http://www.cnblogs.com/wendingding/p/3763527.html 多个和一个没有什么区别. 解决方案二: 为什么我调用同一个定时器的时候,页面中只有第一个轮播可以进行轮播,其余的都不可以轮播,而且我页面中的布局都是一样的,就是图片换了一下.