<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.out_pic{
width: 320px;
height: 220px;
position: relative;
background: #ffffff;
border: 1px #dddddd solid;
padding: 5px;
overflow: hidden;
}
.inner_pic{
position: absolute;
left: 0;
top: 0;
list-style: none;
margin: 5px;
padding: 0;
width: 975px;
}
.inner_pic li{
list-style: none;
padding: 0;
float: left;
margin-right: 5px;
}
.inner_pic li img{
width: 320px;
height: 220px;
}
.pic_control {
position: absolute;
top: 40%;
cursor: pointer;
width: 40px;
height: 40px;
margin-top: -20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #fff;
text-align: center;
background: #222;
border: 3px solid #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: .5;
filter: alpha(opacity=50);
}
.pic_control:hover{
opacity: .7;
filter: alpha(opacity=70);
}
.pic_prev{
left: 15px;
}
.pic_next{
right: 15px;
left: auto;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"> </script>
<script>
$(document).ready(function(){
var carousel=function(option){
this.carousel_inner_ul=option.carousel_inner_ul;
this.count=option.count;
this.width= this.carousel_inner_ul.width();
this.per_width=this.width/this.count;
this.index=1;
}
carousel.prototype={
moveTo:function(index){
if(index>this.count)index=1;
if(index<1)index=this.count;
this.carousel_inner_ul.animate({"left":+(-(index-1)* this.per_width)+'px'},400);
this.index=index;
},
next:function(){
this.moveTo(++this.index);
},
prev:function(){
this.moveTo(--this.index);
}
}
var mycarousel=new carousel({
carousel_inner_ul:$('.inner_pic'),
count:3
});
$('.pic_prev').click(function(){
mycarousel.prev();
});
$('.pic_next').click(function(){
mycarousel.next();
});
});
</script>
</head>
<body>
<div class="out_pic">
<ul class="inner_pic">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
<a class="pic_prev pic_control">‹</a>
<a class="pic_next pic_control">›</a>
</div>
</body>
</html>
分享到：
相关推荐
使用jQuery实现图片轮播html5手机web页面
标题中的“jquery焦点图片轮播滚动.rar”表明这是一个使用jQuery库实现的焦点图轮播效果的资源包。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得创建复杂的网页动态...
**jQuery 广告图片轮播**是一种常见的网页交互效果，用于在有限的空间内展示多张图片，提升用户体验，尤其适用于网站的首页或者产品展示区。jQuery 提供的强大选择器和动画功能使得实现这一效果变得相对容易。在这个...
这里我们讨论的是一个基于jQuery实现的简单图片滚动轮播切换效果，带有控制按钮，使得用户能够自由地浏览和切换图片。这个轮播图方案特别适合那些希望在网站上动态展示产品或服务的页面。 首先，`index.html`是网页...
**jQuery图片无缝轮播**是一种常见的网页动态效果，用于展示多张图片或内容，并通过自动切换来实现平滑过渡，给用户带来良好的视觉体验。在网页设计中，它经常被用作首页的焦点图或者产品展示。飞牛网采用的就是这种...
通过这个广告轮播，开发者可以了解如何使用jQuery实现轮播的基本功能，如自动切换、手动导航、过渡效果等。它可能包含HTML结构、CSS样式以及JavaScript代码，帮助初学者理解整个实现过程，并能根据自己的需求进行...
**jQuery图片轮播特效**是Web开发中常见的一种动态效果，用于展示一组或多组图片，以滑动或切换的方式自动播放，为用户带来生动、吸引人的视觉体验。在本项目中，我们关注的是使用jQuery库实现这样的功能。jQuery是...
在这个特定的场景中，我们关注的是jQuery Mobile中的图片轮播插件，这是一种常见的用于展示多张图片并实现自动切换效果的组件。 在jQuery Mobile中，图片轮播通常通过数据属性和CSS样式来实现，这允许开发者灵活地...
本教程将深入探讨如何使用jQuery实现图片轮播效果。 首先，我们需要理解jQuery的基本用法。jQuery通过选择器（如`$("#element")`）来选取HTML元素，然后应用各种方法来操作这些元素，如改变样式、添加事件监听等。...
5. **数据属性与遍历**：在管理多张图片的轮播时，我们可以使用jQuery的数据属性（`.data()`）来存储当前显示的图片索引，方便在事件处理中快速获取和更新状态。同时，利用数组遍历方法，我们可以轻松地切换到下一张...
它通过jQuery库操纵DOM（文档对象模型）元素，实现图片的自动切换、导航控制（如左右箭头或点状指示器）以及过渡效果。基本工作流程如下： 1. 初始化轮播容器：设置初始显示的图片，并隐藏其他图片。 2. 自动切换：...
jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果，因此非常适合用来实现图片轮播功能。本文将详细探讨如何使用 jQuery 来创建一个图片轮播。 一、jQuery 基础 在开始图片轮播的...
当我们谈论"jQuery 3D h5图片轮播效果"时，我们指的是利用jQuery库和HTML5技术实现的一种具有三维视觉效果的图片轮播组件。 首先，这种3D轮播效果通常会借助CSS3的3D转换功能，这允许我们在不使用插件的情况下，在...
本资源"jQuery图片相册轮播切换代码.zip"提供了一个功能强大且兼容性良好的图片相册轮播效果，适用于各种网页项目。下面将详细介绍这个jQuery图片相册轮播切换代码的关键知识点。 首先，jQuery相册轮播的基础是通过...
在3D图片轮播插件中，jQuery负责监听用户交互，触发轮播动作，并管理轮播过程中的动画效果。 **3D变换技术** CSS3的3D变换是实现3D图片轮播的关键。通过transform属性，我们可以对元素进行旋转、缩放、平移等操作...
"jQuery复杂图片轮播"就是一种利用jQuery库实现的高效、灵活的图片轮播效果，类似于QQ新闻主页的轮播功能，并且具备自动轮回播放的特点。这种轮播不仅包括基本的图片切换，还可能涉及到各种特效和交互设计，如淡入...
本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...
使用插件实现图片轮播效果： 通过设置传入的参数autoScroll，numControl和arrowControl的值可以显示不同的效果 图片轮播效果一：设置autoScroll=true，numControl=false，arrowControl=false，图片自动轮播，当鼠标...
本篇文章将详细介绍如何使用jQuery创建一个支持IE、Firefox、搜狗等主流浏览器的图片自动轮播效果。 ### 1. jQuery基础知识 在开始之前，我们需要了解jQuery的基本用法。jQuery简化了DOM操作，事件处理和动画效果...