<!--------html代码：----------->

<!DOCTYPE html>
<html>
<head>
<title>carousel</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.carousel-box{width:660px;height: 337px;overflow: hidden;position: relative;margin: 50px auto;}
.carousel-inner{position: relative;display: block;}
.carousel-inner:after{content:"";display: block;width: 0;clear:both;}
.carousel-inner .carousel-list{background-size: 100% 100%;background-repeat: no-repeat;background-position: center center;width: 660px;height: 337px;float: left;}
.carousel-point{position: absolute;left:0;bottom:10px;margin: auto;width: 100%;text-align: center;}
.carousel-point li{display: inline-block;vertical-align: middle;border-radius: 100%;width: 15px;height: 15px;background-color: #fff;margin: 0 3px;cursor:pointer;}
.carousel-point li.on{background-color:#f60; }
.direction{display: inline-block;position: absolute;width: 30px;height: 30px;top: 50%;margin-top: -15px;width:32px;height:32px;background-repeat: no-repeat;background-size: 100% 100%;background-position: center center;}
.direction#prev{left: 10px;background-image: url(img/prev.png);}
.direction#next{right: 10px;background-image: url(img/next.png);}
</style>
</head>
<body>
<div class="main">
<div class="carousel-box">
<ul class="carousel-inner" style="margin-left: 0px;">
<li class="carousel-list" style="background-image:url(img/1.jpg);"></li>
<li class="carousel-list" style="background-image:url(img/2.jpg);"></li>
<li class="carousel-list" style="background-image:url(img/3.jpg);"></li>
<li class="carousel-list" style="background-image:url(img/4.jpg);"></li>
</ul>
</div>
</div>
</body>
</html>

<!------------------------------------------------------------------------------------------------------------------------------------分割线---------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!-------carousel.js:------->

$(function(){
var c_inner = $(".carousel-inner");
var c_list = $(".carousel-list");

//小圆点
var point = $("<ul class='carousel-point'></ul>");
var len = c_list.length;
for(var i=0;i<len;i++){
var pointLi = $("<li></li>");
point.append(pointLi);
}
c_inner.after(point);

//左右按钮
var prevBtn = $("<a href='javascript:void(0)' class='direction' id='prev'></a>");
var nextBtn = $("<a href='javascript:void(0)' class='direction' id='next'></a>");
point.after(prevBtn);
prevBtn.after(nextBtn);
prevBtn.hide();

//外层ul.carousel-inner的宽度
var list_w = c_list.width();
var inner_w = list_w * len;
c_inner.css("width",inner_w+"px");

var $index;//当前页码

point.find("li:first").addClass("on");
var pointCir = point.find("li");

var c_pageNum,leftNum;
pointCir.each(function(){
$(this).on("mouseover",function(){
var _this = $(this);
$index = _this.index();
if($index==0){
prevBtn.fadeOut(700);
nextBtn.fadeIn(700);
}else if($index == len-1){
nextBtn.fadeOut(700);
prevBtn.fadeIn(700);
}else{
nextBtn.fadeIn(700);
prevBtn.fadeIn(700);
}
page($index);
c_inner.animate({"margin-left":"-"+leftNum+"px"},500);
_this.addClass("on").siblings().removeClass("on");
})
if($(this).hasClass("on")){$index = $(this).index();}
})
function page(index){
c_pageNum = $index;//轮播图片页码
leftNum = c_pageNum * parseInt(list_w);
}

function scrollCarousel(target){
page($index);
if(target==prevBtn){
leftNum = leftNum - parseInt(list_w);
c_pageNum--;
$index--;
if($index==0){
target.fadeOut(700);
}
}else if(target==nextBtn){
leftNum = leftNum + parseInt(list_w);
c_pageNum++;
$index++;
if($index == len-1){
target.fadeOut(700);
}
}
c_inner.animate({"margin-left":"-"+leftNum+"px"},500);
pointCir.removeClass("on");
pointCir.eq(c_pageNum).addClass("on");
}
prevBtn.on("click",function(){
nextBtn.fadeIn(700);
scrollCarousel(prevBtn);
})
nextBtn.on("click",function(){
prevBtn.fadeIn(700);
scrollCarousel(nextBtn);
})
})

<!------------------------------------------------------------------------------------------------------------------------------------预览---------------------------------------------------------------------------------------------------------------------------------------------------------------->

jquery左右轮播的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  3. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  4. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  5. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  6. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  7. CSS+jQuery实现轮播

    CSS+jQuery实现轮播 CSS jQuery 前端  实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  10. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

随机推荐

  1. 映射语句之INSERT语句

    1.一个 INSERT SQL 语句可以在<insert>元素在映射器 XML 配置文件中配置 例子: <insert id="insertStudentWithId&qu ...

  2. 简单理解js闭包

    什么是闭包?我们先来看一段代码: function a() { var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a ...

  3. SOD开源框架MSF（消息服务框架）介绍

    前言:之前想做消息的广播,拖着就忘记了,现在拿了医生的框架来学习,就按实现了之前想实现的功能. 传送门http://www.cnblogs.com/bluedoctor/,框架的获取,按传送门的链接就 ...

  4. fiddler4手机抓包

  5. 【LeetCode】2. Two Sum

    题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  6. vmware虚拟机的克隆

    开发中需要用到多个虚拟机进行实验.重新安装过程又太繁琐,通过vmware虚拟机自带软件能够很好的快速克隆出完全相同的系统.下面会为大家讲解关于vmware虚拟机怎么克隆,我所用的VMware版本是11 ...

  7. iOS9新特性之常见关键字、泛型

    #pragma mark -- nullable nullable:可以为空,只能修饰对象,不能修饰基本数据类型 // 方式一: @property (nonatomic, copy, nullabl ...

  8. IOS 状态栏(UIStatusBar)

    ios上状态栏指的屏幕顶端的20像素高的部分 状态栏分前景和背景两部分 前景部分:就是指的显示电池.时间等部分: 背景部分:就是显示白色或者图片的背景部分: 如下图:前景部分为黑色字体,背景部分为白色 ...

  9. c# Activex开发之HelloWorld

    最近需要在Web上使用WinFrom程序,所以要用到Activex技术将WinFrom程序变成插件在Web运行 一.创建用户控件 1.1 新建用户控件项目 1.2 在界面上拉一个label,Text赋 ...

  10. usaco training 4.1.1 麦香牛块 题解

    Beef McNuggets题解 Hubert Chen Farmer Brown's cows are up in arms, having heard that McDonalds is cons ...