html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...

分手后的思念是犯贱 2022-10-06 10:53 168阅读 0赞

直接上代码(请自行引入jquery)：

轮播

body\{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:\#666666;margin:0px;padding:0px;background:\#fff;\}

p,from,h1,h2,h3,h4,h5,h6\{margin:0px;padding:0px;\}

ul,ol,li\{margin:0px;padding:0px;list-style:none;\}

img\{border:none;\}

a\{color:\#333333;text-decoration:none;\}

a:hover\{color:\#666666;text-decoration:none;\}

.clearfix:after\{content:".";display:block;height:0;clear:both;visibility:hidden\}

.clearfix\{display:inline-table\}

.main \{

position: relative;

width: 500px; height: 350px;

.myslide \{

float: left; position: absolute; overflow: hidden;

width: 500px; height: 350px;

.myslidetwo \{

position: absolute;

overflow: hidden;

width: 2000px;

.myslidetwo li \{

position:relative;

float: left; background:\#ccc; text-align:center; line-height:350px; width: 500px; height: 350px;

.label\{

position: absolute;

bottom: 15px;

left: 210px;

width: 200px;

.label li \{

float: left;

width:20px;height:20px;line-height:20px;text-align: center;

margin-right: 5px;

border:1px solid \#3F8AE3;

font-size: 14px;

background: \#fff;

cursor: pointer;

.label li.current \{

color:\#fff;

background: \#3F8AE3;

.arrows\{

position: absolute;

left:0px; top:0px;

color:\#666; font-size: 40px;font-weight: bold;

.arrows a\{

cursor:pointer;

background: rgba(0,0,0,0.2);

display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;

.arrows a:hover\{

background: \#3F8AE3;

color:\#fff;

.arrows .pre\{

margin-right: 429px;

$(document).ready(function () \{

var \_now=0;

var oul = $(".myslidetwo");

var numl = $(".label li");

var wid = $(".myslide").eq(0).width();

//数字图标实现

numl.click(function () \{

var index = $(this).index();

$(this).addClass("current").siblings().removeClass();

oul.animate(\{'left': -wid \* index\}, 500);

\})

//左右箭头轮播

$(".pre").click(function () \{

if (\_now>=1) \_now--;

else \_now=3;

ani();

\});

$(".next").click(function () \{

if (\_now == numl.size() - 1) \{

\_now = 0;

else \_now++;

ani();

\});

//动画函数

function ani()\{

numl.eq(\_now).addClass("current").siblings().removeClass();

oul.animate(\{'left': -wid \* \_now\}, 500);

//以下代码如果不需要自动轮播可删除

//自动动画

var \_interval=setInterval(showTime,5000);

function showTime() \{

if (\_now == numl.size() - 1) \{

\_now = 0;

else \_now++;

ani();

//鼠标停留在画面时停止自动动画，离开恢复

$(".myslide").mouseover(function()\{

clearTimeout(\_interval);

\});

$(".myslide").mouseout(function()\{

\_interval=setInterval(showTime,2000);

\});

\})

*  1
    
    <
    
    >
 *  2
    
    <
    
    >
 *  3
    
    <
    
    >
 *  4
    
    <
    
    >

1.  1
2.  2
3.  3
4.  4

html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

相关 html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...

相关 html简单图片轮播居中,html简单图片轮播的实现

相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播

相关 html实现自动图片轮播,图片轮播的实现（html__js）

相关 jq实现图片轮播:圆形焦点+左右控制+自动轮播

相关最简单jquery实现带左右箭头和数字焦点的图片轮播

相关 JavaScript实现简单的图片轮播（通过点击左右焦点切换）

相关 JQuery实现简单图片轮播

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播