Jquery实现图片轮播效果

  废话不多说,先上源码

 1 <div id="baner">
 2 <div  class="imgt">
 3     <div class="shadeDiv clarity"></div><!-- 透明层 -->
 4     <ul>
 5         <li name="1"></li>
 6         <li name="2"></li>
 7         <li name="3"></li>
 8         <li class="clarity" name="4"></li>
 9     </ul>
10     </div>
11
12     <ul class="imgc">
13         <li id="img_1"><img src="image/baner.jpg" alt=""></li>
14         <li id="img_2"><img src="image/baner.jpg" alt=""></li>
15         <li id="img_3"><img src="image/baner.jpg" alt=""></li>
16         <li id="img_4"><img src="image/baner.jpg" alt=""></li>
17     </ul>
18     <div class="next" name="next">
19     </div>
20     <div class="before" name="before">
21     </div>
22 </div>

/*index css start*/
#baner{
	width: 1000px;
	height: 500px;
	margin: 0 auto;
	position: relative;
}
.imgc li img{
	width: 1000px;
}
.imgc li{
	position: absolute;
}
.next{
	position: absolute;
	background: url(../image/next.png) no-repeat  0 0;
	background-position: 5px 17px;
	width: 20px;
	height: 50px;
	background-color: #fff;
	z-index: 2;
	margin-left: 980px;
	margin-top: 174px;
	cursor: pointer;
}
.before{
	position: absolute;
	background: url(../image/before.png) no-repeat  0 0;
	background-position: 5px 17px;
	width: 20px;
	height: 50px;
	background-color: #fff;
	z-index: 2;
	margin-top: 174px;
	cursor: pointer;
}
.imgt{
	margin: 0 auto;
	position: absolute;
	z-index: 2;
	height: auto;
	margin-top: 357px;
	width: 1000px;
	height: 40px;
	text-align: center;
}
.imgt ul{
	margin: 0 auto;
	width: 100px;
	height: 40px;
}
.imgt ul li{
	width: 10px;
	height: 10px;
	background-color: #000;
	float: left;
	border-radius: 50%;
	margin-left:3px;
	margin-top: 15px;
	cursor: pointer;
}
.shadeDiv{
	width: 100%;
	height: 40px;
	background-color: #777777;
    position: absolute;
    z-index: 1;
}
.clarity {
	filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

 1     var n=0;//当前图片编号
 2     var count=0;//图片数量
 3     count=$(".imgc li").length;
 4 //下一张图片
 5     function changeimg(){
 6         $(".imgc").children().fadeOut(500);//所有图片淡出
 7         $(".imgc").children().eq(n).fadeIn(1000);//第N张图淡入
 8         $(".imgt li").removeClass("clarity");//移除所有编号样式
 9         $(".imgt li").eq(n).addClass("clarity");//增加当前编号样式
10         if(n==(count-1))
11         {
12             n=0;
13         }
14         else{
15             n=n+1;
16         }
17     }
18
19     function start(){
20         //定时器,4秒更换图片
21         t = setInterval("changeimg()", 4000);
22
23     }
24
25     //图片编号点击事件
26     $(".imgt li").click(function(){
27         window.clearInterval(t);
28         n=parseInt($(this).attr("name")-1);
29         changeimg();
30         start();
31     })
32
33
34     //左右切换图片,点击下一张图时直接执行changeimg()
35     $(".next,.before").click(function(){
36         var btntext=$(this).attr("name");
37         //点击上一张
38         if (btntext=="before") {
39             if (n==0) {//当n=0时当前显示的为最后一张图
40                 n=count-2;//当n为0时切换倒数第二张图
41             }
42             else if(n==1){//当n=1是先前显示的第一张图
43                 n=count-1;//当n=0是切换到最后一张图
44             }
45             else{
46                 n=n-2;
47             }
48         }
49         window.clearInterval(t);//停止计时器
50         changeimg();
51         start();
52     })
53     start();

第一次自己写轮播效果,有很多不足的地方请多多批评教育

时间: 2024-11-23 21:59:17

Jquery实现图片轮播效果的相关文章

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:   最外层容器区域,如上图红色线框矩形   选项卡区域 两个事件:    鼠标悬浮或鼠标划入mouseover    鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

使用Jquery实现图片轮播效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现图片轮播</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{width:600px;height:240px;position: relative;} #pic{width:6

JQuery实现图片轮播效果源码

======================整体结构======================== <div class="banner"> <ul class="banner-imgs"> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a>

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

PgwSlideshow-基于Jquery的图片轮播插件

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: 体验度很好的响应式设计 支持桌面及移动设备 身形矫健,压缩后的文件只有不到4KB 你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlideshow核

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

[Jquery]焦点图轮播效果

$(function(){    var $next=$(".right");    var $prev=$(".left");    var $list_num=$(".list-num a");    var $banner=$(".banner");    var $list_banner=$(".list-banner");    var index=1;    var timer;    var

首页图片轮播效果

<html><head><meta  charset="utf-8" /><title>首页图片轮播效果</title><style type="text/css">* {margin: 0;padding:0;}body {background: #222;}ol{list-style: none;}img {border: 0 none;}#slider { border: 1px soli