图片轮播(定时播放)

$(function(){
	var listLen = $(".pic li").length, i=0,setInter,speen = 5000;

	$(".btn li:last").css({"margin":"0px 0px 0px 0px"});
	$(".btn li:first").addClass("on");
	$(".pic li:first").show();

	$(".btn li").each(function(index,element){
		$(element).click(function(){
			i = index;
			$(this).addClass("on").siblings().removeClass("on");
			$(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
		})
		$(element).hover(function(){
			clearInterval(setInter);
		},function(){
			outPlay();
		})
	})

	out_fun = function(){
		if(i < listLen){i++;}else{i=0;};
		$(".btn li").eq(i).addClass("on").siblings().removeClass("on");
		$(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
	}

	outPlay = function(){
		setInter = setInterval("out_fun()",speen);
	}

	outPlay();

})
时间: 2024-08-10 23:29:24

图片轮播(定时播放)的相关文章

实现一个图片轮播-3d播放效果

前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮播的效果,所以写下此文 使用方法: 首先,引入Swipe.js和Swipe.css 定义轮播列表ul[data-ride="swipe"],然后每一个轮播项都加上类 class="item" : 1 <!DOCTYPE html> 2 <html la

50行代码图片轮播加定时广告

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>图片轮播+定时广告</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <script> 8 fun

定时图片轮播图

先是HTML部分 <div id="alternate"> <ul class="img_list clear"> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /&

非常优秀的swiper插件————幻灯片播放、图片轮播

幻灯片播放.图片轮播----非常优秀的swiper插件 http://www.idangero.us/sliders/swiper/index.php    插件主页 http://www.idangero.us/sliders/swiper/api.php        插件API http://www.idangero.us/sliders/swiper/demos.php   插件DEMO <!DOCTYPE html> <html> <head> <met

Android——播放器和图片轮播

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent

图片轮播(也可以通过点击下标播放对应的图片)

javaScript学习总结--图片轮播 示例代码: <html> <head> <!--http://www.jb51.net/article/64662.htm --> <style type="text/css"> body{ margin:0px; <!--这两句必写,避免在不同浏览器中显示时发生错位--> padding:0px; } img{ width:320px;height:200px;} ul li{ li

IOS 05 UIScrollView介绍 图片轮播器

移动设备的屏幕?大?小是极其有限的,因此直接展?示在?用户眼前的内容也相当有限 当展?示的内容较多,超出?一个屏幕时,?用户可通过滚动?手势来查看屏幕以外的内容 普通的UIView不具备滚动功能,不能显?示过多的内容 UIScrollView是?一个能够滚动的视图控件,可以?用来展?示?大量的内容,并且可以通过滚 动查看所有的内容 在IOS中UIScrollView这个控件还是比较常用和重要的. 很多时候,我们想在UIScrollView正在滚动 或 滚动到某个位置 或者 停?止滚动 时做?一些

JavaScript 图片轮播

一.布局 <style> .container{ position: relative; width: 500px; height: 180px; margin:100px auto; } .container ul{ position: absolute; bottom: 0; width: 100%; height: 30px; background: rgba(0,0,0,0.4); } .container li{ width:10px; height: 10px; margin: 9

原生Js_实现图片轮播功能功能

用javascript图片轮播功能功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片轮播</title> <style> #swaper{ width: 520px; margin: 0 auto; } #number{ position: relative; top: -30px; right: -320px; } l

UISCrollView —— 图片轮播器实现(三)——(第二讲)

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1  NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2  NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST