最简单jquery轮播图效果
样式部分
<style type="text/css">
*{margin:;padding:;}
ul,ol{list-style:none;}
#box{width:420px;height:630px;margin:100px auto;position:relative;overflow:hidden;}
#box li{height:630px;width:420px;}
#box ol{position:absolute;z-index:;right:10px;bottom:10px;}
#box ol li{width:20px;height:20px;border-radius:20px;background:#ccc;float:right;margin-left:15px;float:left;}
#box ol li.current{background:#ff0;}
</style>
jqury部分,请引入jquery插件
<script type="text/javascript">
$(function(){
var index =0;
var timer = setInterval(function(){
index = (index == 2) ? 0 : index + 1;
$("#box ul li").hide().eq(index).show();
$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');
}, 3000);
$("#box ol li").hover(function(){
var index = $(this).index();
$("#box ul li").eq(index).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current');
})
})
</script>
HTML部分
<div id="box">
<ul>
<li>
<img src="1.png" alt="" width="420"/>
<p>11111111111</p>
<p>22222222222</p>
<p>33333333333</p>
</li>
<li>
<img src="2.png" alt="" width="420"/>
<p>44444444444</p>
<p>55555555555</p>
<p>66666666666</p>
</li>
<li>
<img src="3.png" alt="" width="420"/>
<p>77777777777</p>
<p>88888888888</p>
<p>99999999999</p>
</li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
最简单jquery轮播图效果的更多相关文章
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- jQuey实现轮播图效果
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
随机推荐
- [Animatable Properties](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/AnimatableProperties/AnimatableProperties.html)
 
- Macbook SSD硬盘空间不够用了?来个Xcode大瘦身吧!
原文转自:http://www.jianshu.com/p/03fed9a5fc63 日期:2016-04-22 最近突然发现我的128G SSD硬盘只剩下可怜的8G多,剩下这么少的一点空间连X ...
- android 多线程
本章讲述在android开发中,多线程的应用.多线程能够处理耗时的操作并优化程序的性能.本章主要介绍知识点,AsyncTask,Java线程池,ThreadPoolExecutor线程池类.本章案例只 ...
- [20141121]无法通过powershell读取sql server性能计数器问题
背景: 全新服务器,需要增加性能监控,发现无法通过powershell读取性能指标 解决方法: Open the Registry Editor by going to the Start Menu ...
- 特定IP访问远程桌面
1. 新建IP安全策略 (远程端口没有修改情况下的设置) WIN+R打开运行对话框,输入“gpedit.msc”进入组策略编辑器. 依次打开:本地计算机策略--计算机配置--Windows设置--安全 ...
- .NET应用架构设计—表模块模式与事务脚本模式的代码编写
阅读目录: 1.背景介绍 2.简单介绍表模块模式.事务脚本模式 3.正确的编写表模块模式.事务脚本模式的代码 4.总结 1.背景介绍 要想正确的设计系统架构就必须能正确的搞懂每个架构模式的用意,而不是 ...
- SQL Server自动化运维系列——监控性能指标脚本(Power Shell)
需求描述 一般在生产环境中,有时候需要自动的检测指标值状态,如果发生异常,需要提前预警的,比如发邮件告知,本篇就介绍如果通过Power shell实现状态值监控 监控值范围 根据经验,作为DBA一般需 ...
- Linux简介及常用命令使用4--linux高级命令与技巧
top 几个磁盘fdisk -l 磁盘空间 df -lhdf -al 查看进程:ps -ef"grep java杀死进程:kill -9 进程号 more中过滤 more xxx |grep ...
- Android 手势操作识别
(转自:http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1020/448.html) 首先,在Android系统中,每一次手势交互都会依照 ...
- 超详细的java反射教程
看技术博客时,看到关于java反射的博文,写的非常好.猛击下面的地址,开始java反射之旅 中文翻译地址:http://ifeve.com/java-reflection/ 英文原版地址:http:/ ...