带左右箭头图片切换

最新推荐文章于 2022-02-20 19:30:59 发布

小南瓜0

最新推荐文章于 2022-02-20 19:30:59 发布

阅读量4.8k

点赞数 2

分类专栏： jQuery效果文章标签： jquery轮播左右滚动效果带左右箭头js效果

本文链接：https://blog.csdn.net/u012038068/article/details/53872118

版权

这是一个使用jQuery编写的图片轮播代码示例，包含左右箭头导航，实现了图片的左右滚动和小点指示器切换功能。轮播效果支持手动点击切换和自动播放，具有良好的用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<style type="text/css">

*{margin:0px;padding:0px;}

.con{width:300px;height:200px;margin-left:500px;margin-top:200px;overflow:hidden;position:relative;z-index:1;}

.nav{width:90%;height:30px;position:absolute;bottom:0px;line-height:30px;left:0px;z-index:175;text-align:right;}

.nav dd{width:10px;height:10px;border-radius:10px;background:blue;display:inline-block;margin-left:5px;margin-top:10px;}

ul{width:5000px;position:relative;left:0px;z-index:55;}

ul li{float:left;list-style-type:none;}

ul li img{width:300px;height:200px;}

#art dd{float:left;width:300px;display:none;}

#con_show{display:none;}

#art{height:30px;line-height:30px;background:#000;color:#fff;font-weight:bold;z-index:66;width:100%;position:absolute;bottom:0px;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}

#btn{position:absolute;height:30px;z-index:55;width:300px;top:100px;}

#btn .L{background:url(w7_Arr.gif) no-repeat 0px 0px;width:18px;height:37px;display:block;float:left;}

#btn .R{background:url(w7_Arr.gif) no-repeat -18px 0px;width:18px;height:37px;display:block;float:right;}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

var rq_tit; //播放的tit 小蓝点555

var rq_con ; //播放的内容

var s_width ; //移动的距离，或是图片的宽度

var tmp_index = 0; //当前显示的图片，