利用jquery写的左右轮播图特效

前端技术 2023/09/03 JavaScript
最近不是很忙，练习写了一个轮播图效果，虽然效果跟功能上貌似是没问题，但是我认为在许多东西上面都有待改进，在前端这个职位上我还有很远的路要走，当然要学的东西还有很多，这里仅仅对自己最近研究js的一个记录，我相信以后能写出更好的

将jquery框架的链接跟图片替换就可以看到效果了

源代码如下：
复制代码 代码如下:

<!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=utf-8\" />
<title>轮播图</title>
<style>
*{margin:0; padding:0;}
body{min-width:320px; font-size:12px;}
h1{font-size:18px;}
h2{font-size:14px}
h4{font-size:12px;}
p{ word-break:break-all; line-height:24px;}
ul,ul li,ol,ol li{list-style:none;}
a{text-decoration:none;}
.clear{clear:both;}
.clearfix:after{ display:block; clear:both; content:\".\"; visibility:hidden; height:0px;}

#pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;}
.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;}
.lunbo_pic li{ float:left; overflow:hidden;}
.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;}
.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; }
.lunbo_curso a{ background:url(../images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;}
.lunbo_curso .small_xz{ color:#F0F;}
.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;}
#arr_l{ left:0; background:#CCC;}
#arr_r{ right:0; background:#CCC;}
.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;}
</style>
<script type=\"text/javascript\" src=\"jquery/jquery-1.8.3.min.js\"></script>
</head>
<body>
<div id=\"pic_carousel\">
<ul id=\"lunbo_pic\" class=\"clearfix lunbo_pic\">
<li><a href=\"#\"><img src=\"images/insco_p1.jpg\" /></a></li>
<li><a href=\"#\"><img src=\"images/insco_p2.jpg\" /></a></li>
<li><a href=\"#\"><img src=\"images/insco_p3.jpg\" /></a></li>
<li><a href=\"#\"><img src=\"images/insco_p1.jpg\" /></a></li>
<li><a href=\"#\"><img src=\"images/insco_p2.jpg\" /></a></li>
</ul>
<div id=\"lunbo_curso\" class=\"lunbo_curso\">
<a href=\"#\" class=\"small_xz\">1</a>
<a href=\"#\">2</a>
<a href=\"#\">3</a>
<a href=\"#\">4</a>
<a href=\"#\">5</a>
</div>
<span id=\"arr_l\" class=\"arr\"></span>
<span id=\"arr_r\" class=\"arr\"></span>
</div>
<script>
var b_width = 1000; // 大图的宽度
var speed = 500; // 图片向左移动速度
var s_time = 3000 //图片自动滚动速度
var pic_li = $(\"#lunbo_pic\").children(\"li\");
$(document).ready(function(e) {
var $ul_width= pic_li.width() * pic_li.length; //轮播图的宽度
$(\"#lunbo_pic\").width($ul_width);
var small_width = $(\".lunbo_curso>a\").width() * $(\".lunbo_curso>a\").length;
$(\".lunbo_curso\").width(small_width);
$(\".lunbo_curso\").css(\"margin-left\",-small_width/2);
});



$(document).live(\"click\",function(e){
$target = $(e.target);
var id = $target.attr(\'id\');
if($target.is(\"a\") && $target.parent($(\"#lunbo_curso\")) ){
$target.addClass(\"small_xz\").siblings().removeClass(\'small_xz\');
var mar_lf = parseInt($target.index() * b_width);
$(\"#lunbo_pic\").animate({
left : -mar_lf
},speed);
}
if(id == \"arr_l\"){
prePage();
}
if(id == \"arr_r\"){
nextPage();
}
});
//上一个
function prePage(){
if($(\".small_xz\").index() == 0){
$(\"#lunbo_pic\").css(\"left\",-4000);
$(\"#lunbo_pic\").animate({
\"left\": -parseInt(pic_li.length *b_width - b_width)
},speed);
$(\"#lunbo_curso>a\").eq(pic_li.length - 1).addClass(\"small_xz\").siblings().removeClass(\"small_xz\");
$(\".small_xz\").index() == pic_li.length - 1;
}else{
$(\"#lunbo_curso>a\").eq($(\".small_xz\").index()-1).addClass(\"small_xz\").siblings().removeClass(\"small_xz\");
var mar_lf2 = parseInt($(\"#lunbo_pic\").css(\"left\")) + b_width;
$(\"#lunbo_pic\").animate({
\"left\": mar_lf2
},speed);
}
}
//下一个
function nextPage(){
if($(\".small_xz\").index() == pic_li.length -1){
$(\"#lunbo_pic\").css(\"left\",0);
/*$(\"#lunbo_pic\").animate({
\"left\": 0
},speed);*/
$(\"#lunbo_curso>a\").eq(0).addClass(\"small_xz\").siblings().removeClass(\"small_xz\");
$(\".small_xz\").index() == 0;

}else{

$(\"#lunbo_curso>a\").eq($(\".small_xz\").index() + 1).addClass(\"small_xz\").siblings().removeClass(\"small_xz\");
var mar_lf2 = parseInt($(\"#lunbo_pic\").css(\"left\")) - b_width;
$(\"#lunbo_pic\").animate({
\"left\": mar_lf2
},speed);
}
}

function picRun(){
nextPage();
}
intervalTime = setInterval(picRun,s_time);

$(\"#pic_carousel\").on(\"mouseover\",function(){
clearInterval(intervalTime);
});
$(\"#pic_carousel\").on(\"mouseout\",function(){
intervalTime = setInterval(picRun,s_time);;
});

</script>
</body>
</html>

本文地址：https://www.stayed.cn/item/6710

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案