Post
Ask Question
romasha ali

romasha ali

  • NA
  • 94
  • 36.7k

why image slider is not working?

May 29 2014 4:47 PM
the following code is for image slider but it is not working it shows image's thumbnails .. plz sort this out  
code
 
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage3.master.cs" Inherits="MasterPage3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>online shopping>
</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<script src="jquery-1.4.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Online Shopping System </h1>
</div>
<h2>makro</h2>
<div id="s_show">
<img src="1.jpg" alt="img" />
<img src="2.jpg" alt="img1" />
<img src="3.jpg" alt="img2" class="active" />
</div>
<%--<h1 style="border: 5px groove #800000; font-family: 'Comic Sans MS'; font-size: xx-large; color: #CCFF33; background-color:white; position:relative;">Let's have a look to shop</h1>--%>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
javascript.js 
function slideShow() {
var $active = $('#s_show IMG.active');
if ($active.length == 0) $active = $('#s_show IMG:last');
 
var $next = $active.next().length ? $active.next()
: $('#s_show IMG:first');
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval("slideShow()", 3000);
});
 stylesheet.cs 
body { background-image:url('../bck.jpg');
background-repeat:repeat-x;
}
h1 {
color:red;
text-align:center;
font-family:'Comic Sans MS';
}
div
{
border:4px dotted yellow;
border-radius:25px;
}
h3{
color:red;
height: 23px;
width: 947px;
}
h2
{
width:115px;
height:40px;
background:red;
position:relative;
font-family:Verdana;
font-size:xx-large;
color:white;
/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:red; left:200px; top:0px;}
50% {background:red; left:200px; top:200px;}
75% {background:red; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:red; left:200px; top:0px;}
50% {background:red; left:200px; top:200px;}
75% {background:red; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/*slider code*/
#s_show {
position:absolute;
height:350px;
background-color:white;
border:5px groove Fuchsia;
}
#s_show IMG {
position:absolute;
top:10px;
margin-right:50px;
border-width:5px;
border-color:Fuchsia;
border-style:groove;
z-index:3;
opacity:0.0;
}
#s_show IMG.active {
z-index:10;
opacity:1.0;
left: 8px;
width: 14px;
height: 22px;
}
#s_show IMG.last-active {
z-index:9;
}

 
 
 
 
 
 
 
 
 
 
 
 

Answers (2)