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

客官°小女子只卖身不卖艺 2022-10-10 11:21 254阅读 0赞

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。

ps：

功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170\*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。

.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量\*单张宽度，

html

![Image 1][]

css

.banner\{

width: 100%;

height: 500px;

overflow: hidden;

position: relative;

.banner a\{

text-decoration: none;

.banner .pic-list\{

width: 10000px;

height: 500px;

position: absolute;

z-index: 1;

.banner .pic-list img\{

width: 1170px;

float: left;

\#buttons\{

position: absolute;

z-index: 2;

height: 10px;

bottom: 20px;

left: 550px;

\#buttons span\{

cursor: pointer;

float: left;

border: 1px solid \#fff;

width: 10px;

height: 10px;

border-radius: 50%;

background: \#333;

margin-right: 5px;

\#buttons .on\{

background: orange;

.arrow\{

cursor: pointer;

line-height: 36px;

text-align: center;

font-size: 20px;

font-weight: bold;

width: 40px;

height: 40px;

position: absolute;

z-index: 2;

top: 200px;

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

color: \#fff;

display: none;

.banner:hover .arrow\{display: block;\}

\#prev\{

left: 20px;

\#next\{

right:20px;

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

var picNum = 4;//图片数量，根据实际修改

var picWidth = 1170;//图片的宽度，根据实际修改

var picMaxWidth = -1 \* picNum \* picWidth;

var currentPic = 1;

var next = $('\#next');

var prev = $('\#prev');

var flag = false;

prev.on('click',function()\{

if(!flag)\{

calPx(1170);

currentPic--;

if (currentPic < 1) \{

currentPic = picNum;

$('\#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');

\});

next.on('click',function()\{

if(!flag)\{

calPx(-1170);

currentPic++;

if (currentPic > picNum) \{

currentPic = 1;

$('\#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');

\});

$('.banner').on('mouseover',function()\{

stop();

\}).on('mouseout',function()\{

play();

\})

function nextClick()\{

next.click();

function play()\{

setInt = setInterval(nextClick,2000);

function stop()\{

clearInterval(setInt);

function calPx(leftPx)\{

flag = true;

var left = parseInt($('.pic-list').css('left'));

var newLeft = left+leftPx;

var time = 300;

var interval = 10;

var speed = leftPx/(time/interval);

function go()\{

var left = parseInt($('.pic-list').css('left'));

if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft))\{

$('.pic-list').css('left', (left + speed) + 'px');

setTimeout(go,interval);

\}else\{

flag = false;

if( newLeft > -1170)\{

newLeft = picMaxWidth;

\}else if (newLeft < picMaxWidth ) \{

newLeft = -1170;

$('.pic-list').css('left',newLeft + 'px');

go();

play();

\});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[Image 1]:

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

发表评论取消回复

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

相关阅读

相关 JQuery实现简单图片自动轮播效果

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

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

相关简单html实现图片轮播,JavaScript实现简易轮播图

相关 html 图片轮播实例,简单实现轮播图效果的实例

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

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

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

相关 jquery实现简单图片轮播效果

相关 jquery实现轮播图效果